#sec1{
  margin-top: 10%;
  margin-bottom: 5%;
}


#biotabs{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1px;

  margin: 1rem;
  padding: 0.5rem;
  
  border-radius: 1.4rem;
  background-color: rgba(255, 255, 255, 0.511);
  box-shadow: 0 0 0.8rem black;
}

#biotabs input[type= 'radio']{
  display: none;
}

#biotabs input[type= 'radio']:checked + label + .biotext{
  display: block;
}


#biotabs label{

  font-family: 'Raleway', 'Arial', sans-serif;
  font-size: clamp(1rem, 2vh, 3rem);

  background-color: bisque;
  padding: 0.8rem;

  transition: background-color 0.2s;

  border-radius: 0.8rem;

  cursor: pointer;
}

#biotabs label:hover{
  background-color: rgba(211, 211, 211, 0.503);
}

#biotabs input[type= 'radio']:checked + label{
  background-color: aliceblue;
}

.bioimg{
  position: absolute;
  top: 3rem;
  right: 3rem;

  border: 0.2rem solid black;
  border-radius: 1.4rem;

  width: 13%;
  object-fit: cover;

  display: none;

  pointer-events: none;
}


#biotabs input[type= 'radio']:checked + label + div + .bioimg{
  display: block;
}

.biotext{
  order: 1;

  display: none;

  margin: 1%;
  padding: 2% 3%;

  border: 1px solid rgba(0, 0, 0, 0.493);
  border-radius: 1.4rem;

  box-shadow: 0 0 0.5rem inset rgb(211, 211, 211);
  background-color: antiquewhite;

  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: clamp(0.8rem, 2vh, 2rem);

  pointer-events: none;
  text-align: justify;
}

@media only screen and (max-width: 2000px) and (min-width: 1300px){

  #sec1{
    margin-top: 18%;
    
  }

}

@media only screen and (max-width: 1300px) and (min-width: 970px){

  #sec1{
    margin-top: 22%;
  }

  .biotext{

    font-size: clamp(0.6rem, 1.6vh, 1.8rem);
  }

  .bioimg{

    width: 16%;
  }
}

@media only screen and (max-width: 970px) and (min-width: 768px){

  h2{
    font-size: clamp(1.6rem, 1.8vh, 2.6rem);
  }
  #sec1{
    margin-top: 27%;
    
  }
  .biotext{

    font-size: clamp(0.4rem, 1.4vh, 1.6rem);
  }
  .bioimg{

    width: 20%;
  }
}

@media only screen and (max-width: 768px) and (min-width: 550px){
  #biotabs label{

    font-size: clamp(1rem, 1.5vh, 2rem);
  }
  h2{
    font-size: clamp(1.2rem, 1.6vh, 2.2rem);
  }
  #sec1{
    margin-top: 40%; 
  }
  .biotext{

    font-size: clamp(0.4rem, 1.4vh, 1.6rem);
  }
  .bioimg{

    width: 20%;
  }
}

@media only screen and (max-width: 550px) and (min-width: 370px){
  #biotabs label{

    font-size: clamp(1rem, 1.5vh, 2rem);
  }
  h2{
    font-size: clamp(1rem, 1.4vh, 2rem);
  }
  #sec1{
    margin-top: 60%; 
  }
  .biotext{

    font-size: clamp(0.4rem, 1.4vh, 1.6rem);
  }
  .bioimg{
    border: none;
    width: 0;
  }
}

@media only screen and (max-width: 370px){
  #biotabs label{

    font-size: clamp(0.8rem, 1.5vh, 1.7rem);
  }
  h2{
    font-size: clamp(0.7rem, 1vh, 1.4rem);
  }
  #sec1{
    margin-top: 70%;
    
  }
  .biotext{

    font-size: clamp(0.2rem, 1vh, 1rem);
  }
  .bioimg{
    border: none;
    width: 0;
  }
}