index.css

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap');
:root{
  --header-height:3rem;
  --font-semi:600;
}


:root{

 --first-color:#4070F4;
 --second-color:#0E2431;
}


:root{

 --body-font:"poppins",sans-serif;
 --big-font-size:2rem;
 --h2-font-size:1.25rem;
 --normal-font-size:0.938rem;
}

@media screen and (min-width: 768px) {
 :root{

     --big-font-size:3.5rem;
     --h2-font-size:2rem;
     --normal-font-size:1rem;
 }
}

:root{ 

 --mb-1:0.5rem;
 --mb-2:1rem;
 --mb-3:1.5rem;
 --mb-4:2rem;
 --mb-5:2.5rem;
 --mb-6:3rem;
}

:root{
 --z-back: -10;
 --z-normal:1;
 --z-tooltip:10;
 --z-fixed:100;
}

*,::before,::after{

 box-sizing: border-box;
}

html{
 scroll-behavior: smooth;
}

body{
 margin: var(--header-height) 0 0 0 ;
 font-family: var(--body-font);
 font-size: var(--normal-font-size);
 color:var(--second-color);
}

h1,h2,p{
 margin: 0;

}

a{
 text-decoration: none;
}

ul{
 margin: 0;
 padding: 0;
 list-style: none;
     
}

img{
 max-width: 100%;
 height: auto;
 display:block;

}

.section-title{
 position: relative;
 font-size: var(--h2-font-size);
 color:var(--first-color);
 margin-top: var(--mb-2);
 margin-bottom: var(--mb-4);
 text-align: center;
}

.section-title::after{
 position: absolute;
 content: "";
 width:64px;
 height: 0.18rem;
 left:0;
 right:0;
 margin:auto;
 top: 2rem;
 background-color: var(--first-color);


}

.section{
 padding-top: 3rem;
 padding-bottom: 2rem;
}


.bd-grid{

 max-width:1024px;
 display: grid;
 grid-template-columns: 100%;
 grid-column-gap:2rem ;
 width: calc(100% - 2rem);
 margin-left: var(--mb-2);
 margin-right: var(--mb-2);
}

.l-header{
 width: 100%;
 position: fixed;
 top:0;
 left:0;
 z-index: var(--z-fixed);
 background-color: #fff; 
 box-shadow: 0 1px 4px rgba(146,161,176,.15);
}


.nav{
 height:var(--header-height);
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-weight: var(--font-semi);

}

@media screen and (max-width:768px) {
 .nav__menu{
     position:fixed;
     top:var(--header-height);
     right: -100%;
     width:80%;
     height:100%;
     padding:2rem;
     background-color: var(--second-color);
     transition: .5s;


 }
}

.nav__item{
 margin-bottom: var(--mb-4);
}

.nav__link{
 position: relative;
 color:#fff;
}

.nav__link:hover{
 position: relative;
}

.nav__link:hover::after{
 position: absolute;
 content:"";
 width:100%;
 height:0.18rem;
 left:0;
 top:2rem;
 background-color: var(--first-color);
}

.nav__logo{
 color:var(--second-color)''
}
.nav__toggle{
  color:var(--second-color);
  font-size: 1.5rem;
  cursor:pointer;
}


.active::after{
 position: absolute;
 content:"";
 width:100%;
 height:0.18rem;
 left:0; 
 top:2rem;
 background-color: var(--first-color);
}

.show{
 right:0%;
}

.home{
 height:calc(100vh - 3rem);
 row-gap: 1rem;
}

.home__data{
 align-self: center;

}

.home__title{
 font-size: var(--big-font-size);
 margin-bottom: var(--mb-5);
}

.home__title-color{
 color:var(--first-color);
}

.home__social{
 display:flex;
 flex-direction: column;
}

.home__social-icon {
 width:max-content;
 margin-bottom: var(--mb-2);
 font-size:1.5rem;
 color:var(--second-color);
}

.home__social-icon:hover{
 color:var(--first-color);
}

.home__img{
 position: absolute;
 right:0;

 bottom:0;
 width: 295px;
}

.button{
 display: inline-block;
 background-color: var(--first-color);
 color:#fff;
 padding: .75rem 2.5rem;
 font-weight:var(--font-semi);
 border-radius: .5rem ;
 align-items: center;
}

.button:hover{
 box-shadow: 0 10px 36px rgba(0,0,0,.15);
}

.about__container{
 row-gap: 2rem;
 
}

.about__subtitle{
 margin-bottom: var(--mb-2);
 text-align: center;
}

.about__img{
 justify-self: center;
}

.about__text{
 text-align: center;
}

.about__img img{
 width: 200px;
 border-radius: .5rem;
}

.skills__container{
 row-gap: 2rem;
 text-align: center;
}

.skills__subtitle{
 margin-bottom: var(--mb-4);
}

.skills__text{
 margin-bottom: var(--mb-4);
}

.skills__data{
 display: flex;
 justify-content: space-between;
 align-items: center;
 position:relative;
 font-weight: var(--font-semi);
 padding: .5rem 1rem;
 margin-bottom: var(--mb-4);
 border-radius: .5rem;
 box-shadow: 0 4px 25px rgba(14, 36, 49, .15);
}

.skills__icon{
 font-size:2rem;
 margin-left: var(--mb-2);
 color:var(--first-color);
}

.skills__names{
 display:flex;
 align-items: center;
}

.skills__bar{
 position: absolute;
 left:0;
 bottom:0;
 background-color: var(--first-color);
 height: .25rem;
 border-radius: .5rem;
 z-index: var(--z-back);
}

.skills__html{
 width: 95%;
}

.skills__css{
 width: 80%;
}
.skills__js{
 width: 60%;
}

.skills__cpp{
 width: 75%;
}

.skills__react{
 width: 50%;
}

.skills__python{
 width: 50%;
}

.skills__img{
 border-radius: .5rem;
}

.work{
 text-align: center;
}

.work__container{
 row-gap: 2rem;
}

.work__img{
 box-shadow: 0 4px 25px rgba(14, 36, 49, .15);
 border-radius: .5rem;
 overflow:hidden;
}

.work__img img{ 
 transition: 1s;
 cursor:pointer;
}

.work__img img:hover{
 transform: scale(1.1);
}


.contact__input{
 width:100%;
 font-size: var(--normal-font-size);
 font-weight: var(--font-semi);
 padding: 1rem;
 border-radius: .5rem;
 border:1.5px solid var(--second-color);
 outline:none;
 margin-bottom: var(--mb-4);
}

.contact__button{
 display:block;
 border:none;
 outline:none;
 font-size:var(--normal-font-size);
 cursor:pointer;
 margin-left: auto;
}


.footer{
 background-color: var(--second-color);
 color: #fff;
 text-align: center;
 font-weight: var(--font-semi);
 padding: 2rem 0;
}

.footer__title{
 font-size: 2rem;
 margin-bottom: var(--mb-4);
}

.footer__social{
 margin-bottom: var(--mb-4);
}

.footer__icon{
 font-size: 1.5rem;
 color:#fff;
 margin: 0 var(--mb-2);
}


@media screen and (min-width:768px) {
 body{
     margin: 0;
 }

 .section{
     padding-top: 4rem;
     padding-bottom: 3rem;
 }
 .section-title{
     margin-bottom: var(--mb-6);
 }

 .section-title::after{
     width:80px;
     top:3rem;
 }

 .nav{
     height:calc(var(--header-height) + 1rem);
 }

 .nav__list{
     display:flex;
     padding-top: 0;
 }

 .nav__item{
     margin-left: var(--mb-6);
     margin-bottom:0 ;
 }

 .nav__toggle{
     display: none;
 }

 .home{
     height:100vh;
 }

 .home__data{
     align-self: flex-end;
 }
 .nav__link{
     color:var(--second-color)
 }

 .home__social{
     padding-top: 0;
     padding-bottom: 2.5rem;
     flex-direction: row;
     align-self: flex-end;
 }
 .home__social-icon{
     margin-bottom: 0;
     margin-right: var(--mb-4);
 }

 .home__img{
     width: 457px;
     bottom:5%; 
 }

 .about__container .skills__container{
     grid-template-columns: repeat(2, 1fr);
     justify-items: center;
     text-align: initial;
 }
 .about__img img{
     width:300px;
 }

 .work__container{
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2,1fr);
     column-gap: 2rem;
 }
 .contact__form{
     width: 360px;
 }

 .contact__container{
     justify-items: center;
 }
}

@media screen and (min-width:1024px){
 .bd-grid{
     margin-left: auto;
     margin-right: auto;
 }
 .home__img{
     right:10%
 }

}