html { 
  background-image: url('../images/Layoutbio.jpg'); 
  background-size:cover; 
  background-position-y: -11vw;
  background-position-x: center;
  background-color:#f5eede;
  background-repeat:no-repeat;
}
img { position:relative; }

main, footer, navigation {
  width: 90vw;
  max-width:815px;
}

main { 
  margin: 5vh auto 0 auto;
  position:relative;
}

main.tall, .leftsidetall {
  max-height: 700px;
  height: 55vw;
}

main.short, .leftside {
  max-height: 630px;
  height: 50vw;
}

.leftsidetall { background-position-y:top; }
.leftside { background-position-y:bottom; }

.leftside, .leftsidetall { 
  width: 55%; 
  text-align:right;
  background-position-x:right;
  background-repeat:no-repeat;
  background-size:contain;
  animation-name: wipe;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}
.rightside, .rightsidetall { 
  width:44%; 
  max-height: 500px;
  height: 35vw;
}

.rightsidetall {
  max-height: 600px;
  height: 45vw;
}

.rightside img, .rightsidetall img {  
  border: clamp(7px, 1vw, 15px) solid;
  border-image: url("../images/smallerborder.jpg") 50;
  padding:0 clamp(14px, 2.23vw, 30px);
  background-color: #fbf6ea;
  width:70%;
  display:inline-block;
}

.rightside, .rightside p, .rightsidetall, .rightsidetall p { text-align:center; }
.rightside p, .rightsidetall p { font-weight:bold; }
.leftside, .rightside, .leftsidetall, .rightsidetall { display:inline-block; }

.scrolldescription, .scrolldescription p {
  font-weight:unset;
  text-align:left;
}
.scrolldescription {
  overflow-y: scroll;
  height:50%;
  padding: 0 0.5vw;
}
.scrolldescription p { margin-top:0; }

hr.rainbowfull {
  min-height:unset;
  height:0.5vw;
  max-height:7px;
}

footer, navigation {
  margin:0 auto;
  text-align:center;
  display: block;
  position: relative;
}

footer { 
  height:clamp(1px, 15vw, 150px); 
  left: clamp(1px, 3vw, 25px);
  margin-top:2.23vw;
}

footer img { 
  max-height:100%; 
  display:inline;
  vertical-align:middle;
}

img.record { height:70%; }
img.housebig { max-height:110%; }

.audioclip {
  display: inline-block;
  width: 43vw;
  margin:0 1vw;
  max-width: 380px;
  vertical-align:middle;
  font-style:italic;
}

navigation { top: clamp(-15px, -1vw, -1px); }

.gobackpaintbrush {
  background-image: url('../images/Go+back.gif'), url('../images/ButtonBlank.png');
  background-size: 60% 60%, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: clamp(55px, 8vw, 80px);
  width: clamp(177px, 25vw, 254px);
  background-blend-mode: multiply, normal;
  filter: contrast(1.13);
  margin:0 auto;
  display:inline-block;
}

@media (max-width: 1000px) {
main.tall, .leftsidetall {
  max-height: 800px;
  height: 65vw;
}
main.short, .leftside {
  max-height: 700px;
  height: 55vw;
}
footer { margin-top:3vh; }
.audioclip { 
  overflow-y:auto; 
  overflow-x:hidden;
  height:100%;
}
}