:root {
  color-scheme: light;
  --focus: #c99422;
  --page: #071827;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--page);
  font-family: Arial, Helvetica, sans-serif;
}

.landing {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.landing::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -28px;
  background:
    linear-gradient(
      rgba(7, 24, 39, .20),
      rgba(7, 24, 39, .20)
    ),
    url("assets/landing-approved.png")
    center / cover no-repeat;
  filter: blur(20px) saturate(.9);
  transform: scale(1.05);
}

.landing::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 24, 39, .38) 0%,
    rgba(7, 24, 39, .06) 18%,
    rgba(7, 24, 39, .06) 82%,
    rgba(7, 24, 39, .38) 100%
  );
  pointer-events: none;
}

.artwork-wrap {
  position: relative;
  width: min(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  box-shadow: 0 0 42px rgba(0, 0, 0, .26);
}

picture,
.artwork {
  display: block;
  width: 100%;
  height: 100%;
}

.artwork {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.language-links {
  position: absolute;
  inset: 0;
}

.language-card {
  position: absolute;
  top: 53.6%;
  height: 25.3%;
  border-radius: clamp(12px, 1.6vw, 25px);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: 0 solid transparent;
}

.language-card span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* DESKTOP */

.italian {
  left: 14.2%;
  width: 12.7%;
}

.english {
  left: 27.5%;
  width: 13%;
}

.french {
  left: 41.1%;
  width: 13.4%;
}

.spanish {
  left: 55.6%;
  width: 13.2%;
}

.german {
  left: 70.1%;
  width: 13.3%;
}

/* MOBILE */

@media (max-width: 700px) {

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .landing {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: block;
    overflow: hidden;
  }

  .landing::before,
  .landing::after {
    display: none;
  }

  .artwork-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    transform: none;
    box-shadow: none;
  }

  picture,
  .artwork {
    display: block;
    width: 100%;
    height: 100%;
  }

  .artwork {
    object-fit: fill;
  }

  .language-links {
    position: absolute;
    inset: 0;
  }

  .language-card {
    height: 18.5%;
    border-radius: 5%;
  }

  .italian {
    top: 34.1%;
    left: 7.5%;
    width: 27%;
  }

  .english {
    top: 34.1%;
    left: 36.5%;
    width: 27%;
  }

  .french {
    top: 34.1%;
    left: 65.5%;
    width: 27%;
  }

  .spanish {
    top: 53.7%;
    left: 19.3%;
    width: 29.5%;
  }

  .german {
    top: 53.7%;
    left: 51.1%;
    width: 29.5%;
  }
}