@font-face {
  font-family: 'OCR';
  src: url("../../assets/font/asm/OCR.woff2") format('woff2'), url("../../assets/font/asm/OCR.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}
/* CUT THE FILE HERE */
.App {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyMiAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE1NF8xNDgpIj4KPHBhdGggZD0iTTIgMkg0TDIyIDIwSDEwTDIgMjhWMloiIGZpbGw9IiNGQ0VGM0EiLz4KPHBhdGggZD0iTTQgMkgyVjI2SDRWMjhIMFYwSDRWMlpNNiAyNkg0VjI0SDZWMjZaTTggMjRINlYyMkg4VjI0Wk0yMiAyMkg4VjIwSDIwVjE4SDIyVjIyWk0yMCAxOEgxOFYxNkgyMFYxOFpNMTggMTZIMTZWMTRIMThWMTZaTTE2IDE0SDE0VjEySDE2VjE0Wk0xNCAxMkgxMlYxMEgxNFYxMlpNMTIgMTBIMTBWOEgxMlYxMFpNMTAgOEg4VjZIMTBWOFpNOCA2SDZWNEg4VjZaTTYgNEg0VjJINlY0WiIgZmlsbD0iIzI0MUIxQiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE1NF8xNDgiPgo8cmVjdCB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg=="), auto;
  font-family: 'OCR';
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  touch-highlight: none;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* CUT THE FILE HERE */
.Footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  width: 26vw;
  height: 3vw;
  margin: 0 auto;
  background-size: contain;
  background-position-y: 100vw;
  background-repeat: no-repeat;
  background-image: url("../../assets/map-footer-text.svg");
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.Footer_hidden {
  transform: translateY(100%);
  opacity: 0;
}
/* CUT THE FILE HERE */
.Image {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  z-index: 2;
  scale: 1;
  --parallax-y: 0px;
  transition: scale 0.3s ease, background-image 0.3s ease;
}
.Image:hover {
  scale: 1.075;
  cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyMiAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE1NF8xNDgpIj4KPHBhdGggZD0iTTIgMkg0TDIyIDIwSDEwTDIgMjhWMloiIGZpbGw9IiNGQ0VGM0EiLz4KPHBhdGggZD0iTTQgMkgyVjI2SDRWMjhIMFYwSDRWMlpNNiAyNkg0VjI0SDZWMjZaTTggMjRINlYyMkg4VjI0Wk0yMiAyMkg4VjIwSDIwVjE4SDIyVjIyWk0yMCAxOEgxOFYxNkgyMFYxOFpNMTggMTZIMTZWMTRIMThWMTZaTTE2IDE0SDE0VjEySDE2VjE0Wk0xNCAxMkgxMlYxMEgxNFYxMlpNMTIgMTBIMTBWOEgxMlYxMFpNMTAgOEg4VjZIMTBWOFpNOCA2SDZWNEg4VjZaTTYgNEg0VjJINlY0WiIgZmlsbD0iIzI0MUIxQiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE1NF8xNDgiPgo8cmVjdCB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg=="), auto;
  will-change: transform;
}
.Image {
  animation: floatComposite var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite;
}
/* CUT THE FILE HERE */
.Island {
  position: absolute;
  cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyMiAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE1NF8xNDgpIj4KPHBhdGggZD0iTTIgMkg0TDIyIDIwSDEwTDIgMjhWMloiIGZpbGw9IiNGQ0VGM0EiLz4KPHBhdGggZD0iTTQgMkgyVjI2SDRWMjhIMFYwSDRWMlpNNiAyNkg0VjI0SDZWMjZaTTggMjRINlYyMkg4VjI0Wk0yMiAyMkg4VjIwSDIwVjE4SDIyVjIyWk0yMCAxOEgxOFYxNkgyMFYxOFpNMTggMTZIMTZWMTRIMThWMTZaTTE2IDE0SDE0VjEySDE2VjE0Wk0xNCAxMkgxMlYxMEgxNFYxMlpNMTIgMTBIMTBWOEgxMlYxMFpNMTAgOEg4VjZIMTBWOFpNOCA2SDZWNEg4VjZaTTYgNEg0VjJINlY0WiIgZmlsbD0iIzI0MUIxQiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE1NF8xNDgiPgo8cmVjdCB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg=="), auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Island {
    position: relative;
  }
  .Island .Image {
    margin: 32px auto;
  }
  .Island__Card {
    left: 0 !important;
    right: 0;
    margin: 0 auto;
    width: 90% !important;
  }
}
.Island ::-moz-selection {
  background: #fcef3a;
  color: #241b1b;
}
.Island ::selection {
  background: #fcef3a;
  color: #241b1b;
}
.Island_active {
  z-index: 1000;
}
.Island_active .Image {
  filter: brightness(0) saturate(100%) invert(90%) sepia(94%) saturate(500%) hue-rotate(360deg);
  scale: 1.2;
}
.Island_active .Image:hover {
  scale: 1.2;
}
.Island_Letter .Image {
  filter: none !important;
}
.Island__hint {
  position: relative;
  z-index: 10;
  color: #241b1b;
  background: #fcef3a;
  border: 2px solid rgba(26,190,240,0.49);
  display: inline-block;
  margin: 0 auto;
  letter-spacing: -0.1vw;
  border-radius: 10vw;
  text-transform: uppercase;
  padding: 0.2vw 0.6vw;
  margin-bottom: -1.5vw;
  opacity: 0;
  visibility: hidden;
  translate: 0 0.5vw;
  transition: opacity 0.3s ease, visibility 0.3s ease, translate 0.3s ease;
  --hint-float-y: 0.3vw;
  --hint-float-duration: 3s;
  animation: hintFloat var(--hint-float-duration) ease-in-out infinite;
}
.Island:hover .Island__hint {
  opacity: 1;
  visibility: visible;
  translate: 0 -0.5vw;
}
.Island_active .Island__hint {
  opacity: 0 !important;
  visibility: hidden !important;
}
.Island__num {
  font-size: 5vw;
  line-height: 5vw;
  letter-spacing: -0.5vw;
  margin-left: -0.4vw;
}
@media screen and (max-width: 767px) {
  .Island__num {
    font-size: 60px;
    line-height: 60px;
  }
}
.Island__side {
  text-transform: uppercase;
  font-size: 1.8vw;
  line-height: 2vw;
  letter-spacing: -0.12vw;
  position: absolute;
  right: 0;
  top: 0.7vw;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .Island__side {
    font-size: 22px;
    line-height: 24px;
  }
}
.Island__subtitle {
  color: #4b4b4b;
}
.Island__colon {
  display: inline;
  animation: colonBlink 1s step-end infinite;
}
.Island__strong {
  background: #fcef3a;
  color: #241b1b;
  text-transform: uppercase;
}
.Island__head {
  position: relative;
  margin-bottom: 0.5vw;
}
.Island__card {
  text-align: left;
  position: absolute;
  top: 0;
  z-index: 2000;
  width: 31.1vw;
  background: #241b1b;
  color: #fcef3a;
  border-radius: 1vw;
  padding: 0.8vw 1.6vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95) translateY(-1vw);
  transition: opacity 0.2s ease, visibility 0.3s ease, transform 0.3s ease;
}
.Island_active .Island__card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.Island__footer {
  width: 100%;
  height: 4.8vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../../assets/card-footer.svg");
}
.Island__lines {
  width: 100%;
  overflow: hidden;
}
.Island__line {
  width: 100%;
  height: 0.8vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzk2IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAzOTYgOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMC41SDM5NiIgc3Ryb2tlPSIjNEI0QjRCIiBzdHJva2UtZGFzaGFycmF5PSIxIDEiLz4KPHBhdGggZD0iTTAgMi41SDM5NiIgc3Ryb2tlPSIjNEI0QjRCIiBzdHJva2UtZGFzaGFycmF5PSIxIDEiLz4KPHBhdGggZD0iTTAgNC41SDM5NiIgc3Ryb2tlPSIjNEI0QjRCIiBzdHJva2UtZGFzaGFycmF5PSIxIDEiLz4KPHBhdGggZD0iTTAgNi41SDM5NiIgc3Ryb2tlPSIjNEI0QjRCIiBzdHJva2UtZGFzaGFycmF5PSIxIDEiLz4KPC9zdmc+Cg==");
}
.Island__text {
  padding: 1vw 0 2vw 0;
}
.Island__p + .Island__p {
  margin-top: 1vw;
}
/* CUT THE FILE HERE */
/* CUT THE FILE HERE */
.Map {
  padding-bottom: 15vw;
}
.Map__water {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
  background-image: url("../../assets/ocean.jpg");
  position: fixed;
  top: 0;
  --parallax-y: 0px;
  transform: translateY(var(--parallax-y));
}
.Map__logo {
  top: 4.8vw;
  width: 28vw;
  height: 6.4vw;
  margin: 0 auto;
  right: 5vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../../assets/logo2.svg");
  position: absolute;
  --parallax-y: 0px;
  animation: floatComposite var(--float-duration, 6.5s) ease-in-out var(--float-delay, -0.8s) infinite;
  transition: scale 0.3s ease;
}
.Map__logo:hover {
  scale: 1.04;
}
@keyframes floatComposite {
  0%, 100% {
    translate: 0 var(--parallax-y, 0);
    rotate: 0deg;
  }
  50% {
    translate: var(--float-x-amplitude, 0) calc(var(--parallax-y, 0) + (-1 * var(--float-y-amplitude, 0.6vw)));
    rotate: var(--float-rot-amplitude, 0deg);
  }
}
@keyframes hintFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-1 * var(--hint-float-y, 0.3vw)));
  }
}
@keyframes colonBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}