body {
  background-image: url("images/autumn-pic-dither.jpg");
  color: saddlebrown;
  cursor: url("/images/candle-cursor.gif"), auto;
  overflow-x: hidden;
  background-attachment: fixed;
}

@font-face{
  font-family: Typewriter;
  src: url(fonts/typewriter.ttf);
}

@font-face{
  font-family: Costura;
  src: url(fonts/costura_bold.otf);
}

@font-face{
  font-family: HangedLetters;
  src: url(fonts/HangedLetters.ttf);
}

@font-face{
  font-family: Meglona;
  src: url(fonts/Meglona.ttf);
}

@font-face{
  font-family: MorningTea;
  src: url(fonts/MorningTea.ttf);
}

@font-face{
  font-family: NewRomantics;
  src: url(fonts/NewRomantics.ttf);
}

@font-face{
  font-family: StringLetters;
  src: url(fonts/PartyLettersOnaRope.otf);
}

@font-face{
  font-family: SwirlyCurly;
  src: url(fonts/Swirlycurly.ttf);
}

@font-face{
  font-family: WhatsHappened;
  src: url(fonts/WhatsHappened.ttf);
}

@font-face{
  font-family: test;
  src: url(fonts/Punk_Typewriter.otf);
}

#contentframe{
  text-align: center;
  border: 20px solid transparent;
  background-color: #0F0800;
  border-image: url(images/frame1-dither.png) 18 round;
  width: 46vw;
  position: absolute;
  margin-top: 10vw;
  margin-left: 25vw;
  padding-top: 4vw;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 25px;
}

h1{
  color: saddlebrown;
  font-family: WhatsHappened;
  font-size: 70px;
}

h2{
  font-size: 65px;
  font-family: WhatsHappened;
}

h3{
  font-family: NewRomantics;
  font-size: 34px;
  letter-spacing: 6px;
}

p{
  font-family: Typewriter;
  color: saddlebrown;
  font-size: 20px;
}

#playPauseBtn {
  background-color: antiquewhite;
  color: black;;
  border: 20px solid transparent;
  border-image: url(images/frame2-dither.png) 21 round;
  background-clip: padding-box;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  font-family: Typewriter;
  position: absolute;
  font-size: 1.6em;
  left: 7vw;
  top: 20vw;
}
#playPauseBtn:hover {
  rotate: 2deg;
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
}
.imgtxt span {
  font-family: Meglona;
  text-align: center;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
  rotate: 2deg;
}

#lightsheader{
  background-image: url(/images/lights-smaller-dither.png);
  position: absolute;
  top: -1vw;
  background-repeat: repeat-x;
  width: 99.6vw;
}

.divider{
  max-width: 50vw;
}

.notes{
  display: block;
}

.notepic{
  width: 6vw;
}

#review{
  margin: 30px;
}

#sweater{
  position: absolute;
  top: 35vw;
  left: 9vw;
  rotate: -6deg;
}

#hotchoc{
  position: absolute;
  top: 58vw;
  left: 64vw;
  rotate: 12deg;
  width: 20vw;
}

#pumpkin{
  position: absolute;
  top: 19vw;
  left: 63vw;
  rotate: 12deg;
}

#candle{
  position: absolute;
  top: 87vw;
  rotate: -10deg;
  left: 10vw;
}

#tree{
  position: absolute;
  top: 100vw;
  left: 77vw;
}