/** Fonts **/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');

.projects-page{


  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  padding: 25px 0px;
}

.projects{

  width: 85%;

}

.one-project{
  background-color: rgba(54, 150, 179, 0.20);

  border:5px solid rgba(31, 90, 108, 0.8);
  border-radius: 50px;

  width: 100%-20px;
  min-height: 250px;

  margin: 20px 0px;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-evenly;
}

.project-image{
  /* background-color: rgb(218, 255, 185); */
  width: 20%;
  min-width: 200px;
  min-height: 200px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50px;

  margin: 10px 0px;

}

.content-image{
  /* background-color: rgb(185, 255, 236); */

  display: flex;
  flex-direction: row;
  align-items: left;

}

.project-body{
  /* background-color: rgb(185, 255, 236); */


  min-width: 70%;
  max-width: 75%;

}

.project-title{
  /* background-color: rgb(185, 228, 255); */

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Roboto Flex', sans-serif;
  font-size: 250%;

  margin: 15px 0px;

  text-align: center;

}

.project-description{
  /* background-color: rgb(230, 223, 255); */
  width: 90%;

  font-family: 'Roboto Flex', sans-serif;
  font-size: 95%;

  text-align: justify;

}

.project-box{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;

}

.sigcse21-pic{
  max-height: 200px;

  border-radius: 50%;

  border:5px solid rgba(54, 150, 179, 0.50);
}

.sigcse23-pic{
  max-height: 200px;

  border-radius: 50%;

  border:5px solid rgba(237,28,36, 0.5);
}

.youtube-preview{
  display: block;
  
  width: auto;
  height: auto;

  max-height: 250px;
  max-width: 100%;

  margin: 0px 0px 15px 20px;

  transition: transform .1s;
}

.youtube-preview:hover {
  transform: scale(1.05);
}

.paragraph-text{
  font-family: 'Roboto Flex', sans-serif;
  font-size: min(4vw,95%);
}

.hyperlink, .hyperlink:focus, .hyperlink:active{
  color: rgb(0, 26, 255);
  text-decoration-color: rgb(0, 26, 255);
  text-decoration: underline;
}

.hyperlink:hover{
  text-decoration: underline;
  text-decoration-color: rgb(200, 96, 189);
  color: rgb(200, 96, 189);
}