/* ─────────────────────────────────────────
   GENERAL
───────────────────────────────────────── */

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  max-width: 100%;
  box-sizing: border-box;
}

body {
  background-color: #754025;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────
   FONTS
───────────────────────────────────────── */

@font-face {
  font-family: "fs";
  src: url(Fonts/FieldSans-Regular.woff) format("woff");
}

@font-face {
  font-family: "fsd";
  src: url(Fonts/FieldSans-Display.woff) format("woff");
}

@font-face {
  font-family: "fungal";
  src: url(Fonts/FungalVF.woff) format("woff");
  font-weight: 100 1000;
}

/* ─────────────────────────────────────────
   TYPE
───────────────────────────────────────── */

div.body {
  font-family: "fs";
  font-size: 2em;
  line-height: 1.2;
}

div.caption {
  font-family: "fs";
  font-size: 1em;
  line-height: 1;
}

div.underline {
  text-decoration: underline;
}

div.embossed {
  color: #754025;
  font-family: "fs";
  font-size: 1em;
  font-weight: bold;
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.2),
    1px 1px 1px rgba(0, 0, 0, 0.2);
}

div.fungal {
  font-family: "fungal";
  font-size: 1.75em;
}

div.fungal2 {
  font-family: "fungal";
  font-size: 1.75em;
  font-variation-settings:
    "THCK" 200,
    "grow" 5000;
}

div.fungalcaption {
  font-family: "fungal";
  font-size: 1em;
  line-height: 1;
  font-variation-settings:
    "THCK" 500,
    "grow" 1000;
}

div.fungal-large {
  font-family: "fungal";
  font-size: 5em;
}

div.fungal-xl {
  font-family: "fungal";
  font-size: 10em;
}

/* ─────────────────────────────────────────
   COLOUR
───────────────────────────────────────── */

div.yellow {
  color: #ffffbb;
}

div.blue {
  color: #8eb5f9;
}

/* ─────────────────────────────────────────
   LAYOUT & POSITION
───────────────────────────────────────── */

div.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

div.relative {
  position: relative;
}

div.inlineblock {
  display: inline-block;
}

div.back {
  z-index: -1;
}

div.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin-top: auto;
  margin-left: auto;
}

div.align-center {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

/* ─────────────────────────────────────────
   FLEX
───────────────────────────────────────── */

div.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

div.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

div.j-sb {
  justify-content: space-between;
}

div.j-center {
  justify-content: center;
  align-items: center;
}

/* ─────────────────────────────────────────
   WIDTH AND HEIGHT
───────────────────────────────────────── */

div.height100vh {
  height: 100vh;
}

div.height100 {
  height: 100%;
}

div.width100vw {
  width: 100vw;
}

div.width100 {
  width: 100%;
}

div.width50 {
  width: 50%;
}

div.width20 {
  width: 20%;
}

div.width60 {
  width: 60%;
}

div.width70 {
  width: 70%;
}

div.width80 {
  width: 80%;
}

div.width90 {
  width: 90%;
}

div.margin-2em {
  padding-left: 2em;
}

div.margin-tb-10 {
  margin-top: 10%;
  margin-bottom: 10%;
}

div.margin-t-50 {
  margin-top: 50%;
}

div.margin-t-25 {
  margin-top: 25%;
}

div.margin-l-5 {
  margin-left: 5%;
}

div.margin-r-5 {
  margin-right: 5%;
}

div.margin-b-5 {
  margin-bottom: 5%;
}

/* ─────────────────────────────────────────
   COLUMN
───────────────────────────────────────── */

.left {
  width: 50%;
  margin-top: 5em;
  margin-right: auto;
  margin-bottom: 5em;
  margin-left: 0.5em;
}

.right {
  width: 50%;
  margin-right: 0.5em;
  margin-bottom: 1em;
  margin-left: auto;
}

div.right0 {
  margin-left: auto;
  margin-bottom: 1em;
  margin-right: 0.5em;
}

div.rightcaption {
  width: 50%;
  margin-left: auto;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

/* Scroll-reveal */
.left,
.right,
.rightcaption {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1000ms,
    transform 500ms;
}

.left.show,
.right.show,
.rightcaption.show {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   IMAGES
───────────────────────────────────────── */

div.img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 10px solid #8eb5f9;
}

div.img2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 10px solid #8eb5f9;
}

.imgbox {
  width: 20vw;
  aspect-ratio: 1.5 / 1;
  overflow: hidden;
}

.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 10px solid #8eb5f9;
}

.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img2 iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.iframe-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  border: 10px solid #8eb5f9;
}

.map-overlay {
  display: none;
}

@media (max-width: 900px) {
  .map-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
  }
}

/* ─────────────────────────────────────────
   LOADING BOXES
───────────────────────────────────────── */

.loadingbox {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  border: 10px solid #8eb5f9;
  overflow: hidden;
  position: relative;
}

.loadingbox:hover {
  border-color: #ffffbb;
  box-shadow: inset 10px 10px 100px #ffffbb;
}

.loadingbox2 {
  width: 99vw;
  aspect-ratio: 1.5 / 1;
  border: 10px solid #8eb5f9;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

/* ─────────────────────────────────────────
   SPLASH SCREEN
───────────────────────────────────────── */

.iframe {
  width: 100%;
  height: auto;
  pointer-events: none;
}

.iframe-splash {
  width: 100%;
  height: 100%;
  position: fixed;
  /* pointer-events: none; */
}

div#splash {
  height: 100vh;
  width: 100vw;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

div#iframe-button {
  background-color: transparent;
  border: 10px solid #8eb5f9;
  color: #8eb5f9;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-family: "fs";
  display: inline-block;
  font-size: 2em;
  cursor: pointer;
  position: absolute;
  z-index: 99999;
}

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */

/* Orbit */
div.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: orbit 15s linear infinite;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(30vmin);
}

@keyframes orbit {
  from {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(30vmin)
      rotate(calc(var(--angle) * -1));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg))
      translateX(30vmin) rotate(calc((var(--angle) + 360deg) * -1));
  }
}

/* Moving image strip */
.moving-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: -100%;
  animation: slideIn 10s infinite;
}

@keyframes slideIn {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}

.delay1 {
  animation-delay: 1s;
}
.delay2 {
  animation-delay: 2s;
}
.delay3 {
  animation-delay: 3s;
}
.delay4 {
  animation-delay: 4s;
}

/* Pulses */
.pulse {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from {
    font-variation-settings:
      "THCK" 100,
      "grow" 200;
  }
  to {
    font-variation-settings:
      "THCK" 300,
      "grow" 800;
  }
}

.pulse2 {
  animation: pulse2 1s infinite alternate;
}

@keyframes pulse2 {
  from {
    font-variation-settings:
      "THCK" 100,
      "grow" 200;
  }
  to {
    font-variation-settings:
      "THCK" 500,
      "grow" 500;
  }
}

.pulse3 {
  animation: pulse3 1s infinite alternate ease;
}

@keyframes pulse3 {
  from {
    font-variation-settings:
      "THCK" 100,
      "grow" 200;
  }
  to {
    font-variation-settings:
      "THCK" 700,
      "grow" 700;
  }
}

.pulse4 {
  animation: pulse4 1s infinite alternate ease;
}

@keyframes pulse4 {
  from {
    font-variation-settings:
      "THCK" 100,
      "grow" 200;
  }
  to {
    font-variation-settings:
      "THCK" 1000,
      "grow" 1000;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE (TABLET)
───────────────────────────────────────── */

@media (max-width: 768px) {
  div.left,
  div.right,
  div.right0 {
    width: 70% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    padding: 0 1em;
  }

  div.right.flex-row.j-sb {
    flex-direction: column;
    gap: 0.5em;
  }

  div.width20,
  div.width50,
  div.width60,
  div.width70,
  div.width80,
  div.width90 {
    width: 80% !important;
  }

  .loadingbox {
    width: 25vw;
  }
  .imgbox {
    width: 30vw;
  }

  div.body {
    font-size: 1.4em;
  }
  div.caption,
  div.fungalcaption {
    font-size: 0.9em;
  }
  div.fungal,
  div.fungal2 {
    font-size: 1.4em;
  }
  div.fungal-large {
    font-size: 3em;
  }

  div.fungal-xl {
    font-size: 4em;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE (MOBILE)
───────────────────────────────────────── */

@media (max-width: 900px) {
  div.left,
  div.right,
  div.right0 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0 0.5em;
  }

  div.rightcaption {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    margin-bottom: 0.2em;
    padding: 0 0.5em;
  }

  div.right.flex-row.j-sb {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.3em;
  }

  div.width20,
  div.width50,
  div.width60,
  div.width70,
  div.width80,
  div.width90 {
    width: 100% !important;
  }

  .loadingbox {
    width: 40vw;
  }
  .imgbox {
    width: 40vw;
  }

  div.body {
    font-size: 1.2em;
  }
  div.caption,
  div.fungalcaption {
    font-size: 0.75em;
  }
  div.fungal,
  div.fungal2 {
    font-size: 1em;
  }
  div.fungal-large {
    font-size: 2em;
  }
  div.splashtext {
    font-size: 4em;
  }

  div.fungal-xl {
    font-size: 3em;
  }
}