/* Ocean */
#ocean { justify-self: end; width: 100%; height: 110px; position: relative; }

#waves__front { position: absolute; left: 0; bottom: 0; height: 80px; width: 100%; overflow: hidden; pointer-events: none; }
#waves__back { position: absolute; left: 0; bottom: 0; height: 80px; width: 100%; overflow: hidden;  }
#waves__high { position: absolute; width: calc(100% + 40px); bottom: 25px; left: -20px; height: 52px; background: transparent url('../img/waves_high.svg') 0 0 repeat-x; animation: high_waves 4s ease-in-out alternate infinite; }
#waves__medium { position: absolute; width: calc(100% + 40px); bottom: 15px; left: -20px; height: 52px; background: transparent url('../img/waves_medium.svg') 0 0 repeat-x; animation: medium_waves 6s ease-in-out alternate infinite; }
#waves__low { position: absolute; width: calc(100% + 40px); bottom: 0; left: -20px; height: 52px; background: transparent url('../img/waves_low.svg') 0 0 repeat-x; animation: low_waves 8s ease-in-out alternate infinite; pointer-events: auto; }

#clicker { position: absolute; bottom: 0; right: 0; animation: message 4s ease-in-out alternate infinite; }

#clicker__bottle { display: block; padding: 0; margin: 0; border: 0; width: 33px; height: 100px; position: absolute; bottom: 0; right: 95px; background-color: transparent; overflow: visible; transform: rotate(15deg); }
#clicker__bottle:hover, #clicker__bottle:focus-within { cursor: pointer; background-color: transparent; }

#clicker__message { width: 450px; height: 200px; position: absolute; right: 5px; bottom: 80px; display: none; }
#clicker__text { width: 400px; position: absolute; background: #FFF; top: 0px; left: 0; padding: 30px; border: 1px solid #333; color: #333; }
#clicker__genie { position: absolute; bottom: 0; right: 0; height: 200px; width: 150px; }
#clicker__close { position: absolute; top: -8px; left: -8px; width: 32px; height: 32px; padding: 0; background: #333; border-radius: 8px; }

#clicker.active #clicker__message { display: block; }

#clicker.active #svg__cork { opacity: 0; transform: translate(0, -30px); transition: opacity 5s, transform 5s; }
#clicker.active #svg__message { opacity: 0; transition: opacity 5s 5s; }


@keyframes low_waves {
  from { transform: translate(-5px, 0); }
  to { transform: translate(5px, 3px); }
}
@keyframes medium_waves {
  from { transform: translate(10px, 0); }
  to { transform: translate(-10px, 5px); }
}
@keyframes high_waves {
  from { transform: translate(-10px, 0); }
  to { transform: translate(10px, 7px); }
}
@keyframes message {
  from { transform: translate(0, 0);  }
  to { transform: translate(0, -10px); }
}

@media (max-width: 480px) {
  #clicker__message { position: relative; left: auto; right: auto; width: 80vw; margin: 0 10vw; }
  #clicker__text { width: 80vw; font-size: 2rem; }
  #clicker__genie { right: -50px; }
  #clicker__bottle { right: 85px; }
}

@media (max-width: 430px) {
  #clicker__genie { right: -100px; }
  #clicker__bottle { right: 35px; }
}