body {
  display: grid;
  place-content: center;
  background: #FFF;
  /*background-image: var(--gradient-18);*/
}

.card {
  background: var(--surface-3);
  border: 1px solid var(--surface-1);
  padding: var(--size-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  min-width: 40vw;
}

.card:hover {
  box-shadow: var(--shadow-3);
}

.button {
  display: inline-flex;
  white-space: nowrap;
  font-size: var(--font-size-fluid-1);
  font-weight: var(--font-weight-7);
  padding-inline: var(--size-6);
  padding-block: var(--size-3);
  color: var(--red-9);
  border: var(--border-size-2) solid var(--red-5);
  background-color: var(--red-1);
  border-radius: var(--radius-2);
  text-decoration: none;
}

.button:is(:hover, :focus) {
  cursor: pointer;
  color: var(--red-0);
  background-color: var(--red-5);
}

@media (prefers-reduced-motion: no-preference) {
  .button:focus {
    transition: outline-offset .25s ease;
  }

  .button:focus:not(:active) {
    outline-offset: 5px;
  }
}

p.meta {
  margin: var(--font-size-5) 0;
}

p.disclaimer {
  text-align: right;
}

div {
  margin: var(--font-size-5);
  text-align: center;
}

h1 {
  font-size: var(--font-size-5);
}

p.disclaimer a, p.disclaimer a:visited {
  color: var(--red-5);
  text-decoration: none;
  font-weight: bold;
}