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

.home-header {
  padding-bottom: 30px;
  padding-top: 30px;

  width: 100%;
  max-height: 500px;
  min-height: 200px;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;

}

.profile-pic{
  display: flex;
  justify-content: center;
  align-items: center;

  width: max(33%, 265px);
}

.picture-case{
  display: flex;
  justify-content: center;
  align-items: center;

  max-height: 325px;

  height: 90%;
  width: 100%;

}

.picture{
  pointer-events: none;

  border-radius: 50%;
  border: 4px solid rgb(92, 92, 92);

  width: 90%;
  max-width: 325px;
  max-height: 325px;
}

.name-and-title{
  width: 60%;

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

}

.name{
  pointer-events: none;

  height: 80%;

  min-width: 100%;

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

.first{
  height: 42%;
  margin-left: -20%;
}

.last{
  height: 58%;
  margin-right: -20%;
}

.title{
  height: 20%;
  width: 75vw;

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

.title-text{
  font-family: 'Roboto Flex', sans-serif;
  font-size: min(max(19px,2vw), 150%);
  color: rgb(92, 92, 92);
}

.bio {
  margin-top: 10px;

  height: auto;
  width: 100%;

  display: flex;
  justify-content: center;

}
.bio-frame {
  width: max(75%, 300px);
  font-family: 'Roboto Flex', sans-serif;
  font-size: 17px;
  text-align: justify;
}