.note{
  height: 45dvh;
  width: 60vw;
  background-image: url(../assets/map.png);
  background-size: 100% 100%;
  padding: 8% 13%;
  line-height: 4vh;
  font-size: clamp(10px,2.4vh,40px);
  position: relative;
}

.note img{
  position: absolute;
  height: 15dvh;
  transition: all 0.3s;
}

.text{
  overflow: auto;
  height: 100%;
}

#twin{
  top: 0;
  left: -3vw;
  transform: rotate(-20deg);
}

#nasi{
  top: 5dvh;
  right: -2vw;
  transform: rotate(-20deg);
}

#durian{
  top: 18dvh;
  right: 1vw;
  transform: rotate(10deg);
}

#bunga{
  left: 0;
  bottom: 0;
  transform: rotate(30deg);
}

#tar{
  right: 0;
  bottom: -3dvh;
  transform: rotate(-30deg);
}

.wau-container {
  position: absolute;
  top: 30dvh;
  left: 2vw;
  width: 15dvh;
  height: 15dvh;
}

#wau {
  width: 100%;
  height: 100%;
  transform: rotate(20deg);
}

#twin:hover{
  scale: 2;
}

@keyframes flyAndReturn {
  0% {
    transform: translate(0, 0) rotate(20deg) scale(1);
  }
  30% {
    transform: translate(20vw, -15dvh) rotate(35deg) scale(1.1);
  }
  60% {
    transform: translate(40vw, -8dvh) rotate(10deg) scale(0.95);
  }
  80% {
    transform: translate(15vw, 5dvh) rotate(-15deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(20deg) scale(1);
  }
}

.wau-container:hover #wau {
  animation: flyAndReturn 2.5s ease-in-out forwards;
}

@keyframes rotate{
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(1090deg);
  }
}

#durian:hover{
  animation: rotate 2s;
}

/* mobile */
@media (max-aspect-ratio: 1/1) {
  .note{
    padding: 20% 13%;
    font-size: clamp(10px,2.7vw,40px);
    line-height: 4vw;
  }

  .note img{
    position: absolute;
    height: 20vw;
    transition: all 0.3s;
  }

  .wau-container {
    width: 20vw;
    height: 20vw;
    left: -10vw;
  }

  #nasi{
    right: -8vw;
  }

  #durian{
    right: -8vw;
    top: 28vw;
  }
}

/* tablet */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1.4/1) {

}