:root {
  color-scheme: light dark;
  --base-delay: 0.35s;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: -webkit-fill-available;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgb(250, 250, 250); /*#F7F8FA*/
  color: #111;

  font-family: "Baskervville", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.05px;
}

h1 {
  font-size: 1em;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #030303;
    color: #fff;
  }
}

@media only screen and (-webkit-device-pixel-ratio: 3) {
  :root {
    /*  */
  }
  body {

    /*font-family: -apple-system, system-ui, BlinkMacSystemFont,
               "SF Pro Text", "SF Pro Display", "San Francisco",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
    
    font-size: 1em; /* 1.2em SF Base */

    letter-spacing: auto;
  }
}

.container {
  width: 90%;
  max-width: 480px;
  min-width: 280px;
  padding: 1.25em;
  box-sizing: border-box;
  text-align: left;
}

.line {
  opacity: 0;
  margin: 0;
  padding: 0;
  transform: translateY(80px) scale(0.95);
  filter: blur(6px);
  animation-delay: var(--base-delay);
  animation: fade-in 1.85s cubic-bezier(0.15, 1, 0.22, 1) forwards;
  will-change: opacity, transform, filter;
}

.line + .line
/*.line */ {
  margin-bottom: 0.45em;
}

.line-1 {
  animation-delay: calc(var(--base-delay) + 0.08s);
  margin-bottom: 0.18em;
}

.line-2 {
  animation-delay: calc(var(--base-delay) + 0.18s);
}

.line-3 {
  animation-delay: calc(var(--base-delay) + 0.28s);
}

a,
a:link,
a:visited,
a:active,
a:focus,
a:focus-visible,
a.name-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.45s ease-in-out;
  outline: none;
}

a:hover,
a.name-link:hover,
a:focus:hover {
  opacity: 0.25;
}

@keyframes container-wait {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in
{
  0%
  {
    opacity: 0;
    transform: translateY(80px) scale(0.95);
    filter: blur(20px);
  }

  /* 10% {
    opacity: 0.05;
    transform: translateY(-50px) scale(1.05);
    filter: blur(20px);
  } */

  100%
  {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}