:root {
  --spacer-s: .15em;
  --spacer-m: .25em;
  --main-color: #dafed0;
  --contrast-color: #dafed0;
  --button-font-size: 3em;

  @media (max-width: 500px) {
    --button-font-size: 2.5em;
  }
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

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

.swiper{
  width: 100%;
  height: 100svh;
  height: 100vh;
  inset: 0%;
  position: fixed;
  z-index: 1;
  background-color: var(--main-color);
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide picture,
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.font {
  z-index: 100;
  color: var(--main-color);
  text-shadow: -1px 0 17px #c1facdab;
  font-family: Toytrial Webfont, Times New Roman, sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1;
  position: fixed;
  text-transform: uppercase;
  color: var(--main-color);
}

.title {
  font-size: min(12vw, 12rem);
  letter-spacing: .02em;
}

.button {
  display: inline-block;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  letter-spacing: .04em;
  min-width: 27px;
  min-height: 27px;
  font-size: var(--button-font-size);
}

/* Position each button in a fallback grid layout */
.button:nth-child(1) {
  bottom: 10%;
  right: 10%;
}
.button:nth-child(2) {
  bottom: 30%;
  right: 50%;
}
.button:nth-child(3) {
  bottom: 70%;
  right: 50%;
}

.font.button:hover {
  color: var(--contrast-color);
}

.button-fixed {
  filter: drop-shadow(-1px 0px 13px var(--contrast-color));
  color: var(--main-color);
  background-color: transparent;
  padding-right: 0;
  padding-left: 0;
  min-width: 27px;
  min-height: 27px;
  border: none;
}

.button-fixed svg{
  height: calc(var(--button-font-size) * 0.3);
  width: calc(var(--button-font-size) * 0.3);
}

.button-fixed:hover {
  color: var(--contrast-color);
}

.button-container {
  z-index: 100;
  width: calc(100% - 2 * 27px);
  margin: 0 auto;
  height: 55svh;
  height: 55vh;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 54px;
}

.title-container {
  z-index: 100;
  width: 100%;
  height: 45svh;
  height: 45vh;
  padding-bottom: 27px;
  padding-left: 27px;
  padding-right: 27px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .title {
    font-size: min(13vw, 8rem);
  }
}

@media screen and (max-width: 767px) {
  .title {
    font-size: min(15vw, 8rem);
  }

  .button, .button-fixed {
    position: absolute;
  }

  .button-container {
    left: 27px;
    right: 27px;
  }

  .code {
    position: relative;
  }
}

@media screen and (max-width: 479px) {
  .background {
    background-image: none;
  }

  .font.title {
    white-space: normal;
    word-break: keep-all;
    width: auto;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    font-size: min(16vw, 8rem);
    position: static;
  }

  .title-container {
    justify-content: center;
    align-items: center;
    display: flex;
    top: 0;
    bottom: auto;
  }
}


@font-face {
  font-family: 'Toytrial Webfont';
  src: url('../fonts/toytrial-regular-webfont.woff2') format('woff2'), url('../fonts/toytrial-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}