@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu:wght@400;700&display=swap');

:root {
  --red: #D60A26;
  --grey: #a7a7a7;
  --fadeIn: opacity 0.25s ease-in;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  user-select: none;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-size: clamp(16px, 1vw, 22px);
  font-weight: 400;
  overflow: hidden;
}

h2 {
  font-size: clamp(22px, 2.5vw, 50px);
  font-weight: 700;
}

.restart {
  width: clamp(24px, 3vw, 48px);
  position: absolute;
  top: 2rem;
  right: 2rem;
  cursor: pointer;
  opacity: 1;
  z-index: 49;
}

.splash {
  width: 100%;
  height: 100%;
  position:absolute;
  z-index: 50;
  top: 0;
  left: 0;
  background: var(--red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splash__title {
  font-weight: 700;
  font-size: clamp(75px, 2.5vw, 150px);
  margin-bottom: 8rem;
}

.splash__play {
  width: clamp(50px, 2.5vw, 75px);
  color: #fff;
  margin-bottom: 8rem;
  cursor: pointer;
}

.splash__logo > svg {
  width: clamp(250px, 2.5vw, 300px);
}

.restart svg {
  color: var(--red);
}

/***** Content *****/

.content {
  display: grid;
  position: relative;
  max-width: 1536px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.overlap {
  width: 100%;
  height: 100%;
  grid-area: 1 / 1 / 1 / -1;
}

.fade {
  opacity: 1;
  transition: var(--fadeIn);
}

.video {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 40;
}

.ended {
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.part {
  opacity: 1;
  transition: var(--fadeIn);
  z-index: 10;
}

/***** Navigation buttons *****/

.nav {
  position: relative;
  z-index: 30;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.nav__grid {
  height: 12%;
  width: 70%;
  list-style: none;
  display: flex;
  grid-auto-flow: column;
  justify-content: space-evenly;
  margin: 0;
}

.nav__item {
  cursor: pointer;
  padding-bottom: 2rem;
  color: var(--grey);
  display: grid;
  flex: 0 1 100%;
  transition: width transform 120ms ease-out;
  opacity: 0;
}

.nav__item img {
  width: 90%;
  height: auto;
  pointer-events: none;
  filter: grayscale(1) opacity(.5);
  transition: filter, .25s ease-in;
}

.nav__item.active img {
  filter: none;
  transition: filter, .25s ease-in;
  color: var(--red);
}

.nav__item:hover img {
  width: 100%;
  transform: translateX(-5%);
  transition: width transform 120ms ease-in;
}

.nav__item svg {
  pointer-events: none;
  opacity: 0;
}

/***** Info Boxes *****/

.infoBox__grid {
  position: absolute;
  z-index: 20;
  display: grid;
  padding: 0 2rem;
  column-gap: 4rem;
  pointer-events: none;
}

.infoBox {
  position: relative;
  padding: 2rem;
  background: var(--red);
  display: flex;
  grid-gap: 4rem;
  opacity: 0;
  width: 50%;
  height: max-content;
  z-index: 100;
}

.infoBox__content {
  width: 100%;
}

.infoBox ul {
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  columns: 3;
  font-size: clamp(16px, 1vw, 18px);
}

.infoBox li {
  margin-left: 1rem;
}

.top,
.left,
.right {
  grid-column-start: 1;
  grid-column-end: 3;
  width: 100%;
}

.infoBox__title {
  margin-bottom: 1.2rem;
}

.logo-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  grid-gap: 2rem;
}

.logo {
  width: clamp(25px, 2.5vw, 50px);
}

@media screen and (min-width: 1200px) {
 
  .infoBox.left,
  .infoBox.right {
    flex-direction: column;
  }  

  .left {
    grid-area: 1 / 1 / 3 / 2;
    justify-self: flex-start;
    max-width: 50%;
  }

  .right {
    grid-area: 1 / 2 / 3 / 3;
    justify-self: flex-end;
    max-width: 75%;  
  }
}

.hidden {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}