:root {
  --logo-blue: #6c96da;
  --logo-green: #4eaa4b;
  --main-background-color: #fdfffd;
  --text-color: #000000;
  --soft-contrast-background: #e2f4e1;
  --area-border-color: var(--logo-green);
  --link-blue: #0b3d66;
  --link-purple: #53295b;
  --link-red: #673737;

  --area-border: 1px solid var(--area-border-color);

  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-background-color: #081608;
    --text-color: #ffffff;
    --soft-contrast-background: #001001;
    --area-border-color: #065609;
    --link-blue: #94c9ff;
    --link-purple: #e3b2ff;
    --link-red: #f5b7c6;
  }
}

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

  &:active {
    color: var(--link-red);
  }

  &:visited {
    color: var(--link-purple);
  }
}

body {
  display: grid;
  grid-template: " header  main " auto
                 / 4fr     7fr;
  background-color: var(--main-background-color);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  > * {
    box-sizing: border-box;
    padding: 2rem;
  }
}

header {
  grid-area: header;
  background-color: var(--soft-contrast-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  border-right: var(--area-border);

  text-align: center;

  #logo {
    display: block;
    width: 96px;
    height: 96px;
  }

  h1, address {
    margin: 0;
  }
}

@media (max-width: 40em) {
  body {
    grid-template: " header " min-content
                   " main   " auto
                   / 1fr;
    > * {
      padding: 1rem;
    }
  }

  header {
    flex-direction: row;
    justify-content: flex-start;
    align-items: top;
    gap: 1.5rem;
    border-right: none;
    border-bottom: var(--area-border);

    text-align: start;

    #logo {
      width: 64px;
      height: 64px;
    }
  }
}

main {
  grid-area: main;

  > *:first-child {
    margin: 0;
  }

  > * + * {
    margin: 0 0 1em 0;
  }
}