@media screen and (orientation:portrait) {
  #map {
    height: calc(100vh - 18em);
    padding: 0;
    margin: 0;
  }

  div#top-bar {
    font-size: 1.6vh;
    left: auto;
    right: 0;
    transform: none;
    max-width: 85vw;
  }

  div#top-bar h1 {
    font-size: 2.6vh;
  }
  div#top-bar h3 {
    font-size: 1.6vh;
  }

  div#bottom-bar {
    height: calc(10em - 0.6em*2);
    width: calc(100vw - 1em*2);
    position: fixed;
    left: 0;

    bottom: 0;

    border-radius: 0;
    border: 1px solid darkgray;

    font-size: 1.8vh;
  }

  #time-adjust-div .timeskip-btn {
    font-size: 0.98em;
  }

  div#left-bar {
    min-height: auto;
    height: calc(8em);
    width: calc(100vw);
    position: fixed;


    bottom: 10em;
    top: auto;

    border-radius: 0;
    border: 1px solid darkgray;

    font-size: 1.8vh;
  }

  div.delete-cross {
    right: 44px;
  }

  div#notice {
    font-size: 1.8vh;
    max-width: 70vw;
    bottom: 31vh;
  }

  div#notice-remove-cross {
    font-size: 2.3vh;
  }

  img#img-balloon {
    width: 6vh;
    height: 6vh;
  }

  #time-slider {

  }
  #sim-length-select {
    font-size: 2vh;
  }
}