html{
  background-color:rgb(26, 26, 26) ;
  background-size: cover;
  background-attachment: fixed;
  scroll-behavior: smooth;
  font-family: 'Dosis', sans-serif;
}

.sidenav {
  height: 100%; 
  width: 13%; 
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: rgb(54, 54, 54);
  overflow-x: hidden;
  padding-top: 20px;
  padding-left: 1%;
  padding-right: 1%;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  font-size: 25px;
  color: #f5f5f5;
  display: block;
  background-color: #313131;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #b8b8b8;
  background-color: #1a1a1a;
}

.main {
  margin-left: 15%; 
}

body{
  text-align: center;
}

@keyframes blink{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}

hr{
  width: 50%;
}



.studies{
  display: grid;
  row-gap: 20px;
}

.blinking-div{
  animation: blink 2s linear infinite;
  display: inline-block;
}

.align-justify{
  text-align: justify;
}

.warning-img{
  width: 50px;
  height: 50px;
  float: left;
}

.warning-text{
  color: #cf5558;
  font-size: 40px;
  float: left;
  text-align: center;
  margin: auto;
  margin-left: 10px; 
}

#down-arrow a{
  color: white;
}

#down-arrow{
  margin-top: 9%;
}

.text{
  color: white;
}

a{
  text-decoration: none;
}

.header-intro-text{
  font-size: 30px;
  padding: 10px;
}

.project-card > img{
  width: 350px;
  height: 350px;
}

.project-title{
  font-size: 35px;
}

.project-desc{
  padding: 10px;
  color: white;
  font-size: 20px;
}

.project-img-grid{
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

.grid-2-col{
  display: grid;
  grid-template-columns: 50% 50%;
  margin-left: 23%;
  margin-right: 20%;
}

.project-img{
  width: 500px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.paragraphe{
  font-size: 20px;
  margin-left: 20%;
  margin-right: 20%;
}

.project-card > div{
  background-color: rgb(69, 116, 199);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}
.project-card > div:hover{
  background-color: rgb(54, 104, 160);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}
.title{
  font-size: 60px;
  margin-bottom: 50px;
}

.medium-title{
  font-size: 35px;
  margin-bottom: 50px;
}

#projects{
  text-align: center;
}

.project-grid{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-row-gap: 100px;
  padding: 0px;
}

.presentation-bg{
  margin-left: 30%;
  margin-right: 30%;
  background-color: rgb(69, 116, 199);
}

.presentation-button{
  margin-left: 35%;
  margin-right: 35%;
  background-color: rgb(54, 104, 160);
}

.header{
  height: 100vh; /*height to 100% of view height*/
  margin-top: 10vh;
  margin-bottom: 0; /*no bottom margin*/
}

.name-text{
  font-size: 70px;
  margin-top: 1px;
  margin-bottom: 10px;
}

.profile-img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.studies-logo{
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.studies-card{
  margin-left: 15%;
}

.studies-title{
  margin-left: 20px;
  margin-top: 35px;
  font-size: 25px;;
}

.float-left{
  float: left;
}

.logo-sources{
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

.sources-grid-2{
  display: grid;
  grid-template-columns: 50% 50%;
  margin-left: 40%;
  margin-right: 40%;;
}

.sources-grid-3{
  display: grid;
  grid-template-columns: 33% 33% 33%;
  margin-left: 30%;
  margin-right: 30%;;
}

.social-links{
  display: grid;
  grid-template-columns: 33% 34% 33%;
  margin-left: 35%;
  margin-right: 35%;
}

.logo-socials{
  border-radius: 50%;
  width: 50px;
  height: 50px;
}