.main{
  width:80%;
  margin:auto;
}

.bio1{
  padding:4px;
  width:100%
}
.bio2{
  width:40%;
  padding:4px;
  border-left: rgb(221, 220, 220) solid 2px;
  text-align: center;
}

ul{
  display:block;
  padding:0;
}
li {
  display: inline;
  margin:auto;
  padding:5px;
  text-decoration: none;  
  border: dotted 1px;

} 
iframe {
  border:none;
  width:100%;
  height:300px;
}
.contain{
  height:300px;
    overflow-y: scroll;}
.card {
  margin: auto;
  transform: rotate(15deg);
  padding:10px;
  transition: all .2s ease-in-out;
  position:fixed;
  bottom: 7%;
  right:4%;
  max-height: 30%;
}
.card:hover { 
  transform:  rotate(10deg) scale(1.1); 
  }

.pagedoll {
    margin: auto;
    position:fixed;
    left: 2px;
    bottom: 3px;
    width:20%;
    z-index: 1;
 
  }
.wr{
  height: fit-content;
  width:30%
}
  @media (max-width: 600px) {
  .flexcontainer {
       flex-direction: column;
     }
    .bio2{
      width:100%;
      border:none;
      border-top: rgb(221, 220, 220) solid 2px;;
      padding-top:20px
    }
   .main{
    width:100%;
   }
    .card {
      position:absolute      ;
      float:none;
      margin:auto;
      top: auto;
      left:50%;
      right:50%;
      bottom: auto;
      right: auto;
      width:auto;
      height:600px;
    }
  .pagedoll{
    width: 200px;
  }
  .wr{
    width:100%;

  }
    }