@charset "UTF-8";

:root {
  --page-background: linear-gradient(
    white,
    color(display-p3 0.841 0.909 1.000));
  --platter-background: linear-gradient(
    color(display-p3 0.347 0.513 0.793 / 0.101),
    color(display-p3 0.414 0.540 0.741 / 0.200));
  --platter-border: color(srgb 0.235 0.235 0.263 / 0.120);
  --link-color: color(display-p3 0.216 0.537 0.969);
}

@media (prefers-color-scheme: dark) { :root {
  --page-background: linear-gradient(
    color(display-p3 0.000 0.020 0.046),
    color(display-p3 0.000 0.138 0.268));
  --platter-background: linear-gradient(
    color(display-p3 0.463 0.463 0.502 / 0.240),
    color(display-p3 0.471 0.471 0.502 / 0.320));
  --platter-border: color(display-p3 0.216 0.537 0.969 / 0.350);
  --link-color: color(display-p3 0.219 0.625 1.000);
} }

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-background) fixed;
  font-family: ui-sans-serif, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  display: grid;
  grid-template-rows: 85% 15%;
}

a {
  color: var(--link-color);
}

section {
  background: var(--platter-background) fixed;
  width: 70%;
  height: 85%;
  place-self: end center;
  border: 1.5px solid var(--platter-border);
  border-radius: 2rem;
  border-radius: min(5vh, 5vw);
  display: grid;
  place-items: center;
}

section > div {
  padding: 10%;
}

h1 {
  font-size: 5rem;
  font-weight: 600;
  font-width: 115%;
  margin: 0;
}

h2 {
  font-size: 2em;
  font-weight: 500;
  font-width: 115%;
  margin: 0 0 1.5rem 0;
}

.coming-soon {
  opacity: 50%;
  font-size: 2em;
  font-weight: 500;
  font-width: 115%;
  margin: 2rem 0 0 0;
}

.about {
  opacity: 75%;
  font-size: 0.8rem;
}