*{
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
body{
   color: rgb(15, 11, 11);
    font-size: 17px;
    background-color: #eaeaeb;
    font-family: tahoma;
    margin-left: 10px;
    display: flex;
    width: 98vw;
    flex-direction: column;
}

.navbar .topnav ul li{
    list-style-type:none;
    display: inline-block;
    height:40px ;
    color:black ;
    font-family: 'Courier New', Courier, monospace;
    font-size:20px;
    margin-left: 50px;
    margin-top: 7px;

}

.topnav ul{
    margin-left:55vw; 
}
.topnav a{
   color: rgb(12, 12, 12);
   text-decoration: none;
   text-transform: capitalize;
}
.topnav a:hover{
    border-top:1px solid rgb(6, 6, 209);
    border-bottom: 1px solid blue;
    font-size: 20px;
    color: black;
   
}
.topnav{
    background-color: rgb(217, 226, 225);
}
.topnav a:active{
    color: rgb(47, 2, 212);
}


#welcome{
    font-size: 25px;
    text-align: center;
    text-decoration: underline;
   
}
.description{
    width: 90vw;
    margin-left:80px;
    display: inline-block;
    background-color: rgb(255, 255, 255);

}
.text{
    margin-left: 20px;
    font-family: "zain",sans-serif;
}
.description  li {
    list-style-type: none;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 16px;
    display: inline-block;
    gap: 20px;
   
}

img{
    margin-top: 20px;
    width: 30vw;
    height: 60vh;
    border-radius: 5px;
    margin-left: 30vh;
    }
h2{
    color: rgb(28, 105, 9);
    font-size: 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   
}
 #name{
    color: rgb(3, 20, 252);
    font-size: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.skills{
    text-align: center;
   
}
.trouble-shooting{
    width: 30vw;
    height: 50vh;
    margin-left: 10px;
    border-radius: 5px;
}
p{
    margin-left: 1px;
    font-family:"zain",sans-serif;
}
#resume{
    color: black;
    background-color: #223f64;
    font-size: 17px;
    width: 10vw;
    border: 1px solid black;
    border-radius: 10px;
    margin-left: 10px;
    &:hover{
        color: rgb(255, 247, 247);
        background-color: rgb(9, 73, 48);
        transition: .2s ;
        border-color: black;
    }
}
#resume a{
    color: rgb(255, 247, 247);
    background-color: #223f64;
    text-decoration: none;
    &:hover{
        background-color: transparent;
    }
}
#c{
    font-family:"zain",sans-serif;
    font-size: 20px;
}
#para  li{
    list-style-type:none;
    margin-left: 50px;
    color:rgb(23, 23, 117) ;
    gap: 5px;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.samples li{
    list-style-type: none;
    display: inline-block;
    gap: 1px;
}
#p{
    text-align: left;
}
.projects{
    margin-left: 80px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 17px;
    width: 90vw;
    color: rgb(34, 34, 41);
    background-color: rgb(212, 212, 212);
}
.projects ul li{
 list-style-type:none;
}
.contacts ul li{
    list-style: none;
    list-style-type: none;
    display: inline-block;
    gap: 5px;
}
.contacts #icons{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
summary{
    font-weight: bold;
}
.navi{
    display: none;
}
@media screen and (max-width:490px) {
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body{
      overflow: scroll;
      overflow-x: auto;
      width: 99vw;
      display: flex;
      flex-direction: column;
      height: fit-content;
      margin-left: 6px;
      margin-right: 2px;
    }
    .topnav ul{
        margin-left:0 ;
     
    }
    .topnav ul li{
        margin-left: 1px;
        display: inline-block;
    }
    
    .topnav ul{
        margin-left: 2px;
    }
    .topnav a{
        color: rgb(15, 15, 15);
        font-size: 15px;
        text-decoration: none;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    
    .topnav{
        background-color: rgb(238, 255, 252);
    }
    .topnav a:active{
        color: rgb(47, 2, 212);
    }
    
    
    #welcome{
        font-size: 27px;
        text-align: center;
        text-decoration: underline;
       
    }
    .description{
        width: 95vw;
        margin-left: 1px;
        display:block;
        color: white;
        background-color: rgb(28, 25, 77);
    
    }
    
    .description  li {
        list-style-type: none;
        text-decoration: none;
        text-transform: capitalize;
        font-size: 17px;
        display: block;
        gap: 3px;
       
    }
    #resume{
        color: black;
        background-color: #fffcfc;
        font-size: 17px;
        width: 30vw;
        border: 1px solid black;
        border-radius: 10px;
        margin-left: 30%;
    }
    #resume a{
       color:black;
       text-decoration: none;
       background-color: transparent;
    }
    
    img{
        width: 80vw;
        height: 25vh;
        border-radius: 5px;
        margin-left: 5vw;
        
    }
    h2{
        color: rgb(151, 37, 37);
        font-size: 25px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       
    }
     #name{
        color: rgba(238, 63, 10, 0.829);
        font-size: 25px;
        font-family: poppins;
       animation:glow-text .3s ease-in-out;
    }
    .skills{
        text-align: center;
       
    }
    .trouble-shooting{
        width: 90vw;
        height: 30vh;
        margin-left: 1px;
        border-radius: 4px;
    }
    p{
        margin-left:5px ;
        font-family:poppins;
    }
    #para  li{
        list-style-type:none;
        margin-left: 50px;
        color:rgb(149, 149, 182) ;
        gap: 1px;
        font-size: 13px;
        font-family: "zain",sans-serif;
    }
    .samples li{
        list-style-type: none;
        display: block;
        gap: 1px;
    }
    #p{
        text-align: left;
        font-family: "zain",sans-serif;
         color: white; 
         font-family: 'zain',sans-serif;

    }
    #content{
      background-color: #1b1f52;  
      width: 99vw;
      margin-left: 1px;
      height: fit-content;
      color: white;
    }
    #content #para{
        font-family: 'zain',sans-serif;
    }
       /*style the projects file*/
    .projects{
        margin-left: 0;
        font-family:"zain",sans-serif;
        font-size: 20px;
        color: rgb(255, 255, 255);
        background-color: rgb(39, 33, 78);
        width: 99vw;
        justify-content: center;
        align-items: center;
        height: fit-content;
    }
    .projects a{
        font-family: "zain",sans-serif;
        text-decoration: underline;
        color: aqua;
        &:visited{
            color: rgb(235, 111, 111);
            font-size: 20px;
        }
        &:active{
            color:rgb(28, 28, 133) ;
        }
    }

    .projects ul li{
     list-style-type:none;
    }
    img .projects{
        width: 95vw;
        height: 30vh;
    }
    .contacts ul li{
        list-style: none;
        list-style-type: none;
        display:block;
        gap: 1px;
    }
    .contacts #icons{
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    #footer{
        background-color: #c2bebe;
    }
    /*style the projects nav bar*/
    
    #para{
        font-family: 'zain',sans-serif;
        font-size: 24px;
        line-height: 2px;
    }
    .navi{
      width: 100vw;
      height: 50px;
      background-color: #fff;
    }
    .navi ul li{
        list-style-type: none;
        display: inline-block;

    }
   
    
}