:root {
  --accent-color: #d71b60;
  --page-background: #fff;
  --page-text-color: #333;
  --page-link-color: var(--accent-color);
  --box-background: #eee;
  --footer-font-color: #999;
  --footer-line-color: #eee;
  --page-width: calc(100% - 20pt);
  /*@media screen and (min-width: 650px) {
        --page-width: 600px;
    }*/ }
  @media (prefers-color-scheme: dark) {
    :root {
      --page-background: #222;
      --page-text-color: #ddd;
      --box-background: #333;
      --footer-font-color: #777;
      --footer-line-color: #333; } }
  @media screen and (min-width: 1050px) {
    :root {
      --page-width: 1000px; } }
  @media screen and (min-width: 1450px) {
    :root {
      --page-width: 1400px; } }
html,
body {
  background-color: var(--page-background);
  color: var(--page-text-color);
  margin: 0;
  padding: 0;
  height: 100%; }

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

body {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4em;
  display: flex;
  flex-direction: column; }

div.content {
  width: var(--page-width);
  margin: 0 auto;
  padding: 5pt 10pt; }

header {
  padding: 10pt 0; }
  header .content {
    display: flex;
    align-items: end; }
  header .identity {
    display: flex;
    align-items: center;
    gap: 20pt;
    text-decoration: none; }
    header .identity .site-logo {
      height: 70pt;
      width: 70pt; }
    header .identity .site-title {
      display: inline-block;
      color: var(--accent-color);
      font-size: 2.3em;
      margin: 0;
      padding: 10pt 0 0 0;
      font-weight: bold;
      font-family: MilkAndHoney;
      letter-spacing: 0.04em; }
      header .identity .site-title a {
        text-decoration: none; }
  header .menu {
    display: flex;
    list-style-type: none;
    margin: 0 0 0 auto;
    gap: 10pt;
    padding: 0; }
    header .menu li {
      margin: 0;
      padding: 0; }
  @media screen and (min-width: 800px) {
    body.front header {
      padding: 30pt 0; }
      body.front header div.content {
        flex-direction: column;
        align-items: center;
        gap: 20pt; }
      body.front header .identity {
        gap: 35pt; }
      body.front header .site-logo {
        height: 120pt;
        width: 120pt; }
      body.front header .site-title {
        font-size: 4em;
        padding: 20pt 0 0 0;
        letter-spacing: 0.05em; }
      body.front header .menu {
        margin: 0; } }
  @media screen and (max-width: 800px) {
    header .content {
      flex-direction: column;
      gap: 10pt;
      align-items: center; }
    header .menu {
      margin: 0; } }
#main {
  flex: 1 0 auto; }
  #main h1 {
    font-family: MilkAndHoney;
    letter-spacing: 0.04em;
    font-size: 2em; }
  #main h2 {
    font-size: 1.3em;
    margin-bottom: 0pt; }
  #main div.content {
    padding-bottom: 30pt; }
  #main p {
    margin: 6pt 0; }
  #main div.box {
    background-color: var(--box-background);
    padding: 10pt 30pt 20pt; }
  #main a.button {
    display: block;
    margin: 20pt auto;
    padding: 20pt 40pt;
    background-color: var(--accent-color);
    color: var(--page-text-color);
    text-align: center;
    border-radius: 6pt;
    width: fit-content; }

footer {
  border-top: 1px solid var(--footer-line-color); }
  footer, footer a {
    color: var(--footer-font-color); }
  footer p {
    margin: 0; }