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

html, body
{
  margin: 0;
  height: 100%;
}

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

  min-height: 100dvh;
  display: grid;
  place-items: center;

  background-color: rgb(239, 239, 239); /*#F7F8FA*/
  color: rgb(0, 0, 0);

  font-family: "Libre Baskerville", serif; /* "Baskervville" */
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.05px;

  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1em;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(0, 0, 0);
    color: rgb(193, 194, 191);
  }
}

@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; 

    letter-spacing: auto;
  }
}

.container {
  width: 90%;
  max-width: 520px;
  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: 1em;
}

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

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

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

.normal {
  font-weight: normal;
}

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);
  }
}

//Seasonal Snow
.snow
{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  isolation: isolate;

  /* theme */
  --flake: rgba(255,255,255,1);
  --windX: 0vw;
}

@media (prefers-color-scheme: dark)
{
  .snow
  {
    --flake: rgba(255,255,255,0.78);
  }
}

.snow .f
{
  position: absolute;
  left: var(--x);
  top: -12vh;

  width: var(--s);
  height: var(--s);
  border-radius: 999px;

  background: var(--flake);

  opacity: var(--o);
  filter: blur(var(--b)) brightness(1.02);

  animation: fall var(--d) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.snow .f::after
{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;

  background: rgba(255,255,255,1);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

@keyframes fall
{
  from { transform: translate3d(0, -10vh, 0); }
  to { transform: translate3d(calc(var(--dx) + var(--windX)), 130vh, 0); }
}

@media (prefers-reduced-motion: reduce)
{
  .snow .f
  {
    animation: none;
  }
}