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

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

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

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

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

h1{
  font-family: Meglona;
  color: darkred;
  letter-spacing: 0.2rem;
  font-size: 70px;
  text-shadow: 
    0 0 6px antiquewhite, /*middle bright glow*/
    0 0 10px antiquewhite,
    0 0 20px antiquewhite,
    0 0 30px antiquewhite;
}

h2{
  font-family: NewRomantics;
  font-size: 72px;
}

h3{
  color: darkred;
  font-family: Meglona;
  font-size: 24px;
}

p{
  font-family: typewriter;
  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;
}
#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;
}

#review{
  padding-left: 100px;
  padding-right: 100px;
}

.fragReview{
  padding-bottom: 25px;
}