body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      background: radial-gradient(circle, rgba(255,252,0,1) 0%, rgba(240,237,23,1) 100%);
      font-family: 'Luckiest Guy', cursive;
      display: flex;
      flex-direction: column;
    }
    
    #map {
      width: 100vw;
      height: 60vh;
      z-index: 1;
    }
    
    #poem-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      text-align: center;
    }
    
    .haiku-line {
      margin: 0;
      font-size: 3em;
      padding: 0;
      color: white;
      text-shadow: 
        0 0.1em 20px rgba(0, 0, 0, 1), 
        0.05em -0.03em 0 rgba(0, 0, 0, 1),
        0.05em 0.005em 0 rgba(0, 0, 0, 1), 
        0em 0.08em 0 rgba(0, 0, 0, 1),
        0.05em 0.08em 0 rgba(0, 0, 0, 1), 
        0px -0.03em 0 rgba(0, 0, 0, 1),
        -0.03em -0.03em 0 rgba(0, 0, 0, 1), 
        -0.03em 0.08em 0 rgba(0, 0, 0, 1), 
        -0.03em 0 0 rgba(0, 0, 0, 1);
      transform: scale(0.95);
      display: inline-block;
      line-height: 1.2;
    }
    
    .haiku-line:nth-child(1) {
  animation: bop 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards infinite alternate; /* Slower and smoother easing */
}

.haiku-line:nth-child(2) {
  animation: bopB 1.5s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards infinite alternate; /* Slower and smoother */
}

.haiku-line:nth-child(3) {
  animation: bop 1.5s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards infinite alternate; /* Slower and smoother */
}

@keyframes bop {
  0% { transform: scale(0.95); } /* Less scaling down */
  50%, 100% { transform: scale(1); }
}

@keyframes bopB {
  0% { transform: scale(0.95); } /* Less scaling down */
  80%, 100% { transform: scale(1) rotateZ(-1deg); } /* Reduced rotation */
}