style.css

@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap);body,html{overflow-x:hidden}#menu,.btn{background:#333;cursor:pointer}#menu,header{z-index:1000}*,.education .box-container .box p>a{text-decoration:none}#menu,.top{position:fixed;right:2rem}:root{--yellow:#f9ca24}*{font-family:Nunito,sans-serif;margin:0;padding:0;box-sizing:border-box;outline:0;border:none;transition:.2s linear}::selection{background:var(--yellow);color:#333}html{font-size:62.5%}html::-webkit-scrollbar{width:1.4rem}html::-webkit-scrollbar-track{background:#222}html::-webkit-scrollbar-thumb{background:var(--yellow)}body{background:#111;padding-left:35rem}section{min-height:100vh;padding:1rem}.btn{padding:.7rem 3rem;color:#fff;margin-top:1rem;font-size:2rem;border-radius:5rem}.btn i{padding:0 .5rem;font-size:1.8rem}#menu,.home h3{font-size:2.5rem}.btn:hover,header .navbar ul li a:hover{background:var(--yellow)}.heading{text-align:center;margin:0 6rem;font-size:4rem;padding:1rem;border-bottom:.1rem solid #fff4;color:#fff}.heading span,.home h1 span{color:var(--yellow)}header{position:fixed;top:0;left:0;height:100%;width:35rem;background:#1a1a1a;display:flex;align-items:center;justify-content:center;flex-flow:column;text-align:center}header .user img{height:17rem;width:17rem;border-radius:50%;object-fit:cover;margin-bottom:1rem;border:.7rem solid var(--yellow)}header .user .name{font-size:3.5rem;color:#fff}header .user .post{font-size:2rem;color:#eee}header .navbar{width:100%}header .navbar ul{list-style:none;padding:1rem 3rem}header .navbar ul li a{display:block;padding:1rem;margin:1.5rem 0;background:#333;color:#fff;font-size:2rem;border-radius:5rem}#menu{top:2rem;color:#fff;padding:1rem 1.5rem;display:none}.home{display:flex;justify-content:center;flex-flow:column;padding:0 15rem}.home h3{color:#fff}.home h1{font-size:5rem;color:#fff}.about .row .info h3,.home p{font-size:2rem;padding:1rem 0}.home p{color:#eee}.about .row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:1rem 0}.about .row .info{flex:1 1 48rem;padding:2rem 1rem 2rem 6rem}.about .row .info h3{color:var(--yellow);font-weight:400}.about .row .info h3 span{color:#eee;padding:0 .5rem}.about .row .counter{flex:1 1 48rem;display:flex;justify-content:center;flex-wrap:wrap}.about .row .counter .box{width:20rem;background:#222;text-align:center;padding:2rem;margin:2rem}.about .row .counter .box span{font-size:4rem;color:var(--yellow)}.about .row .counter .box h3{font-size:2rem;color:#fff}.education .box-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem 0 1rem 3rem}.education .box-container .box{width:27rem;margin:4rem 1rem;padding-left:4rem;border-left:.2rem solid #fff;position:relative}.blog,.portfolio .box-container .box{height:20rem;width:26rem;border-radius:1rem;overflow:hidden;cursor:pointer}.education .box-container .box span{font-size:1.3rem;background:#222;color:#fff;border-radius:5rem;padding:.5rem 2.5rem}.education .box-container .box h3{font-size:2rem;color:#fff;padding-top:1.5rem}.education .box-container .box p{font-size:1.4rem;color:#eee;padding:1rem 0}.education .box-container .box i{position:absolute;top:-1.5rem;left:-2.5rem;height:5rem;width:5rem;border-radius:50%;line-height:5rem;text-align:center;font-size:2rem;color:#fff;background:var(--yellow)}.blog-container,.portfolio .box-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:2rem 0}.portfolio .box-container .box{margin:2rem}.blog img,.portfolio .box-container .box img{height:100%;width:100%;object-fit:cover}.portfolio .box-container .box:hover img{transform:scale(1.2)}.contact .row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.contact .row .content{flex:1 1 30rem;padding:4rem 4rem 0}.contact .row form{flex:1 1 45rem;padding:2rem;margin:2rem 2rem 4rem}.contact .row form .box{padding:1.5rem;margin:1rem 0;background:#908f8f33;color:#fff;text-transform:none;font-size:1.7rem;width:100%}.contact .row form .box::placeholder{text-transform:capitalize}.contact .row form .message{height:15rem;resize:none}.contact .row .content .title{text-transform:uppercase;color:#fff;font-size:3rem;padding-bottom:2rem}.contact .row .content .info h3{display:flex;align-items:center;font-size:2rem;color:#eee;padding:1rem 0;font-weight:400}.contact .row .content .info h3 i{padding-right:1rem;color:var(--yellow)}.top{bottom:7.5rem;z-index:100;display:none}@media (max-width:1200px){html{font-size:55%}.home{padding:1rem 4rem}}@media (max-width:991px){header{left:-120%}#menu{display:block}header.toggle{left:0}body{padding:0}}@media (max-width:768px){html{font-size:50%}}@media (max-width:400px){header{width:100vw}.heading{margin:0 3rem}.about .row .counter .box,.education .box-container .box,.portfolio .box-container .box{width:100%}.contact .row form{margin:3rem 0}}.blog{color:#fff;margin:2rem}