@font-face {
  font-family: 'Cloudy Morning';
  src: url('./fonts/cloudy-morning.woff2') format('woff2'),
    url('./fonts/cloudy-morning.woff') format('woff'),
    url('./fonts/cloudy-morning.ttf') format('truetype'),
    url('./fonts/cloudy-morning.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

html,
body {
  height: 100%;
  margin: 0;
  /* overflow: hidden; */
  font-family: 'Cloudy Morning', sans-serif;
  /* margin: 50px; */
}

body {
  display: grid;
  place-items: center;
  background: rgb(78, 175, 248);
}

/* map-stage,
lighthouse-stage {
  width: 100%;
  max-width: 430px;
}

@media (max-width: 767px) {
  map-stage,
  lighthouse-stage {
    max-width: 100%;
  }
} */

#app {
  width: 100%;
  /* max-width: 430px; */
  height: 800px;
  position: relative;
  /* display: grid; */
  /* margin: 10px; */
  /* place-items: center; */
  /* border: 1px solid #f00; */
}

.wavy {
  clip-path: shape(from 0 25px,curve to 6.82% 15.5px with 4.55% 15px,curve to 11.36% 9px with 9.09% 16px,curve to 15.91% 20px with 13.64% 2px,curve to 20.45% 44px with 18.18% 38px,curve to 25% 27.5px with 22.73% 50px,curve to 29.55% 20.5px with 27.27% 5px,curve to 34.09% 23.5px with 31.82% 36px,curve to 38.64% 10.5px with 36.36% 11px,curve to 43.18% 5.5px with 40.91% 10px,curve to 47.73% 9.5px with 45.45% 1px,curve to 52.27% 11.5px with 50% 18px,curve to 56.82% 20px with 54.55% 5px,curve to 61.36% 23px with 59.09% 35px,curve to 65.91% 28px with 63.64% 11px,curve to 70.45% 24.5px with 68.18% 45px,curve to 75% 25.5px with 72.73% 4px,curve to 79.55% 44.5px with 77.27% 47px,curve to 84.09% 31px with 81.82% 42px,curve to 88.64% 26.5px with 86.36% 20px,curve to 93.18% 23.5px with 90.91% 33px,curve to 100% 25px with 95.45% 14px,vline to calc(100% - 25px),curve to 93.18% calc(100% - 26.5px) with 95.45% calc(100% - 13px),curve to 88.64% calc(100% - 41px) with 90.91% calc(100% - 40px),curve to 84.09% calc(100% - 28.5px) with 86.36% calc(100% - 42px),curve to 79.55% calc(100% - 7.5px) with 81.82% calc(100% - 15px),curve to 75% calc(100% - 12.5px) with 77.27% calc(100% - 0px),curve to 70.45% calc(100% - 27.5px) with 72.73% calc(100% - 25px),curve to 65.91% calc(100% - 28px) with 68.18% calc(100% - 30px),curve to 61.36% calc(100% - 27px) with 63.64% calc(100% - 26px),curve to 56.82% calc(100% - 34px) with 59.09% calc(100% - 28px),curve to 52.27% calc(100% - 28px) with 54.55% calc(100% - 40px),curve to 47.73% calc(100% - 31px) with 50% calc(100% - 16px),curve to 43.18% calc(100% - 37px) with 45.45% calc(100% - 46px),curve to 38.64% calc(100% - 23.5px) with 40.91% calc(100% - 28px),curve to 34.09% calc(100% - 12px) with 36.36% calc(100% - 19px),curve to 29.55% calc(100% - 11px) with 31.82% calc(100% - 5px),curve to 25% calc(100% - 22.5px) with 27.27% calc(100% - 17px),curve to 20.45% calc(100% - 29.5px) with 22.73% calc(100% - 28px),curve to 15.91% calc(100% - 23.5px) with 18.18% calc(100% - 31px),curve to 11.36% calc(100% - 32px) with 13.64% calc(100% - 16px),curve to 6.82% calc(100% - 30px) with 9.09% calc(100% - 48px),curve to 0 calc(100% - 25px) with 4.55% calc(100% - 12px),vline to 0);
}

@keyframes lighthouse-next-lock-yoyo {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
  100% {
    transform: translateY(0);
  }
}