@font-face {
  font-family: 'Red Hat Display';
  src: url('./font/RedHatDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-bg: #efefef;
  --gold: #c5832b;
  --font-family: 'Red Hat Display', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: var(--page-bg);
  overflow: hidden;
}

body {
  font-family: var(--font-family);
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--page-bg);
  background-image: url('landscape_background.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  margin: 0;
  color: var(--gold);
  font-family: var(--font-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.04;
  text-align: center;
}

.title-landscape {
  display: block;
  width: 73.177083vw;
  height: 11.574074vh;
  left: 13.229167vw;
  top: 45.648148vh;
  font-size: 6.25vw;
}

.title-vertical {
  display: none;
  width: 77.87037vw;
  height: 11.041667vh;
  left: 11.111111vw;
  top: 57.447917vh;
  font-size: 9.444444vw;
}

.title-vertical span {
  display: block;
}

.timer {
  position: absolute;
  margin: 0;
  width: 60.78125vw;
  height: 26.203704vh;
  left: 19.635417vw;
  top: 58.240741vh;
  color: var(--gold);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14.166667vw;
  line-height: 1.04;
  letter-spacing: 0;
  text-align: center;
}

.timer.is-message {
  width: 78vw;
  left: 11vw;
  font-size: 3.9vw;
  line-height: 1.15;
  top: 64.5vh;
}

.logo {
  position: absolute;
  object-fit: contain;
}

.logo-geomotive {
  width: 12.093385vw;
  height: 7.592593vh;
  left: 6.25vw;
  top: 87.777778vh;
}

.logo-partner {
  width: 8.321248vw;
  height: 10.459346vh;
  left: 85.416667vw;
  top: 86.296296vh;
}

@media (max-aspect-ratio: 1/1) {
  .screen {
    background-image: url('vertical_background.png');
  }

  .title-landscape {
    display: none;
  }

  .title-vertical {
    display: block;
  }

  .timer {
    width: 77.5vw;
    height: 10.572917vh;
    left: 11.296296vw;
    top: 70.364583vh;
    font-size: 18.055556vw;
  }

  .timer.is-message {
    width: 80vw;
    left: 10vw;
    top: 72vh;
    font-size: 5.5vw;
    line-height: 1.2;
  }

  .logo-geomotive {
    width: 21.499351vw;
    height: 4.270833vh;
    left: 11.111111vw;
    top: 89.375vh;
  }

  .logo-partner {
    width: 14.79333vw;
    height: 5.883382vh;
    left: 74.091667vw;
    top: 88.541667vh;
  }
}