@font-face {
  font-family: font;
  src: url(font.woff2);
  font-display: block;
}

iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

body {
  background-color: black;
  overflow: hidden;
}

h1, button {
  font-family: font;
  color: white;
  text-align: center;
  font-size: calc(min(5vw, 5vh));
  line-height: calc(min(5vw, 5vh));
  width: 100%;
  text-shadow: 0 calc(min(0.5vw, 0.5vh)) rgb(100, 100, 100), 0 0 calc(min(1vw, 1vh)) black, 0 calc(min(0.5vw, 0.5vh)) calc(min(1vw, 1vh)) black;
}

button {
  width: calc(min(50vw, 50vh));
  padding: calc(min(2vw, 2vh));
  border-radius: calc(min(50vw, 50vh));
  background-color: rgba(0, 255, 0, 0.5);
  border: calc(min(0.5vw, 0.5vh)) solid rgba(0, 255, 0, 0.5);
  cursor: pointer;
  transition: scale 0.2s ease;
}

button:hover {
  scale: 1.05;
}

/* h1 {
  font-size: calc(min(14vw, 14vh));
  line-height: calc(min(5vw, 5vh));
  color: rgb(255, 50, 50);
  text-shadow: 0 calc(min(1.5vw, 1.5vh)) rgb(100, 20, 20), 0 0 calc(min(3vw, 3vh)) black, 0 calc(min(1.5vw, 1.5vh)) calc(min(3vw, 3vh)) black;
} */

div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}