@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');
@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=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Share+Tech+Mono&display=swap');
/*First we should set
 all the space by default provided to sero*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    width:100vw;
    height:100%;
    text-align:center;
    background-image:url('https://img.freepik.com/premium-photo/black-sky-with-stars-white-sky_327903-9995.jpg?w=996');
    color:#00ff00;
    font-size:16px;
    font-family:"Roboto Condensed",sans-serif;
}
header{
    background:black;
    width:100vw;
    height:10vh;
    margin-bottom:40px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    position:sticky;
    top:0;
    font-size:23px;
    font-family:"Bitcount";
}
nav{
    width:100%;
    height:100%;
    padding:10px;
}
ul{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}
ul li{
    list-style:none;
}
main{
    width:90%;
    height:auto;
    display: flex;
    justify-content:row;
    align-items:center;
    flex-wrap: wrap;
    margin:auto;
}
img{
    width:50%;
    height:90%;
    border:1px solid #00ff00;
    border-radius:50%;
    padding:0;
    margin-bottom:40px;
    object-fit:cover;
    margin:auto;
    margin:0 40% 30px 20%;

}
div{
    width:30%;
    height:auto;
    text-align:justify;
    margin:20px 20px 9% 20px;
    padding:10px;
  
}
/*for tablet and phone resolution we will use
media query*/
@media only screen and (max-width:800px){
    main{
        width:400px;
        height:auto;
        margin:auto;
    }
    div{
        width:80%;
        border:1px solid #00ff00;
        padding:20px;
        overflow:hidden;

    }
}
@media only screen and(max-width:1500px) and (min-width:799px){
    div{
        width:300px;
    }  
}
@media only screen and (max-width:1500px) and (min-width:799px){
    div{
        width:480px;
        margin-right:10px;
    }
}
@media only screen and (max-width:1200px) and (min-width:800px){
    div{
        width:310px;
    }

}
footer{
    width:100%;
    height:auto;
    background:linear-gradient(180deg,transparent,#166616);
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    color:black;
    padding:20px;
    position:relative;
    overflow-x:hidden;
}
table{
     border-collapse: collapse;
     width:40%;
     text-align:left; 
     background:linear-gradient(180deg, #1fb51f, #14b514)
}
thead{
    font-family:tahoma;
    border:1px solid black;
}
th{
    border:1px solid black;
    width:auto;
    padding:10px;
}
tr{
   border:1px solid black;
   padding:10px;
}
td{
    padding:10px;
    border:1px solid black;
}
.icons{
    border:1px solid black;
    width:200px;
    height:auto;
    border-radius:10px;
    padding:20px;
    display:flex;
    justify-content:space-evenly;
    gap:10px;
    background-color:#15a215;
}
.icons a i{
    color:rgb(54, 47, 47);
    font-size:24px;
    transition:color 0.3s;
}
/*hovering effect for the icons to turn them into black*/ 
.icons a i:hover{
    color:black;
}
.before{
    color:#00ff00;
    width:auto;
    text-align:left;
    border:none;
}
.before li{
    list-style:none;
}
@media only screen and (max-width:800px){
    footer{
        position:relative;
        
    }
    .table{
        position:absolute;
        left:10px;
        top:10px;
        margin:20px;
    }
    .icons{
        position:absolute;
        bottom:0;
        right:5%;
    }
}
header a{
    text-decoration:none;
    color:#00ff00;
    border:1px solid #00ff00;
    padding:10px;
    border-radius:10px;
    transition:color 0.3s;
}
header a:hover{
    color:black;
    background-color:#00ff00;
}
header a:active{
    color:rgb(138, 246, 138);
}
/*to add an emoji befor the FYI section contents*/
.before::before{
    content:"🧐";
    font-size:40px;
    margin-right:4px;

}
.before li a{
    color:#00ff00;
    text-decoration:none;
}
.before li a:hover{
    color:black;
}