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

html {
  font-family: 'Oswald', sans-serif;
  fonr-size: 16px;
}

body {
    background-color: #000;
    overflow: hidden;
    font-size: 1rem;
    background-image: linear-gradient(0deg, #ffffff, #808080 16.67%, #000000 33.33%, #000000);
}

#title, #titleSecond {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}

#title {
  transform: translate(-50%, -50%) translateY(-4rem);
  font-size: 2rem;
  white-space: nowrap;
}

#titleSecond {
  transform: translate(-50%, -50%) translateY(-4rem);
  font-size: 1.5rem;
  white-space: nowrap;
}

#viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(-80px);
}

#boardLong {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform:  rotateX(-16deg) rotateY(10deg);
}

#boardMini {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(200px)  rotateX(-16deg) rotateY(-10deg);
}

@media screen and (max-width: 1023px) {
  #viewport {
    transform: translateY(-80px) scale(0.8);
  }
}

@media screen and (max-width: 639px) {
  #viewport {
    transform: translateY(-80px) scale(0.4);
  }
}