html {
  height: 100%;
  min-height: 100%;
  background: url(background.jpeg) center/cover no-repeat;
  font-family: sans-serif;
  color: white;
  --p: 1vmin;
}
@media (orientation: landscape) {
  html {
    --p: .7vh;
  }
}
@media (orientation: landscape) and (min-height: 1000px) {
  html {
    --p: 5px;
  }
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
}

.content {
  display: grid;
  grid-gap: calc(var(--p) * 6);
  justify-items: center;
}

.title {
  font-size: calc(var(--p) * 12);
}

.button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--p) * 60);
  height: calc(var(--p) * 16);
  font-size: calc(var(--p) * 5);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: calc(var(--p) * 100);
  transition: background 0.25s, color 0.25s;
  text-transform: uppercase;
  font-weight: 700;
}
.button:hover {
  background: white;
  color: black;
}

/*# sourceMappingURL=index.css.map */