h2 {
  color: white;
}

.title {
  font-size: calc(1.5vw + 1.5vh);
  font-weight: 400;
  color: white;
  font-family: Orbitron;
  text-align: justify;
  margin-left: 20px;
}

footer {
  color: white;
}

body {
  background-size: cover;
  background-position: center;
}

.container {
  width: 100vw;
  height: 100vh;
}

nav a:link,
nav a:visited {
  color: #ffffff;
  text-decoration: none;
}

a span.imagined,
a:hover span.real {
  display: inline;
}

a:hover span.imagined,
a span.real {
  display: none;
}
/* index-specific */
/* -------------------------------------------- */
.exit-button{
  width: var(--pd);
  display: inline-block
}
.exit-button a:link,
.exit-button a:visited {
    font-size: calc(1.5vw + 1.5vh);
    color: white;
    font-family: MajorMono;
    position:fixed;
    bottom: 0;
    right: 0;
    padding: var(--pd);
    opacity: 0.7;
}
.positionable {
    font-size: calc(1vw + 1vh);
    color: rgb(202, 202, 202);
    font-family: MajorMono;
    position:fixed;
    bottom: 0;
    right: 30%;
    padding: var(--pd);
    opacity: 0.6;
}
#mobile {
    display: none;
}

@media only screen and (max-width: 500px) {
    #mobile {
        display: block;
    }
    #desktop {
      display: none;
    }
}
@media all and (max-width:800px)
  {
    .exit-button {
      width: 50vw;
      height: 10vh;
      bottom: 5%;
      right: 25%;
      z-index: 999;
    }
    .positionable {
      position: fixed;
      width: 100%;
      bottom: 10%;
      left: 0%;
      font-size: calc(2vw + 2vh);
      opacity: 0.8;
    }
  }
/* -------------------------------------------- */

@media all and (max-width:800px) {
  .title {
    margin: 0;
    text-align: left;
    font-size: calc(5vw + 5vh);
  }

  nav a:link,
  nav a:visited {
    text-shadow: 2px 2px 2px black;
  }

  .rotate {
    display: block;
  }

  .hidden-on-mobile {
    display: none;
  }
}