* {
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border:border-box;
    padding: 0;
}
.navbar{
    background-color: #2e1114;
    display: flex;
    /* height: 60px;
    padding: 10px 10px 10px 10px; */
    height: 4rem;
    padding: 0.625rem 0.625rem 0.625rem 0.625rem ;
    justify-content: space-evenly;
    align-items: center;
    /* flex-direction: column; */
    position: sticky;
    top: 0;

}
/* #div1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#div2{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#div3{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
} */
#abt{
    font-size: 2rem;
    font-family: "Rouge Script",serif;
    font-weight: bolder;
    text-shadow: 0.125rem 0.125rem grey;
    /* animation-name: myname;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse; */
}
@keyframes myname{
   from {
    font-size: 2rem;
   }
   to {
    font-size: 2.5rem;
   }
   50%{
    color:blue;
   }
   
}
@keyframes web{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(0.8);
    }
}
#icon1{
    padding-right:0.3125rem;
    color:rgb(246, 236, 169);
}
#icon2{
    padding-right: 0.3125rem;
    color:rgb(246, 236, 169);
}
#icon3{
    padding-right: 0.3125rem;
    color:rgb(246, 236, 169);
}
#icon4{
    padding-right: 0.3125rem;
    color:rgb(246, 236, 169);
}
#icon5{
    padding-right: 0.3125rem;
    color:rgb(246, 236, 169);
}
#icon6{
    padding-right:0.3125rem;
    color:rgb(246, 236, 169);
}
#icon7{
    padding-right:0.3125rem;
    color:rgb(246, 236, 169);
}
#logoimg{
    animation-name: web;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}
a{
    color: white;
    text-decoration: none;
    text-transform: capitalize;   
}
.items{

    background-color:#2e1114;
     color: white; 
    border: 0.09375rem solid transparent;
    padding: 0.125rem 0.1875rem 0.125rem 0.1875rem;
    border-radius: 5%;
    transition:all 0s ease-in 0s;
}
.items:hover{
     border: 0.09375rem solid white; 
     background-color:#501b1d;
    font-size: 1.375rem;     
}
a:hover{
    color:wheat;
}
#section1{
    display: flex;
    height: 31.25rem;
    width: fit-content;
    padding: 0 0.625rem 0.625rem 0.625rem ;
    justify-content: space-evenly;
    align-items: center;

}
#section2{
    display: flex;
    /* height: 25rem; */
    /* height: fit-content;
    width: fit-content; */
    height: fit-content;
    padding:  0.625rem 0.625rem 0.625rem 0.625rem ;
    justify-content: space-evenly;
    align-items: center;
}
#section2c{
    display: flex;
    /* height: 25rem; */
    height: fit-content;
    padding:  0.625rem 0.625rem 0.625rem 0.625rem ;
    justify-content: space-evenly;
    align-items: center;
}
.contact{
    background-color: black;
    font-size: 2.5rem;
    padding: 0.3125rem 0.3125rem 0.3125rem 0.625rem;
    border-radius: 10%;
    font-family: "Rouge Script",serif;
    font-weight: bold;
    /* background-color: #83677b; */
    
}

.intro{
    height:fit-content;
    width: fit-content;
    padding: 3.125rem 3.125rem 3.125rem 3.125rem;
    border-radius: 10%;

}
.intro:hover{
   color:blue;
 
}
p{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem;

    height: fit-content;
    width: fit-content;
}

span{
    font-size: 3rem;
    text-align: center;
    text-transform: capitalize;
    font-family: "Rouge Script",serif;
    font-weight: bolder;
    text-shadow: 0.125rem 0.125rem grey;
}

.imgtext{
    padding:0 1.25rem 0 1.25rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem;
    
    width: 12.5rem;
}
.imgtext:hover{
    color:blue;
   
  
}
#section3a{
    /* height: 800px; */
    height: fit-content;
    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.5625rem;
   
    padding: 0.625rem 0.625rem 0.625rem 0.625rem ;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}

#section3b{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 0.625rem;
}
#section3c{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
table,th,td{
    font-size: 0.7rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 0 1.25rem 0 1.25rem;
    border: 0.125rem solid #2e1114 ;
     padding: 0.125rem 0.125rem 0.125rem 0.125rem; 
    text-align: center;
   
}
table{
    width: 50vw;
}
th,td:hover{
    background-color:#2e1114;
    color: wheat;
}
#section4a{
    display: flex;
    height: fit-content;
    justify-content: center;
    align-items: center;
}
#section4b{
    display: flex;
    height: fit-content;
 
    justify-content: center;
    align-items: center;
}
.achievements{
    padding:0.625rem 0.625rem 0.625rem 0.625rem ;
    height:12.5rem;
    width: 18.75rem;
    margin: 0 1.25rem 0 1.25rem;
    border-radius: 10%;
    
}
.achievements:hover{
    color:blue;
}
#section5a{
    display: flex;
    height: fit-content;
    justify-content: space-evenly;
   
    align-items: center;
}

#section5b{
    display: flex;
    height: fit-content;
    justify-content: space-evenly;
    
    align-items: center;
    padding-bottom: 1rem;
}

.skills{
    padding: 0.625rem 0.625rem 0.625rem 0.625rem ;
    border-radius: 5%;
    
}
#footer{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 18.75rem;
    background-color: #2e1114;
}
#footer{
    height:8rem;
}
.skills:hover{
    color: blue;
}
img {
    max-width: 100%;
    height: auto;
}
img:hover{
    transform: scale(1.2);
    transition: all 1s ease-in;
}
#aboutme{
    height: 5.3125rem;
}
#images{
   height: 5.625rem;
}
#edu{
    height: 4.6875rem;
}
#achievement{
    height: 4.6875rem;
}
#skill{
    height: 4.6875rem;
}
.achievements{
    width: 20vw;
}
#resume{
    background-color:wheat
}
#resume:hover{
    background-color: white;
}
#checkbox{
    visibility: hidden;
}
#checkbox:checked + .toggle-label .toggle-ball{
 transform: translateX(1.5rem);

}
.toggle-label{
    width: 4rem;
  height: 2rem;
  display: inline-block;
  background-color: wheat;
  position: relative;
  border-radius: 10rem;
}
.toggle-ball{
    width: 1.5rem;
    height: 1.5rem;
    border-radius:50%;
    display: inline-block;
    background-color:black;
    position:absolute;
    top: .3rem;
    left: .5rem;
}
#mode{
 display: flex;
 justify-content: center;
 align-items: center;
}
#dark{
    background-image: url(pexels-ryutaro-tsukata-5745761.jpg);background-attachment: fixed;background-size:cover; 
    color:black;
}
.dark-mode #dark{ 
    background-image:url(nick-nice-gPm8h3DS1s4-unsplash.jpg) ;
    background-color: black;
    img{
        background-color:gray;
    }
    p:hover{
        color: yellow;
        
    }
    color: white;
}
@media(max-width:700px){
    img{
        width: 80vw;
    }
    .navbar{
        flex-wrap: wrap;
        height: fit-content;
        /* background-image: url(pexels-ryutaro-tsukata-5745761.jpg); */
        /* background-size: cover; */
    }
   
    #section1{
        flex-direction: column;
        height: fit-content;
    }
    #section2{
        flex-direction: column;
        height: fit-content;
       
    }
    #section2c{
        flex-direction: column;
        height: fit-content;
    }
    #section3a{
        flex-direction: column;
        height: t-content;
    }
    #section4a{
        flex-direction: column;
        height: fit-content;
    }
    #section4b{
        flex-direction: column;
        height: fit-content;
    }
    #section5a{
        flex-direction: column;
        height: fit-content;
    }
    #section5b{
        flex-direction: column;
        height: fit-content;
    }
    #aboutme{
        height: 11.5rem;
    }
    #images{
       height: 10rem;
    }
    #edu{
        height:10rem;
    }
    #achievement{
        height: 10rem;
    }
    #skill{
        height: 10rem;
    }
    .achievements{
        width: 90vw;
        height: fit-content;
    }
    table{
        width: 100vw;
    }
    
}