@media only screen and (max-width: 1060px) {
  #info {
    height: 100%;
    width: 100%;
    max-width: 100%;
    right: -100%
  }
}

@media only screen and (max-width: 1000px) {

  #intro h1,
  #info h1 {
    font-size: 13vw;
  }

  #intro h2 {
    font-size: 4vw;
  }

  #intro h2:last-child {
    display: none;
  }

  header {
    padding: 0.5rem;
  }

  #key {
    bottom: 0.5rem;
    left: 0.5rem;
  }

  .story,
  #close-story {
    font-size: 4vh;
  }

  #close-story.active {
    top: 0.5rem;
    right: 0.5rem;
  }
}


@media only screen and (max-width: 600px) {
  #intro h2 {
    font-size: 1.25rem;
  }

  #info {
    font-size: 0.85rem;
  }

  #key {
    width: calc(100% - 1rem);
  }

  #key.hidden {
    left: -100%;
  }

  .scene {
    max-width: 100vw;
  }

  header {
    flex-direction: row-reverse;
  }
}

@media only screen and (max-width: 500px) {
  .feature-popup {
    min-width: calc(100vw - 7rem)!important;
    width: calc(100vw - 7rem)!important;
    max-width: calc(100vw - 7rem)!important;
  }

  .feature-info {
    font-size: 0.85rem!important;
  }
}