@font-face {
  font-family: grapesoda;
  src: url(grapesoda.ttf) format("truetype");
}

/*for when i use mandarin*/
@font-face {
  font-family: zpix;
  src: url(zpix.ttf) format("truetype");
}

@font-face {
  font-family: tamzen;
  src: url(tamzen.ttf) format("truetype");
}

body {
  background-image: url(galaxy.png);
  background-size: 50vw;
  font-family: grapesoda, zpix;
  font-size: 2em;
  text-align: center;
  color: white;
  overflow-x: hidden;
  /*nice and crunchy*/
  -webkit-font-smoothing: none;
  -moz-font-smoothing: greyscale;
  image-rendering: pixelated;
}

ul > hr, details > hr {
  margin: 0;
  border-color: black;
  background-color: black;
}
:not(ul, details) > hr {
  height: 3px;
  border-width: 0;
  background-color: white;
}

/*we don't care if they've visited the link*/
a:link[href="#"], a:visited[href="#"] {
  color: black;
  text-decoration-line: none;
}
a:link, a:visited {
  color: lightgreen;
}
a:hover {
  color: yellow;
}
a:active {
  color: hotpink;
}

.scene {
  width: 100%;
  height: 70vw;
  transform: scale(0.75) translateY(-12vw);
}

.object, .static {
  position: absolute;
}

.static {
  pointer-events: none;
}

.back {
  position: absolute;
  top: 1vw;
  left: 1vw;
  width: 10vw;
  z-index: 2;
}

/*thank you so much ribose for this setup*/
.rotate:hover img, .rotate:focus img {
  transform: rotate(5deg);
}
.appear img {
  opacity: 0;
}
.rotate:hover .text, .rotate:focus .text, .appear:hover .text, .appear:focus .text, .appear:hover img, .appear:focus img, a:hover .text, a:focus .text {
  opacity: 1;
}

.text {
  font-size: 5vw;
  opacity: 0;
  position: absolute;
  color: white;
  pointer-events: none;
  z-index: 1;
}

/*i want stuff to be indexable*/
.hidden {
  display: none;
}