@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
:root {
    --bg-color-1: rgb(37, 37, 37); 
    --bg-color-1-lower: rgba(20, 20, 20, 0.87);
    --bg-color-2: rgb(42, 136, 42); 
    --bg-color-2-lower: rgba(42, 136, 42, 0.829); 
    --bg-color-3: black;
    --txt-color-1: white;
    --txt-color-2: black; 
    --txt-color-3: rgb(199, 194, 194); 
    --color-1: green;
    --color-2: lightblue; 
    --color-3: rgb(190, 143, 13); 
    --color-4: pink; 
    --color-5: rgb(180, 11, 180); 
}

a {
    color: var(--color-4);
}
a:visited {
    color: var(--color-5)
}
/* style for button */
.style-one {
    background-color: rgb(58, 145, 58);
    color: white; 
    padding: 5px; 
    border: none; 
}

.style-two {
    background-color: rgb(236, 51, 51);
    color: white; 
    padding: 5px; 
    border: none; 
}
.tags {
    display: flex; 
    flex-wrap: wrap; 
    padding: 50px; 
    padding-left: 0; 
}

.tag-button, .tag-button:visited {
    color: var(--color-1);
    text-decoration: none;  
    background-color: rgb(114, 214, 68);
    padding: 10px 20px;
    margin: 5px; 
    margin-left: 0; 
    margin-right: 10px;
}

.tag-button:hover {
    color: var(--color-2);
    background-color: rgb(45, 137, 241);
}

.read-button, .read-button:visited {
    float: right;
    background-color: rgb(68, 214, 170);
    color: var(--color-1);
    text-decoration: none;  
    padding: 10px 10px;
    border-radius: 5px;
}

.read-button:hover {
    background-color: rgb(9, 211, 150);
}

#active {
    color: var(--color-2);
    background-color: rgb(0, 119, 255);
}

/*---------------START OF NAVBAR----------------------------*/
#navbar {
    overflow: hidden; /*prevents scroll bars from appearing even when necessary*/
    background-color: var(--bg-color-3); 
    border-top: solid;
    border-color: var(--color-4);
    z-index: 100;
}

#navbar a {
    float: left; 
    display: block; 
    color: var(--color-4);
    text-align: center;
    padding: 14px;
    text-decoration: none; /* gets rid of the underline in the links*/
}
#navbar a:hover {
    color: var(--color-5);
}

#navbar .active {
    background-color:  rgb(182, 81, 182);
}

/* use JS to add this class onto the navbar when it reaches scroll position*/
.sticky {
    position: fixed;
    top: 0;
    width: 100%; 
}

.sticky + .content {
    padding-top: 60px; 
}

/*-----------------END OF NAVBAR-------------------------*/

/*-----------------START OF HERO--------------------------------------*/
.hero {
    color: var(--txt-color-3);
    background: linear-gradient(to bottom right, var(--bg-color-2-lower), var(--color-3));
    width: 100%;
    overflow: hidden; 
}

.hero-one {
    background: linear-gradient(to bottom right, rgb(65, 172, 65), rgb(59, 59, 245));
}

.hero-two {
    background: linear-gradient(to bottom right, rgb(151, 150, 150), rgb(0, 2, 80));
}

.display-clock {
    padding: 15px; 
}
/*------------------- END OF HERO ----------------------------------------------*/

body {
    color: var(--txt-color-1);
    background: var(--bg-color-1);
    font-family: 'Space Mono', monospace;
    margin: 0;
    padding: 0; 
    width: auto; 
    overflow-x: hidden;
}

main {
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    column-gap: 10px;
    padding: 10%; 
    padding-top: 50px;  
}
/*------------Background CSS--------------------------*/
.background-one {
    background-image: url("../images/two-limes.png");
    background-repeat: repeat;
    
}

.background-two {
    background: rgb(78, 83, 95);
}

.background-three {
    background: rgb(29, 70, 68);
}

/*-----------using this on the hero-------------*/
.changing-background {
    background: linear-gradient(to bottom right, red,blue);
    animation-name: bg-change;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
  
@keyframes bg-change {
    0%   {background: linear-gradient(to bottom right, var(--bg-color-2-lower), var(--color-3))}
    25%  {background: linear-gradient(to bottom right, rgb(65, 172, 65), rgb(59, 59, 245));}
    50%  {background: linear-gradient(to bottom right, rgb(151, 150, 150), rgb(0, 2, 80));}
    100% {background: linear-gradient(to bottom right, rgb(206, 2, 2), var(--color-3));}
}

/*------------------------------------------------------*/
article {
    display: grid;
    grid-template-columns: 1fr; 
    row-gap: 10px; 
}

.content {
    padding: 1em; 
    color: white; 
    z-index: 1; 
    height: auto; 
    background: var(--bg-color-1-lower); 
}

aside {
    padding: 1em; 
    background: var(--bg-color-1-lower); 
    color: white; 
    height: 500px; 
}

footer {
    padding: 16px; 
    background-color: var(--bg-color-1-lower);
    height: 150px; 
    width: 100%; 
}
/*-------------------fa icons-----------------------------------------*/
.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%; 
    color: white;    
}

/* Adds a hover effect */
.fa:hover {
    opacity: 0.7;
}

/* stylizing the icons */
.fa-envelope {
    background: #dd4b39;
}

.fa-linkedin {
    background: #007bb5;
}
.fa-github {
    background: black;
}

.fa-twitter {
    background: rgb(50, 136, 235); 
}

  
.hidden-text {
    display:none;
}
  
/*------------------------CONVENIENT CLASSES------------------------------------*/
.border {
    border: 1px solid;
    border-color: white; 
} 

.border-dash {
    border: dashed; 
}
.center {
    text-align: center;
}

.shadow {
    text-shadow: 2px 2px var(--color-3);
}


/*----------------------ANIMATIONS----------------------------------*/
.fade-in {
    animation: fadeInAnimation ease 5s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

}

@keyframes fadeInAnimation {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}


@media only screen and (max-width: 1100px) {
    main {
        grid-template-columns: 1fr; 
        row-gap: 10px;
        
    }
    aside {
        height: auto; 
    }
    
}