html, body {
  color: #1d7015;
  font-family: "dg16", "unispace", "f25", "ont";
  overflow: hidden;
  height: 100%;
}

body {
  background-image: url("imgs/blue_plaid.jpg");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

@font-face {
  font-family: "dg16";
  src: url("fonts_post_29sep24/DotGothic16-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "mstw";
  src: url("fonts_post_29sep24/MonospaceTypewriter.ttf") format("truetype");
}

@font-face {
  font-family: "unispace";
  src: url("fonts_post_29sep24/unispace.bolditalic.otf") format("opentype");
}

@font-face {
  font-family: "ont";
  src: url("fonts_post_29sep24/OldNewspaperTypes.ttf") format("truetype");
}

::selection {
  color: #d64589;
  background: rgba(255, 177, 74, .5);
}

a:link, a:visited {
  color: #d64589;
  background: rgba(255, 177, 74, .5);
  text-decoration-style: wavy;
}

a:hover, a:active {
  color: #1d7015;
  background: rgba(255, 255, 255, .5);
  text-decoration-style: wavy;
}

ul {
  list-style-type: none;
}

ul li::before {
  content: "★";
}

.cake {
  position: absolute;
  width: 30vw;
  left: 5vw;
  height: 35vh;
  bottom: 0;
  z-index: 4;
  background-image: url("https://houseofme.neocities.org/imgs/cake2.gif");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.flame {
  position: absolute;
  width: 50vw;
  left: -5vw;
  height: 75vh;
  bottom: -20vh;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 179, 0, 0.3) 20%, rgba(255, 179, 0, 0) 60%);
  animation-name: flicker;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes flicker {
  0% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 15%, rgba(255, 179, 0, 0) 60%)}
  10% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 20%, rgba(255, 179, 0, 0) 60%)}
  20% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 10%, rgba(255, 179, 0, 0) 60%)}
  30% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 25%, rgba(255, 179, 0, 0) 60%)}
  40% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 35%, rgba(255, 179, 0, 0) 60%)}
  50% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 20%, rgba(255, 179, 0, 0) 60%)}
  60% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 10%, rgba(255, 179, 0, 0) 60%)}
  70% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 5%, rgba(255, 179, 0, 0) 60%)}
  80% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 15%, rgba(255, 179, 0, 0) 60%)}
  90% {background-image: radial-gradient(rgba(255, 179, 0, 0.3) 5%, rgba(255, 179, 0, 0) 60%)}
}

.text {
  position: absolute;
  width: 55vw;
  right: 5vw;
  height: 65vh;
  bottom: 30vh;
  z-index: 4;
  font-family: "dg16";
  overflow-y: scroll;
}

.music {
  position: absolute;
  width: 55vw;
  right: 5vw;
  height: 20vh;
  bottom: 10vh;
  z-index: 5;
  font-size: 2em;
}

.happy {
  position: absolute;
  width: 55vw;
  right: 5vw;
  height: 5vh;
  bottom: 5vh;
  z-index: 5;
  font-size: 2em;
}

/*
@keyframes float {
  0%   {top:0px;}
  50%  {top:200px;}
}
*/

@keyframes float {
  0%   {transform: translateY(-.5vh);}
  50%  {transform: translateY(.5vh);}
  100% {transform: translateY(-.5vh);}
}

.past, .present, .future {
  position: absolute;
  z-index: 4;
  color: rgba(255, 177, 74, .7);
  /*color: rgba(29, 112, 21, .3);*/
  /*background-image: linear-gradient(rgba(255, 239, 217, 0), rgba(255, 239, 217, 0), rgba(255, 239, 217, .2), rgba(255, 177, 74, .7));*/
  width: 30vw;
  height: 15vh;
  animation: float 2s infinite;
  left: 5vw;
  font-size: 5em;
  border-bottom: 6px solid rgba(214, 69, 137, .5);
}

.past {
  top: 5vh;
  font-family: "ont";
}

.present {
  top: 25vh;
  font-family: "mstw";
}

.future {
  top: 45vh;
  font-family: "unispace";
}

@keyframes select {
  0%   {transform: translateX(0); /*color: rgba(255, 177, 74, .7); color: rgba(29, 112, 21, .3) background-color: rgba(0, 0, 0, 1);*/ /*border-bottom: 6px solid rgba(84, 126, 186, .5);*/ color: rgba(255, 177, 74, .7);}
  100% {transform: translateX(1vw); color: rgba(29, 112, 21, .9); /*background-color: rgba(0, 0, 0, .2);*/ /*border-bottom: 6px solid rgba(158, 182, 255.9);*/}
}

.past:hover, .present:hover, .future:hover {
  animation: select 1s forwards;
}