:root
  { --logo-color: #CC3333
  ; --ratio: sqrt(2)
  ; --base: 1.6rem
  ; --size-1: calc(var(--base) * pow(var(--ratio), 1))
  ; --size-2: calc(var(--base) * pow(var(--ratio), 2))
  ; --size-3: calc(var(--base) * pow(var(--ratio), 3))
    }

@media (prefers-color-scheme: light)
  { :root
      { --bg-color: #FFE3E3
      ; --fg-color: #171717
      ; --link-color: var(--logo-color)
        }
    }

@media (prefers-color-scheme: dark)
  { :root
      { --bg-color: #1E1E1E
      ; --fg-color: #DFDFDF
      ; --link-color: var(--logo-color)
        }
    }

body
  { background-color: var(--bg-color)
  ; margin: 0
    }

main
  { display: flex
  ; flex-direction: column
  ; justify-content: center
  ; align-items: center
  ; row-gap: var(--size-1)
  ; box-sizing: border-box
  ; height: 100dvh
    }

img.logo
  { width: 220px
    }

p
  { margin: 0
  ; color: var(--fg-color)
  ; font-family: "neue-haas-unica", sans-serif
  ; font-weight: 300 /* Valid values: 200 to 700 */
  ; font-style: normal
  ; font-size: var(--base)
  ; line-height: var(--size-1)
  ; text-align: center
  ; max-width: 30ch
    }

a:link
  { color: var(--link-color)
  ; text-decoration: none
    }