:root {
  --mainColor: #ef392c;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "OpenSans_Regular", serif;
  margin-block-start: 0;
}

video {
  height: 100%;
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  background-color: white;
  color: black;
  font-size: 4vh;
  padding: 1.5vh;
  border: none;
  text-transform: uppercase;
  font-family: "OpenSans_Regular", serif;
  font-weight: bold;
  position: absolute;
  bottom: 5%;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: fit-content;
}

h4,
p {
  margin-block-start: 0.8vh;
  margin-block-end: 0;
}

h2 {
  text-transform: uppercase;
  font-size: 5vh;
  margin: 0;
}

h3,
h4 {
  font-weight: lighter;
  text-transform: uppercase;
  margin-block-end: 0;
}

h3 {
  font-size: 2.5vh;
}

h4 {
  font-size: 1.5vh;
}

.wrap {
  position: fixed;
  width: 100%;
  height: 100vh;
  opacity: 1;
  visibility: visible;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 10s cubic-bezier(1, 0, 1, -0.75);
}

.wrap.inactive {
  opacity: 0;
  visibility: hidden;
  transition: all 1.6s ease-in-out;
}

.slide {
  padding: 10%;
  height: 100%;
  text-align: center;
  color: white;
  background-color: var(--mainColor);
  top: 27%;
  position: relative;
  opacity: 0.95;
  left: 50%;
  transform: translateX(-50%);
}


.idle {
  height: 100vh;
  position: absolute;
}

.game {
  position: fixed;
  height: 100%;
  width: 100%;
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.instructions h2 {
  text-align: left;
}

.instructions h4 {
  font-size: 1.5vh;
}

.instructions p {
  font-size: 1.5vh;
  text-align: left;
}

@media (min-width: 860px) {
  .wrap {
    position: fixed;
    width: 80%;
    height: calc(100% - 20vw);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    z-index: 10;
    margin: 10%;
    transition: opacity 10s cubic-bezier(1, 0, 1, -0.75);
    top: unset;
    left: unset;
    transform: unset;
  }

  .slide {
    padding: 5% 5% 10% 5%;
  }

  .game {
    min-width: 600px;
  }
}