* {
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
}

.content {
  width: 30vw;
  margin: -15% 0 0 -15%;
  left: 50%;
  top: 50%;
  z-index: 1;
  position: fixed;
  overflow-x: hidden;
  transition: 0.5s;
  cursor: pointer;
  display: none;
}

img {
  width: 100%;
}
audio{
  width: 30em;
  height:10em;
}

#contentone {
  width: 18vw;
  background-color: rgb(249, 239, 145);
  margin: -10% 0 0 -10%;
  //cursor: default;
  cursor: ns-resize;
}

#legalpad {
  height: 35rem;
  padding: 2em;
  font-style: italic;
}

#barlegalpad {
  width: 100%;
  height: 5vh;
  background-color: rgb(114 58 41);
  top: 0;
  padding: 1.2em;
  box-shadow: 0em .5em #888888;
}
.xbutton{
  height: 1.2em;
  width: 1.2em;
  border-radius: 50%;
  background-color: rgb(242 93 90);
  border: none;
  cursor: pointer;

}

.content header {
  text-align: left;
  font-size: 2vw;
  //color: white;
  //color: darkgray;
  color: black;
  display: block;
  transition: 0.3s;
}

.content ul {
  text-align: left;
  font-size: 1.5vw;
  color: gray;
  margin-top:.5em;
}

.funeralli {
  padding-left: .5em;
}


.content a {
  text-decoration: none;
}

.content footer {
  text-align: left;
  font-size: .9vw;
  color: black;
  display: block;
  transition: 0.3s;
  padding-bottom: 2rem;
}

.footnote {
  text-decoration: none;
  font-size: 1vw;
}

#contentforty1{
  background-color: black;
  width: 24vw;
  height: 12vw;
  display: none;
}

#contentseventy3 {
  background-color: black;
  width: 24vw;
  height: 12vw;
  border-radius: 60%;
  box-shadow: 0em 0em 9em 10em goldenrod;
  margin: -8% 0 0 -12%;
}

#endTimer {
  text-align: center;
  font-family: 'DotGothic16', sans-serif;
  color: white;
  font-size: 2.5rem;
  font-weight: 500;
  align-content: center;
  margin-top: 1.7em;
}

#contentninety4{
  width: 50vw;
  height: 30rem;
  //border: 2px red solid;
  cursor: default;
  margin: -12% 0 0 -28%;
  align-content: center;
  overflow-x: scroll;
  overflow-y: scroll;
  padding-right: 3em;
}

#outfitpiccontainer{
  width: 20vw;
  height: 30rem;
  //border: 1px red solid;
  cursor: default;
  margin: 0 0 0 0%;
  position: fixed;
  z-index: 1;
  background-color: yellowgreen;
}
.outfitpics{
  display:none;
  position: absolute;
  max-width: 100%;
  cursor: pointer;
}
.outfitpics:hover {
  transform: scale(1.5);
  transition: 1s;
}
#dresscodepic{
  max-width: 47%;
  margin: -25% 0 0 25%;
}
#memyselfipic{
  max-width: 100%;
  margin: -4% 0 0 -3%;
}
#secondgradepicdaypic{
  margin: -7% 0 0 -3%;
}
#zipperedpantspic{
  border-radius: 10%;
  margin: -5% 0 0 1%;
  max-width: 90%;
}
#bowtiepic {
  max-width: 60%;
  margin: -26% 0 0 18%;
}
#thirdgradepicturedaypic{
  margin: -7% 0 0 -2%;
  max-width:97%;
}
#fourthgradeoutfitpic{
  max-width: 81%;
  margin: -21% 0 0 10%;
}
#fifthpicturedaypic{
  margin: -8% 0 0 0%;
  max-width: 94%;
}
#eightgradepicturedaypic{
  margin: -8% 0 0 -3%;
  max-width: 100%;
}
#sweatshirtjeanspic{
  max-width: 100%;
  margin: -14% 0 0 -6%;
}
#sweatshirtpjspic{
  margin: -23% 0 0 0%;
}
#conversepic{
  margin: 37% 0 0 6%;
  max-width: 80%
}
#prompic{
  max-width: 60%;
  margin: -25% 0 0 20%;
}
#alohashirtpic{
  margin: -24% 0 0 0;
  max-width: 99%;
}
#yellowoutfitpic{
  max-width: 82%;
  margin: -24% 0 0 4%;
}
#myclothespic{
  margin: -4% 0 0 -3%;
}
#myclothespic:hover {
  transform: scale(2);
  transition: 1s;
}
#sppantspic{
  margin: -13% 0 0 -4%;
}

.yearcontainer{
  z-index: -1;
  width: 20vw;
  height: 30rem;
  //border: 1px solid black;
  margin: 0 0 0 41%;
  position: absolute;
}

#nintey8TL{margin: 0 0 0 93%;}
#twothousandTL{margin: 0 0 0 145%;}
#twothousand02TL{margin: 0 0 0 197%;}
#twothousand0304TL{margin: 0 0 0 249%;}
#twothousand05TL{margin: 0 0 0 301%;}
#twothousand06TL{margin: 0 0 0 353%;}
#twothousand08TL{margin: 0 0 0 405%;}
#twothousand09-10TL{margin: 0 0 0 457%;}
#twothousand11-12TL{margin: 0 0 0 509%;}
#twothousand13TL{margin: 0 0 0 561%;}
#twothousand14-15TL{margin: 0 0 0 613%;}
#twothousand16TL{margin: 0 0 0 665%;}
#twothousand17-18TL{margin: 0 0 0 717%;}
#twothousand19TL{margin: 0 0 0 769%;}
#twothousand20TL{margin: 0 0 0% 821%;}
#twothousand21TL{margin: 0 0 10% 873%;}

.timelineli {
  font-size: 1.6rem;
  color: black;
}


#xbuttontimeline{
  margin:-1.5% 0 0 40%;
  position: fixed;
  z-index: 1;
}

#contentninety8 {
  margin: -20% 0 0 -15%;
}

.iphonepic {
  width: 70%;
}

#contentonehundred56 {
  width: 42vw;
  margin: -12% 0 0 -22%;
}

#waterripplevideo {
  width: 42vw;
  height: 48vh;
}

#xbuttonwater , #xbuttonhighfive{
  width:1.8em;
  height:1.8em;
}

#contentonehundred98, #contenttwohundred34b, #contenttwohundred34ab, #contentsixhundred8b, #contentsixhundred52 {
  width: 40vw;
  margin: -15% 0 0 -20%;
}

#contenttwohundred, #contentthreehundred2, #contentthreehundred30, #contentsixhundred8c, #contentsixhundred10, #contentsevenhundred5, #contentsevenhundred56, #contentsevenhundred69a, #contentsevenhundred69b, #contentsevenhundred69c, #contenteighthundred15 {
  margin: -20% 0 0 -15%;
}

.drawing2020pic {
  border-radius: 1.6em 20em;
}

#contenttwohundred17 {
  margin: -18% 0 0 -15%;
}

#contentonehundred96 {
  width: 40vw;
  margin: -28% 0 0 -20%;
}

.filmselfportraitpic {
  border-radius: 3%;
}


#contenttwohundred30 {
  width: 40vw;
  margin: -15% 0 0 -20%;
}

#contenttwohundred34b {
  display: none;
}

#contentthreehundred12 {
  width: 32vw;
  overflow-y: scroll;
  margin: -25% 0 0 -18%;
  cursor: ns-resize;
}

#sbcontainer {
  width: 32vw;
  height: 69rem;
  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
}

.spongebob1pic {
  margin-top: -15%;
  width: 120%;
}

.spongebob2pic {
  width: 100%;
  padding-top: 5em;
}

.spongebob3pic {
  width: 110%;
  padding-top: 20em;
}

.spongebob4pic {
  width: 100%;
  padding-top: 10em;
}

.spongebob5vid {
  padding-top: 20em;
}

.spongebob6pic {
  padding-top: 30em;
  width: 65%;
  padding-bottom: 60rem;
}

#contentthreehundred35 {
  width: 23vw;
  height: 80vh;
  margin: -20% 0 0 -15%;
}

#contentthreehundred54 {
  width: 40vw;
  margin: -10% 0 0 -20%;
}

#contentthreehundred69 {
  margin: -20% 0 0 -15%;
}

#contentthreehundred72 {
  width: 40vw;
  margin: -05% 0 0 -20%;
}

#contentthreehundred72 p {
  text-align: center;
  font-size: 2.5vw;
  letter-spacing: .1em;
  font-family: cursive;
  color: white;
}

#contentfourhundred24 {
  width: 42vw;
  margin: -12% 0 0 -22%;
}

#highfiveyoutube {
  width: 42vw;
  height: 48vh;
}

#contentfourhundred91 {
  margin: -22% 0 0 -10%;
}

#contentsixhundred8a {
  width: 20vw;
  margin: -15% 0 0 -05%;
}

#contentsixhundred61 {
  margin: -22% 0 0 -15%;
}

#download {
  width: 3em;
  height: 3em;
  background-color: red;
  border: none;
  z-index: -1;
  border-radius: 50%;
  margin-top: 1em;
  box-shadow: .4em .2em .7em white inset;
}

#arrow {
  border: solid white;
  border-width: 0 .3em .3em 0;
  display: inline-block;
  padding: .3em;
  transform: rotate(45deg);
}

#contentsevenhundred82 {
  margin: -22% 0 0 -15%;
}

#contenttwohundred34b:hover, #contentsevenhundred69a:hover, #contentsevenhundred69b:hover, #contentsevenhundred69c:hover{
  transform: scale(1.5);
  transition: 1.5s;

}


#contenteighthundred64 {
  margin: -12% 0 0 -15%;
}

@media screen and (max-width: 60em) {
  .content {
    width: 60vw;
    margin: -30% 0 0 -30%;
  }

  #contentone {
    width: 36vw;
    margin: -25% 0 0 -18%;
  }

  #legalpad {
    height: 28em;
    padding-botto: 2em;
    padding-left: 2.5em;
  }

  #barlegalpad {
    background-color: rgb(249, 239, 145);
    box-shadow: 0em 0em rgb(249, 239, 145);
  }

  #xbutton {
    height: 1.5em;
    width: 1.5em;
    margin-top: 1em;
    margin-left: 1em;
  }

  .content header {
    font-size: 3.8vw;
  }

  .content ul {
    font-size: 2.5vw;
    list-style-type: default;
  }

  .content footer {
    font-size: 1.8vw;
  }

  .footnote {
    font-size: 2vw;
  }

  #contentseventy3 {
    width: 44vw;
    height: 24vw;
    margin: -12% 0 0 -22%;
  }

  #endTimer {
    font-size: 3.5rem;
    margin-top: 2em;
  }

  #contentninety8 {
    margin: -30% 0 0 -30%;
  }

  .iphonepic {
    width: 50%;
  }

  #contentonehundred56 {
    width: 50vw;
    margin: -15% 0 0 -25%;
  }

  #waterripplevideo {
    width: 50vw;
    height: 38vh;
  }

  #contentonehundred98, #contenttwohundred34b, #contenttwohundred34ab, #contentsixhundred52 {
    width: 65vw;
    margin: -25% 0 0 -35%;
  }

  #contenttwohundred, #contentthreehundred2, #contentthreehundred30, #contentsixhundred8c, #contentsixhundred10, #contentsevenhundred56, #contentsevenhundred69a, #contentsevenhundred69b, #contentsevenhundred69c, #contenteighthundred15 {
    width: 50vw;
    margin: -33% 0 0 -25%;
  }

  #contenttwohundred17 {
    width: 50vw;
    margin: -32% 0 0 -25%;
  }

  #contentonehundred96{
    width: 60vw;
    margin: -40% 0 0 -30%;
  }

  #contenttwohundred30 {
    width: 65vw;
    margin: -22% 0 0 -32.5%;
  }

  #contentthreehundred12 {
    width: 52vw;
    margin: -35% 0 0 -26%;
  }

  #sbcontainer {
    width: 42vw;
    height: 75rem;
  }

  #contentthreehundred35 {
    width: 33rem;
    height: 59.5rem;
    //margin: -33% 0 0 -16.5%;
    margin: -40% 0 0 0;
  }

  #contentthreehundred54 {
    width: 65vw;
    margin: -18% 0 0 -32.5%;
  }

  #contentthreehundred69 {
    width: 50vw;
    margin: -34.5% 0 0 -25%;
  }

  #contentthreehundred72 {
    width: 70vw;
    margin: -05% 0 0 -35%;
  }

  #contentthreehundred72 p {
    font-size: 5vw;
  }

  #contentfourhundred24 {
    width: 50vw;
    margin: -15% 0 0 -25%;
  }

  #highfiveyoutube {
    width: 50vw;
    height: 38vh;
  }

  #contentfourhundred91 {
    width: 48vw;
    margin: -36% 0 0 -18%;
  }

  #contentsixhundred8a {
    width: 32.5vw;
    margin: -20% 0 0 -05%;
  }

  #contentsixhundred8b {
    width: 65vw;
    margin: -20% 0 0 -35%;
  }

  #contentsixhundred61 {
    width: 45vw;
    margin: -33% 0 0 -25%;
  }

  #contentsevenhundred5 {
    width: 50vw;
    margin: -26% 0 0 -25%;
  }

  #contentsevenhundred82 {
    width: 45vw;
    margin: -33% 0 0 -25%;
  }

  #contenteighthundred64 {
    margin: -25% 0 0 -30%;
  }
}

@media screen and (max-width: 26em) {

}