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

  .weh {
    height: 44em;
  }

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

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

  .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: 180px;
    height: 85px;
    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: 200px;
    height: 100px;
    left: 13em;
    top: 9em;
    opacity: 1;
  }

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

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

  .box {
    margin-left: 2em;
    margin-top: -9em;
  }

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

  .ugh img {
    height: 200px;
  }

  .psyche img {
    height: 270px;
  }


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

}

/* @media screen and (max-height: 1300px) and (max-width: 2200px) {

  .side {
    top: 11em;
  }

 .weh {
  height: 54em;
 }

 .navi {
  top: 12.5em;
 }

 .navi2 {
  bottom: 11.5em;
 }

 .ugh {
  bottom: 5.5em;
 }
} */

@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 {
    height: 340px;
  }

  .psyche img {
    height: 450px;
  }

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

  #heartT {
    top: 28.5%;
  }

  #heartB {
    bottom: 29.75%;
  }
}

@media only screen and (hover: none) and (pointer: coarse) {

  .box {
    width: 24em;
    height: 32em;
    margin-left: -.25em;
    margin-top: 0em;
  }

  .okay {
    flex-direction: column;
    gap: 1em;
  }

  .okay>.half1 {
    width: 90%;
    height: 33%;
    margin-top: .5em;
  }

  .okay>.half2 {
    width: 95%;
    height: 67%;
  }

  #wife {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: 40% 30%;
  }

  .gallery {
    margin-top: 1.5em;
  }

  .link {
    width: 75px;
    height: 75px;
  }

  .ugh {
    left: .75em;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    bottom: 1.25em;
    /* flex-direction: column; */
  }

  .ugh img {
    height: 130px;
  }

  .ugh img:nth-child(2n) {
    top: -1em;
  }

  .yaya,
  .psyche {
    display: none;
  }

  .side {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    left: 1em;
    top: 3.75em;
  }

  .side img {
    height: 180px;
    max-width: none;
  }

  .side > .one:hover > .textbox {
    top: unset;
    bottom: -7em;
    left: 1em;
    height: 95px;
  }
  

  .side>.two {
    position: relative;
    top: 0;
    left: 0;
  }
  
  .side > .two:hover > .textbox {
    top: unset;
    bottom: -7em;
    left: -2.75em;
    height: 95px;
  }

  .side>.three {
    position: relative;
    top: 0;
    left: 0;
  }


  .side > .three:hover > .textbox {
    top: unset;
    bottom: -12.5em;
    left: -5em;
    height: 170px;
  }



}

@media only screen and (hover: none) and (pointer: coarse) and (max-height: 900px) {

  .box {
    height: 20em;
    width: 20em;
    margin-top: 1em;
  }

  .okay>.half2 {
    overflow: auto;
  }

  .side {
    top: 1em;
    left: 1.5em;
  }

  .side img {
    height: 140px;
  }

  .side > .three:hover > .textbox {
    top: unset;
    bottom: -12.5em;
    left: -6.75em;
    height: 170px;
  }

  .top p {
    font-size: .875em;
  }

  .buttons {
    margin-top: 1em;
  }


  .ugh {
    gap: .75em;
    z-index: 2;
    left: 1.5em;
  }

  .ugh img {
    height: 100px;
  }

}