@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap');

*{
  margin:0; padding:0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /*text-transform: capitalize;*/
  outline: none; border:none;
  text-decoration: none;
  font-weight: normal;
}

*::selection{
  background:#22cbe6;
  color:#333;
}

html{
  font-size: 62.5%;
  overflow: hidden;
}

html::-webkit-scrollbar{
  width:1.4rem;
}

html::-webkit-scrollbar-track{
  background:#222;
}

html::-webkit-scrollbar-thumb{
  background:#22cbe6;
}

body{
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background:linear-gradient(rgba(184, 57, 57, 0.692), rgba(26, 26, 23, 0.521));
  padding:5.5rem;
}

section{
  padding:1rem 7%;
  min-height: 100%;
}

.btn{
  font-size: 2rem;
  padding:.7rem 4rem;
  background:rgba(54, 53, 53, 0.2);
  color:#fff;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
  margin-top: 1rem;
  cursor: pointer;
  transition:.2s linear;
}

.btn:hover{
  background:rgba(49, 48, 48, 0.397);
  color:#555;
}

.heading{
  font-size: 3rem;
  text-align: center;
  padding:1rem;
  color:#fff;

}

header{
  width:35rem;
  background:rgba(255,255,255,.2);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
  backdrop-filter: blur(.4rem);
  text-align: center;
  padding:1rem;
  border-radius: 3rem;
}

header .user{
  padding-top: 2rem;
}

header .user img{
  margin:1rem 0;
  height:15rem;
  width:15rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1rem rgba(255,255,255,.2);
}

header .user .name{
  font-size: 3rem;
  color:#fff;
  padding:.5rem 0;
}

header .user .post{
  font-size: 1.8rem;
  color:#eee;
  font-weight: lighter;
}

header .navbar{
  padding:1rem 3rem;
}

header .navbar ul li{
  margin:1rem 0;
  list-style: none;
}

header .navbar ul li a{
  display: block;
  padding:1rem;
  font-size: 2rem;
  color:#fff;
  background:rgba(255,255,255,.2);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
  border-radius: 1rem;
  transition: all .2s linear;
}

header .navbar ul li a:hover{
  background:rgba(255,255,255,.5);
  color:#555;
  transition: none;
}
.home .share{
  position: absolute;
  left:50%; bottom:5rem;
  transform: translateX(-50%);
  display: flex;
  padding:1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.1);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
  transition: .2s linear;
}

.home .share a{
  background: rgba(255,255,255,.2);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
  padding:1rem 2rem;
  margin:1rem;
  color:#fff;
  font-size: 5rem;
  border-radius: 1rem;
}

.home .share a:hover{
  background:rgba(255,255,255,.5);
  color:#555;
}

.container{
  height:55rem;
  width:80rem;
  background:rgba(218, 100, 100, 0.2);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
  backdrop-filter: blur(.4rem);
  border-radius: 3rem;
  overflow: hidden;
}

.home{
  display: flex;
  justify-content: center;
  flex-flow: column;
  position: relative;
  padding-bottom: 10rem;
}

.home .title{
  text-align: center;
  font-size: 2.5rem;
  color:#361111;
}
.home .name{
  text-align: center;
  font-size: 2.5rem;
  font-weight: lighter;
  color:beige;
  padding:2rem;
}

.home .post{
  text-align: center;
  font-size: 2.5rem;
  color: white;
  padding:0.5rem;
}


.about .heading{
  font-style: bold;
}

.about .heading span{
  color:#361111
}

.about .content h3{
  font-size: 2rem;
  font-style: italic;
  color:#eee;
  padding: 1rem 0;
}

.about .content h3 span{
  font-size: 2.2rem;
  font-style: bold;
  color: #361111;
  padding:1rem 0;
}

.education .heading{
  font-style: italic;
}

.education .heading span{
  color: #361111;
}

.education .box-container{
  display: flex; 
  justify-content: space-between;
  flex-wrap: wrap;
  padding:2rem 0;
}

.education .box-container .box{
  width:30rem;
  padding: 2rem;
  padding-bottom: 4rem;
  border-left: .2rem solid #eee;
}

.education .box-container .box .year{
  font-size: 2rem;
  color:rgb(109, 35, 35);
  position: relative;
}

.education .box-container .box .year::before{
  content:'';
  position: absolute;
  top:.3rem; left: -3.1rem;
  height:1rem;
  width:2rem;
  border-radius: 50%;
  background:rgb(109, 35, 35);
}

.education .box-container .box h3{
  font-style: italic;
  font-size: 1.5rem;
  color:#fff;
  padding-top: 1rem;
}

.education .box-container .box p{
  font-style: italic;
  font-size: 1.5rem;
  color:#eee;
  padding: 1rem 0;
}

.contact .heading span{
  color: #361111;
}

.contact .row{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.contact .row .content{
  flex:1 1 30rem;
  padding:5rem;
  padding-top: 10rem;
}

.contact .row .content .info h3{
  display: flex;
  align-items: center;
  font-size: 2rem;
  color:#eee;
  padding:1rem 0;
  font-weight: normal;
}

.contact .row .content .info h3 i{
  padding-right: 2rem;
  color:#22cbe6;
}

.footer{    
  background:rgba(179, 12, 12, 0.575);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
  backdrop-filter: blur(.4rem);
  text-align: center;
  padding:0.5rem;
  border-radius: 1rem;
  position: absolute;
  bottom: -25px;
  width: 92%;
  color: white;
  margin-bottom: 1%;
}

.footer span{
  color:var(rgb(233, 49, 49));
}
.footer a{
  color:rgb(255, 255, 255);
}