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

  .weh {
    height: 44em;
  }

  .navi {
    right: -1.75em;
    top: 8.875em;
  }

  .navi2 {
    bottom: 7.875em;
    left: .25em;
  }

  .navi a {
    width: calc(150px - 20px);
    padding-right: 20px;
    height: 47px;
  }

  .side {
    position: absolute;
    left: 4em;
    top: 6.5em;
  }

  .iza {
    height: 250px;
    image-rendering: -webkit-optimize-contrast;
  }

  .side>.one {
    width: 100%;
  }

  .side>.one>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 5em;
    left: 12em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.one:hover .textbox {
    width: 150px;
    height: 75px;
    left: 18.5em;
    top: 1em;
    opacity: 1;
  }

  .side>.two {
    position: absolute;
    left: 14.5em;
    top: 7.5em;
    width: 100%;
  }

  .side>.two>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: initial;
    bottom: 2em;
    left: 3.5em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.two:hover .textbox {
    width: 150px;
    height: 75px;
    left: 2em;
    opacity: 1;
    bottom: -6em;
  }

  .side>.three {
    position: absolute;
    left: 3em;
    top: 16em;
    width: 100%;
  }

  .side>.three>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 8em;
    left: 8em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.three:hover .textbox {
    width: 150px;
    height: 75px;
    left: 13em;
    top: 10em;
    opacity: 1;
  }

  .textbox {
    z-index: 5;
    font-size: .875em;
  }

  .textbox p {
    margin: 0;
    height: 70px;
    overflow: auto;
  }

  .box {
    width: 50em;
    height: 27em;
    margin-left: 2em;
  }

  .ugh {
    left: 30%;
    bottom: 3em;
  }

  .ugh img {
    height: 200px;
    margin-right: 3.75em;
  }

  .psyche img {
    height: 270px;
  }

  #heartT {
    top: 17%;
    right: 25%;
  }

  #heartB {
    bottom: 17%;
    right: 25%;
  }

  .yaya img {
    height: 87%;
    right: 3.75em;
  }
  
}

@media screen and (max-height: 900px) and (min-width: 1400px) {

  body {
    margin: 0;
    padding: 0;
  }

  .weh {
    height: 40em;
  }

  .navi {
    right: 4em;
    top: 9em;
  }

  .navi a {
    width: calc(150px - 20px);
    height: 40px;
    margin-bottom: .875em;
    padding-right: 20px;
    font-size: .875em;
  }

  .navi2 {
    left: 3.5em;
    bottom: 8em;
  }

  .navi2 a {
    font-size: .875em;
    height: 40px;
  }

  .box {
    transform: scale(.85);
    height: 27em;
  }

  .side>.one>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 5em;
    left: 6em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.one:hover .textbox {
    width: 150px;
    height: 75px;
    left: 13em;
    top: 1em;
    opacity: 1;
  }

  .side>.two {
    position: absolute;
    left: 11em;
    top: 7.5em;
    width: 100%;
  }

  .side>.two>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 9.5em;
    left: 3.5em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.two:hover .textbox {
    width: 150px;
    height: 75px;
    left: 8em;
    opacity: 1;
  }

  .side>.three {
    position: absolute;
    left: 2.5em;
    top: 12.5em;
    width: 100%;
  }

  .side>.three>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 9em;
    left: 3.5em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.three:hover .textbox {
    width: 150px;
    height: 75px;
    left: 9em;
    top: 8em;
    opacity: 1;
  }

  .textbox {
    z-index: 5;
  }

  .textbox p {
    margin: 0;
    height: 70px;
    overflow: auto;
  }

  .ugh {
    left: 30%;
    bottom: 2.5em;
  }

  .ugh img {
    height: 150px;
    margin-right: 3.75em;
  }

  .psyche img {
    height: 200px;
  }

  .hearts {
    height: 13px;
    background-size: contain;
    width: 18em;
  }

  #heartT {
    top: 19%;
  }

  #heartB {
    bottom: 19%;
  }

  .yaya img {
    height: 85%;
  }
}

@media screen and (min-width: 3840px) {
  #welc {
    height: 200px;
    left: 25%;
    top: 15em;
  }

  #bottle {
    left: 32.5%;
    bottom: 30.25%;
  }

  .box {
    transform: scale(1.75);
  }

  .maphilighted {
    transform: scale(1.65);
    left: 13em;
    top: 25em;
  }

  .ugh {
    left: 33%;
    bottom: 10em;
  }

  .gallery img {
    image-rendering: -webkit-optimize-contrast;
  }

  .ugh img {
    margin-right: 7.5em;
    height: 340px;
  }

  .psyche img {
    height: 450px;
  }

  .hearts {
    height: 25px;
    background-size: cover;
    width: 25.5em;
  }

  #heartT {
    top: 28.5%;
  }

  #heartB {
    bottom: 29.75%;
  }
}