* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin:0;
}

:root {
  --primary: #353535;
  --secondary: #3c6e71;
  --accent: rgb(186, 223, 215);
} 

body{
  font-family: 'Syne Mono', monospace;
  background-image: url('https://images.unsplash.com/photo-1519817914152-22d216bb9170?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1665&q=80');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  height: 100vh;
}

h1{
  font-size: 3rem;
  padding: 1rem;
  font-weight: bold;
  color:#fff;
}

h2{
  font-size:1.5rem;
  font-weight: 500;
}

.whiteColor{
  color: #fff;
}

.boldText{
  font-weight: bold;
  text-decoration: underline;
}

h3{
  font-size: 1.3rem;
  font-weight: bold;
}



.bigLogo{
  width: 2.5rem;
  background-color:#fff;
  border-radius: 50%;
}

.smallLogo{
  width: 1.5rem;
  background-color:#fff;
  border-radius: 50%;
}

 a{
  text-decoration: none;
  font-weight: bold;
  color: black;
 }

 a:hover{
   cursor: pointer;
   color: rgb(241, 187, 75);
 }

/*Style for the profile info section*/
.profile-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:1rem;
  margin-bottom: 2rem;
}

.flexCont{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom:1rem;
  }

.titles{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-pic{
  width:250px;
  border-radius: 50%;
  filter: grayscale(100%);
  margin-top: 1rem;
  
}


/*Style for the project section*/
.projects{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.project-card{
 width:80%;
 max-width: 500px;
 height: auto;
 background-color: #fff;
 opacity: 0.7;
 display:flex;
 flex-direction: column;
 margin: 1rem;
 padding: 1rem;
 gap: 0.5rem;
}

main{
  margin: 3rem 0;
}

/*Styling the chart*/
.chart{
  width: 250px;
  padding:none;
  margin-top: 0.5rem;
}

/*Hiding the commits and comments as default*/
.comments{
  display: none;
}

/*footer styling*/
footer{
  height: 200px;
  background-color: #292b2d;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

 button{
  width: fit-content;
  display: flex;
  align-items: center;
  margin-top: 1rem;
  font-family: 'Syne Mono', monospace;
  gap:0.5rem;
 }

 button:hover{
   cursor: pointer;
 }

 .languagebox{
  background-color: black;
  color: #fff;
  padding:0 0.1rem;
  border-radius: 1rem;
 }

 @media (max-width:667px) {
   .bigLogo{
     display: none;
   }
   h1{
     font-size: 2rem;
   }
   h2, h3{
     font-size: 1.1rem;
   }
 }