/* images */

img {
   position: absolute;
   mix-blend-mode: multiply;
}

img:nth-of-type(1) {
   /* outline: solid 1px red; */

   left: 14dvw;
   top: 8vh;
   max-width: 40dvw;
}

img:nth-of-type(2) {
   /* outline: solid 1px blue; */

   right: 7dvw;
   top: 23dvh;
   max-width: 15dvw;
}

img:nth-of-type(3) {
   /* outline: solid 1px green; */

   bottom: 5dvh;
   left: 35dvw;
   max-width: 15dvw;
}


/* img:nth-of-type(1):hover {
   animation: rotate 1s linear;
}

img:nth-of-type(2):hover {
   animation: shake 2s infinite linear;
} */


/* menu items */

.nav li {
   position: absolute;
}

.nav li:nth-of-type(1) {
   top: 10dvh;
   right: 14dvw;
}

.nav li:nth-of-type(2) {
   bottom: 16dvh;
   left: 11dvw;
}

.nav li:nth-of-type(3) {
   bottom: 27dvh;
   right: 23dvw;
}

.nav li:nth-of-type(4) {
   top: 30dvh;
   right: 35dvw;
}

.nav li:nth-of-type(5) {
   bottom: 7dvh;
   right: 5dvw;
}

.nav li:nth-of-type(6) {
   top: 3dvh;
   left: 3dvw;
}

/* spans */

.main span {
   position: absolute;
}

.main span:nth-of-type(1) {
   bottom: 35dvh;
   right: 3dvw;
}

.main span:nth-of-type(2) {
   bottom: 35dvh;
   left: 25dvw;
}

.main span:nth-of-type(3) {
   top: 55dvh;
   right: 30dvw;
}

.main span:nth-of-type(4) {
   bottom: 15dvh;
   right: 15dvw;
}


@media (max-width: 800px) {
   .nav ul li {
      display: block;
   }

   .nav {
      position: relative;
      z-index: 10;
   }

   .nav ul {
      height: 100dvh;
   }

   .nav ul li a {
      background: #fff;
      border-radius: 20px;
   }

   .hamburger {
      display: none;
   }

   img:nth-of-type(1) {
      /* outline: solid 1px red; */

      left: 4dvw;
      top: 10dvh;
      max-width: 60dvw;
   }

   img:nth-of-type(2) {
      /* outline: solid 1px blue; */

      right: 7dvw;
      top: 40dvh;
      max-width: 30dvw;
   }

   img:nth-of-type(3) {
      /* outline: solid 1px green; */

      bottom: 5dvh;
      left: 35dvw;
      max-width: 32dvw;
   }

   .nav li:nth-of-type(1) {
      top: 3dvh;
      right: 10dvw;
   }

   .nav li:nth-of-type(2) {
      bottom: 40dvh;
      left: 3dvw;
   }

   .nav li:nth-of-type(3) {
      bottom: 25dvh;
      right: 35dvw;
   }

   .nav li:nth-of-type(4) {
      top: 25dvh;
      right: 15dvw;
   }

   .nav li:nth-of-type(5) {
      bottom: 7dvh;
      right: 5dvw;
   }

   .nav li:nth-of-type(6) {
      top: 38dvh;
      left: 15dvw;
   }

   .main span:nth-of-type(1) {
      top: 5dvh;
      left: 8dvw;
   }

   .main span:nth-of-type(2) {
      top: 76dvh;
      left: 4dvw;
      word-break: break-all;
      width: 10ch;
   }

   .main span:nth-of-type(3) {
      top: 15dvh;
      right: 6dvw;
   }

   .main span:nth-of-type(4) {
      display: none;
   }
}