main.css

*{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    font-size:62.5%;
}
.container{
    color: black;
    display: flex;
    background-color:rgb(215, 214, 214);
}
.navbar{
    position:sticky; 
    background-color: rgb(146, 146, 146);
    font-size: 3rem;
    font-family: 'Times New Roman', Times, serif;
    /* height: 100; */
    width:20rem;
    transition: transform 0.3s ease-in;
}
.navbar-go{
    position: absolute;
    transform: translate(-33.8rem,0rem);
    height: 100%;
}
.img1{
    position: absolute;
    height: 3rem;
    width: 3rem;
    top:3rem;
    left:2rem;
    cursor: pointer;
}
.img2{
    position: absolute;
    height: 3rem;
    width: 3rem;
    top:3rem;
    /* left:17.9rem; */
    margin-left: -3.9rem;
    cursor: pointer;
}
.navbar ul{
    margin: 7rem 0rem;
    padding: 3.3rem 0rem 0rem 3rem;
}
.navbar ul li{
    list-style: none;
    margin: 6.2rem 0rem;
}
.navbar li a{
    color: black;
    text-decoration: none;
    margin:1rem 0rem;
}
.navbar li a:hover{
    color: #70ffed;
}
.about{
    overflow: auto;
    display:flex;
    flex-direction:column;
    color:aliceblue;
    border: 6px solid white;
    border-radius: .3rem;
    background-color: rgb(9, 2, 47);
    width: 100rem;
    height: 55.8rem;
    margin: auto 2rem;
    padding: 1rem;
    font-family: 'Merriweather', serif;
}
/* media queries */
/* all element css */
.all{
    background-color:rgb(191,198,198);
    height: 100%;
    width:100%;
}
/* about css */
.aboutme{
    font-size: 4rem;
    display:flex;
    flex-direction: column;
    /* padding: 1rem; */
    margin:auto;
}
.name{
    display: inline-block;
    margin:1rem;
    font-size: 6rem;
    text-align: center;
}
.dev{
    display: inline-block;
    font-size: 3rem;
    margin-left: 15rem;
}
.ava{
    padding: 0.5rem;
    margin: auto;
    height: 15rem;
    width: 15rem;
    cursor: pointer;
    transition: transform .2s;
}
.first{
    display:flex;
    padding:2rem;
    /* flex-wrap: wrap; */
    align-items: center;
    justify-content:center;
}
/* skills sec */
.head{
    font-size: 8rem;
    text-align: center;
    margin: 1rem;
    font-family: 'Merriweather', serif;
}
.head span{
    color: #70ffed;
}
.skillmain{
    background-color:rgb(9, 2, 47);
    width: 100rem;
    margin: 5rem auto;
    padding: 0.1rem;
    border: 0.6rem solid white;
    border-radius: 0.3rem;
    font-size:3rem;
    color: aliceblue;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.skillsec{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    height: 42.2rem;
    padding: 5rem;
    column-gap: 3.5rem;

}
.sname{
    display: flex;
    justify-content: space-between;
    margin:0.2rem;
}
.bar{
    width: 100%;
    position: relative;
    background-color: white;
    border-radius: 2.5rem;
    height:1.5rem;
    border:0.2rem solid black;
}
.s1 .bar span{
    background-color: #f90fff;
    width:50%;
    border-radius: 2.5rem;
    height: 100%;
    position: absolute;
}
.s1 .bar .html{
    width:90%;
    animation: html 4s;
}
@keyframes html {
    0%{
        width:0%;
    }
    100%{
        width:90%;
    }
}
.s1 .bar .css{
    width:85%;
    animation: css 4s;
}
@keyframes css {
    0%{
        width:0%;
    }
    100%{
        width:85%;
    }
}
.s1 .bar .js{
    width:80%;
    animation: js 4s;
}
@keyframes js {
    0%{
        width:0%;
    }
    100%{
        width:80%;
    }
}
.s1 .bar .reactjs{
    width:75%;
    animation: reactjs 4s;
}
@keyframes reactjs {
    0%{
        width:0%;
    }
    100%{
        width:75%;
    }
}
.s1 .bar .mongodb{
    width:70%;
    animation: mongodb 4s;
}
@keyframes mongodb {
    0%{
        width:0%;
    }
    100%{
        width:70%;
    }
}
.s1 .bar .c{
    width:75%;
    animation: c 4s;
}
@keyframes c {
    0%{
        width:0%;
    }
    100%{
        width:75%;
    }
}
.projects{
    background-color:rgb(9, 2, 47);
    width: 80%;
    margin: 20rem auto;
    padding: 0.1rem;
    font-size:3rem;
    color: aliceblue;
    border: 0.6rem solid white;
    border-radius:0.3rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.projects .heading{
    text-align: center;
    padding: 1rem;
    font-size: 8rem;
    font-family: 'Merriweather', serif;
}
.phead{
    font-size:4rem;
}
.p{
    display: flex;
    flex-direction:column;
    border: 0.2rem solid white;
    border-radius: 2rem;
    margin: 7rem;
    padding: 5rem;
}
.p span{
    font-size: 2rem;
}
.pimg{
    height: 20rem;
    width: 20rem;
    margin:3rem auto;
    transition: transform .2s;
}
.heading span{
    color: #70ffed;
}
.limg{
    width:80rem;
    height:5.5rem;
    background-color: rgb(9, 2, 47);
    border: 0.2rem solid white;
    border-radius: 4rem;
    padding: 0.8rem;
    margin:10rem auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.limg img{
    transition: transform .2s;
    height: 4rem;
    width:4rem;
    margin:auto 5rem;

}
img:hover{
    cursor: pointer;
    transform: scale(1.15);
}
.linkp a{
    display: inline-block;
    text-decoration: none;
    border:.3rem solid rgb(255, 255, 255);
    color: aliceblue;
    border-radius: 5rem;
    background-color: black;
    font-size: 1.2rem;
    margin: 5rem auto 0 auto;
    width: 18rem;
    height: 3rem;
    padding: .5rem;
    /* transition: tranform .2s; */
}
.linkp a:hover{
    cursor:pointer;
    /* transform: scale(1.15); */
    color: black;
    background-color: aliceblue;
    border-color: aliceblue;
}
/* media queries */
@media (max-width:1049px){
    html{
        font-size:50%;
    } 
}
@media (max-width:838px){
    /* .first{
        flex-direction: column;
        flex-wrap: wrap;
    } */
    html{
        font-size:45%;
    }
    .dev{
        display: inline-block;
    font-size: 3rem;
    margin-left: 8rem;
    }
    .name{
        font-size: 5rem;
    }
}
@media (max-width:757px){
    html{
        font-size:50%;
    } 
    .about{
        height:65.8rem;
    }
    .dev{
        font-size: 2rem;
        margin-left: 10rem;
    }
    .name{
        font-size: 4rem;
    }
    .skillmain{
        font-size: 2rem;
    }
}
@media (max-width:698px) {
    /* .about{
        width:46rem;
        height:55.8rem;
    }*/
    .dev{
        font-size: 1.5rem;
        margin-left: 8rem;
    }
    .name{
        font-size: 3rem;
    } 
}
@media (max-width:600px){
    html{
        font-size:35%;
    }
    .dev{
        font-size: 1.5rem;
        margin-left: 4rem;
    }
    .skillmain{
        font-size: 1.5rem;
    }
}
@media (max-width:538px){
    html{
        font-size:35%;
    }
    .dev{
        font-size: 1rem;
        margin-left: 4rem;
    } 
    .name{
        font-size: 2rem;
    }
}
@media (max-width:434px){
    html{
        font-size:35%;
    } 
}
@media (max-width:335px){
    html{
        font-size:30%;
    } 
}
@media (max-width:298px){
    html{
        font-size:25%;
    } 

}
@media (max-width:245px){
    html{
        font-size:20%;
    } 
}
@media (max-width:198px){
    html{
        font-size:15%;
    } 
}
@media (max-width:150px){
    html{
        font-size:10%;
    } 
}
@media (max-width:110px){
    html{
        font-size:5%;
    } 
}