:root {
  --background: #f0f8fc;
  --text: #808a94;
  --emphasized: #181818;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font: inherit;
}

mark {
  background: none;
  color: inherit;
}

iframe {
  border-radius: 0.5em;
  border: none;
  width: 40rem;
  height: 20rem;
}

body {
  color: var(--text);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 100vh;
}

.figure {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
  background: var(--background);
  padding: 2rem;
  border-radius: 0.5em;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.125);
}

.figure__title {
  font-weight: 300;
  font-size: 2rem;
}

.figure__emphasized {
  color: var(--emphasized);
  font-size: 4rem;
}

[data-message] {
  transition: 1s ease;
}

[data-message]:not(.active) {
  opacity: 0;
  transform: translate(-50%, -75%);
}

@media (max-width: 576px) {
  .figure {
    padding: 1rem;
  }
  
  .figure__title {
    font-size: 1rem;
  }
  
  .figure__emphasized {
    font-size: 2rem;
  }
}