@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bitcount+Grid+Double:wght@100..900&family=Bitcount+Prop+Double:wght@100..900&family=Bitcount+Prop+Single:wght@100..900&family=Bitcount:wght@100..900&family=Dancing+Script:wght@400..700&family=Fascinate&family=Luckiest+Guy&family=Manufacturing+Consent&family=My+Soul&family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bitcount+Grid+Double:wght@100..900&family=Bitcount+Prop+Double:wght@100..900&family=Bitcount+Prop+Single:wght@100..900&family=Bitcount:wght@100..900&family=Dancing+Script:wght@400..700&family=Fascinate&family=Luckiest+Guy&family=Manufacturing+Consent&family=My+Soul&family=Rubik:ital,wght@0,300..900;1,300..900&family=Share+Tech+Mono&display=swap');

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
body{
    width:100vw;
    height:150%;
    color:#00ff00;
    font-size:16px;
    background-image:url('https://img.freepik.com/premium-photo/black-sky-with-stars-white-sky_327903-9995.jpg?w=996');
    display:flex;
    justify-content:space-between;
    overflow-x:hidden;

}
header{
    height:100%;
    width:35%;
    background-color:rgba(0,0,0,0.8);
    padding:5%;
    font-size:1.8rem;
    position:sticky;
    top:0;
    margin-bottom:-10px;
    z-index: 999;
    font-family:"Bitcount Prop Double";

}
/*so since i want the header to fill the whole vh
for a mobile sized screen i will use mediaquery with a width:100vw*/
@media only screen and (max-width:1080px){
    .whole{
        margin-left:-80px;
    }
    header{
        width:100%;
        position:static;
        padding:20% 20% 0 20%;
        display:block;
        font-size:2rem;
    }
    main{
        display:block;
        margin-left:-90px;   
    }
    body{
        display:block;
    }   
    nav{
        margin-left:-10%;
        margin-right:40px;
    }   
} 
/*for the animation pyramid*/
#pyramid{
    border-bottom:20px solid #00ff00;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    margin-right:10px;
    animation-name:py;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    
}
@keyframes py{
    0%{
        transform:rotate(0deg);
    }
    50%{
        transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg)
        
    }

}
.whole{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;

}
#blink{
    animation-name:blinking;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
@keyframes blinking{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
}
h1{
    font-family:"Bitcount";
    font-size:2.9rem;
    color:#00FF00;

}



header li{
    list-style:none;
    margin-left:-10px;
    font-size:1.7rem;
    margin:15px;

}
ol>li{
    margin:30px;
}
ol>li:hover{
    background-color:#00ff00;
    color:black;
    padding:10px;
}
header nav{
    width:130%;
    height:80px;
    margin-left:-30px;
}
header ul{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-evenly;
    align-items: center;
    margin-top:90px;
    background:black;
    border:1px solid #00ff00;
    border-radius:10px;
    padding:8px;
    margin-left:-6%;
    padding-right:30px;
}

header li>a{
    text-decoration:none;
    color:#00ff00;
}
header li>a:hover{
    background:#00ff00;
    color:black;
    padding:10px;
    border-radius:9px;
}
/*for convenient we will use the grid-template-areas*/
main{
    padding-left:20px;
    margin-left:20px;
    width:90%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
    "h2 h2"
    "first third"
    "second fourth";
    column-gap:20px;
    row-gap:10px;
    padding:20px;
    text-align:justify;
    padding-top:50px;
    font-size:20px;
    line-height:29px;
    color:rgb(34, 233, 34)
}
main>h2{
   grid-area:h2;
   margin:40px;
}
main>.first{
    grid-area:first;
}
main>.second{
    grid-area:second;
}
main>.third{
    grid-area:third;
}
main>.fourth{
    grid-area:fourth;
}

footer{
    width:100%;
    margin-left:60px;
    padding-bottom:30px;
    height:auto;
}
.course{
    border:1px solid #00ff00;
    background:linear-gradient(180deg, black, transparent, #084808);
    padding:30px;
    margin:20px;
    margin-left:40px;
    min-width:50%;
    max-width:50%;
}
footer h2{
    font-style:italic;
    margin-bottom:20px;

}
.course:hover{
    background:linear-gradient(20deg, #00ff00,#095c09);
    color:black;
}