html {
  height: 100%;
  min-height: 100%;
  font-family: sans-serif;
  color: white;
  background-color: #000000;
  /* --p: 1vmin; */
}
body {
  
  background: url(../img/spa.jpg) center center;
  background-size: cover;
}
@media (orientation: landscape) {
  html {
    --p: .5vh;
  }
}
@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) * 3);
  justify-items: center;
}

.content p {
  text-align: center;
  font-size: calc(var(--p) * 4);
  text-shadow: -2px 2px 3px #000000;
}

.title {
  font-size: calc(var(--p) * 5);
  text-shadow: -2px 2px 3px #000000;
}

.button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--p) * 50);
  height: calc(var(--p) * 12);
  font-size: calc(var(--p) * 4);
  background: rgba(66, 5, 5, 0.75);
  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: rgb(40, 0, 0);
}

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