/* Fonts */

@font-face {
  font-family: ClarityCity;
  font-weight: 100;
  src: local("ClarityCity Thin"), local("ClarityCity-Thin"), url(/static/fonts/ClarityCity-Thin.woff2);
}

@font-face {
  font-family: ClarityCity;
  font-weight: 400;
  src: local("ClarityCity Regular"), local("ClarityCity-Regular"), url(/static/fonts/ClarityCity-Regular.woff2);
}

@font-face {
  font-family: ClarityCity;
  font-weight: 600;
  src: local("ClarityCity SemiBold"), local("ClarityCity-SemiBold"), url(/static/fonts/ClarityCity-SemiBold.woff2);
}

@font-face {
  font-family: ClarityCity;
  font-weight: 800;
  src: local("ClarityCity ExtraBold"), local("ClarityCity-ExtraBold"), url(/static/fonts/ClarityCity-ExtraBold.woff2);
}

@font-face {
  font-family: ClarityCity;
  font-style: italic;
  font-weight: 400;
  src: local("ClarityCity RegularItalic"), local("ClarityCity-RegularItalic"), url(/static/fonts/ClarityCity-RegularItalic.woff2);
}

@font-face {
  font-family: Inconsolata;
  src: local("Inconsolata"), url(/static/fonts/Inconsolata-Regular.woff2);
}

@font-face {
  font-family: ForkAwesome;
  src: local("ForkAwesome"), url(/static/fonts/ForkAwesome.woff2);
}


/* Page transitions */

@view-transition {
  navigation: auto;
}

@keyframes slide-out {
  100% {
    opacity: 0%;
    transform: translateX(-0.7rem);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0%;
    transform: translateX(0.7rem);
  }
}

body > header {
  view-transition-name: content;
}

::view-transition-old(content) {
  animation: slide-out 0.25s ease-in-out forwards;
}

::view-transition-new(content) {
  animation: slide-in 0.25s ease-in-out forwards;
}


/* Colors */

:root {
  --black: #210908;
  --darkgray: #7f7f7f;
  --gray: #c5c5c5;
  --red: #e8403a;
  --blue: #66a3fb;
  --white: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: white;
    --white: #210908;
  }
}

.highlight {
  .k, .kc, .kd, .kn, .kp, .kr, .kt { color: oklch(from var(--red) l calc(c/2) h) } /* Keyword */
  .o, .ow, .p { color: var(--darkgray) } /* Operator */
  .c, .ch, .cm, .cp, .cpf, .c1, .cs { color: var(--darkgray); opacity: 0.5 } /* Comment */
  .nf, .fm { color: var(--blue) } /* Function */
  .m, .mb, .mf, .mh, .mi, .mo, .il { color: var(--black) } /* Number */
  .s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss { color: var(--red) } /* String */
  .vc, .vg, .vi, .vm { color: oklch(from var(--blue) l calc(c/2) h) } /* Variable */
  .na, .nb, .nc, .no, .nd, .ni, .ne, .nl, .nn, .nt, .nv, .bp, .mi, .mf { color: oklch(from var(--red) l calc(c/2) h) } /* Name */
}


/* Common tags */

html {
  accent-color: var(--red);
  background: var(--white);
  color: var(--black);
  font: 14pt/1.5 ClarityCity;
  scroll-behavior: smooth;
  scroll-timeline: --scroll;
  scrollbar-width: thin;
}

body {
  margin: 2.25em;
}

a {
  color: var(--red);
}

h1, h2, h3 {
  text-wrap: balance;
}

button {
  appearance: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: block;
  padding: 0.5em 2em;
  text-transform: uppercase;
  transition: 0.5s background-color, 0.5s border-color, 0.5s color;
}

blockquote {
  border-bottom: 1px solid var(--gray);
  border-top: 1px solid var(--gray);
  color: var(--red);
  font-size: 2em;
  font-weight: 600;
  line-height: 1;
  margin: 1em;
  padding: 1em;
  position: relative;
  text-align: center;
  text-wrap: balance;

  &::before, &::after {
    background: var(--white);
    height: 0.5em;
    left: calc(50% - 1em);
    line-height: 1;
    position: absolute;
    width: 2em;
  }

  &::before {
    content: "”";
    top: -0.25em;
  }

  &::after {
    bottom: -0.25em;
    content: "“";
  }
}


/* Navigation bar */

body > nav ul {
  display: flex;
  line-height: 2;
  margin: 0;
  padding: 0;

  a {
    text-decoration: none;

    &:hover, &:focus {
      text-decoration: underline;
    }
  }

  li {
    list-style: none;

    button {
      background: var(--red);
      border: 1px solid var(--red);
      box-sizing: content-box;
      color: var(--white);
      font-weight: 600;
      line-height: 2;
      padding: 0 1em;

      &:hover, &:focus {
        background: alpha(from var(--red) / 0.7);
      }
    }
  }

  #home {
    margin: -0.75em auto 0 0;

    a {
      background: url(images/logo-red.svg) left content-box no-repeat;
      display: block;
      font-size: 0;
      height: 5rem;
      width: 8rem;
    }
  }


  #github {
    backdrop-filter: blur(0.2em);
    background-color: alpha(from var(--white) / 0.7);
    font-size: 0;
    margin: 0 0.5rem 0 auto;

    a {
      border: 1px solid var(--gray);
      border-radius: 3px;
      color: var(--black);
      display: block;
      transition: 0.5s border-color, 0.5s color;

      &::before {
        content: "\f09b";
        display: block;
        font: 1rem/1.5 ForkAwesome;
        height: 1.5rem;
        text-align: center;
        width: 1.5rem;
      }

      &:hover, &:focus {
        border-color: var(--red);
        color: var(--red);
        text-decoration: inherit;
      }
    }
  }

  #products, #blog, #about {
    font-size: 0.8em;
    font-weight: 600;
    position: relative;
    text-align: center;
    width: 7rem;
  }
}


/* Header */

header {
  background: url(images/header.svg), alpha(from var(--red) / 0.2);
  background-blend-mode: overlay;
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 3em 0 1em 0;
  min-height: 30em;
  padding: 0.5em 20% 1.5em;
  position: relative;
  text-align: center;

  h1 {
    color: var(--red);
    font-size: 3.2em;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.85;
    margin-top: 1.2em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  p {
    margin: 0.5rem auto;
    max-width: 35em;
  }

  &:has(.catchphrase) {
    h1 {
      font-size: 1rem;
      font-weight: 100;
      left: 0;
      position: absolute;
      text-transform: uppercase;
      top: 0.5em;
      width: 100%;
    }

    .catchphrase {
      color: var(--red);
      font-weight: 800;
      text-transform: uppercase;
    }
  }
}


/* Main */

main {
  max-width: 65em;
  margin: 0 auto;

  section {
    h2 {
      font-size: inherit;
      font-weight: 100;
      text-transform: uppercase;
      margin: 4em 0 2em 0;
    }

    h3 {
      font-size: inherit;
      font-weight: 100;
      margin: 2em 0 1em;
    }
  }
}


/* Footer */

footer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4rem;

  h2 {
    display: none;
  }

  a {
    color: inherit;
    text-decoration: none;

    &:hover, &:focus {
      text-decoration: underline;
    }
  }

  ul {
    padding: 0;

    li {
      list-style: none;
    }
  }

  section {
    width: 25%;

    &:last-of-type {
      color: var(--gray);
      width: 100%;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          width: 25%;
        }
      }
    }
  }
}


/* Contact modal */

dialog {
  background: url(images/header.svg), var(--red);
  background-blend-mode: overlay;
  border: none;
  border-radius: 0.5em;
  box-shadow:
    0 0 1em black,
    0 0 0 calc(max(100vh, 100vw)) #0008;
  padding: 1em;

  h2 {
    font-size: 1.4em;
    font-weight: 100;
    margin-top: 0;
    text-align: center;
    text-transform: uppercase;
  }

  button[popovertargetaction="hide"] {
    background: transparent;
    color: var(--white);
    font-size: 0;
    padding: 0;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;

    &::after {
      content: "×";
      display: block;
      font-size: 2rem;
      line-height: 0.5;
    }
  }

  form {
    label {
      color: var(--white);
      display: block;
      margin: 0.5em 0;

      input, textarea {
        appearance: none;
        background-color: alpha(from var(--white) / 0.1);
        border: none;
        border-radius: 3px;
        color: var(--black);
        display: block;
        font: inherit;
        padding: 0.5em;
        transition: 0.5s background-color;

        &::placeholder {
          color: alpha(from var(--black) / 0.5);
        }

        &:focus {
          background-color: alpha(from var(--white) / 0.2);
        }
      }

      textarea {
        height: 10em;
        width: 35em;
      }
    }

    button {
      background: var(--white);
      bottom: 1.25rem;
      color: var(--red);
      position: absolute;
      right: 1.25rem;
      width: 5rem;

      &:hover, &:focus {
        background: alpha(from var(--white) / 0.7);
      }
    }
  }

  p {
    color: var(--white);
    font-size: 0.8em;
    padding-right: 6rem;

    a {
      color: inherit;
    }
  }
}


/* Classes */

.tags {
  border-radius: 2em;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75em;
  gap: 1em;
  justify-content: center;
  margin: 3em auto 0;
  padding: 1em;

  li {
    display: block;
    line-height: 1;
    padding: 0;
    text-transform: uppercase;

    a {
      border: 0.1em solid;
      border-radius: 2em;
      color: var(--red);
      text-decoration: inherit;
      padding: 0.4em 1.5em 0.25em;
      white-space: pre;

      &:not([href]) {
        background-color: var(--red);
        color: var(--white);
      }
    }
  }
}

.catchphrase {
  font-size: 3.2em;
  letter-spacing: -0.02em;
  line-height: 0.85;
  margin: 0.5em auto;
  margin-top: 1.2em;
  text-wrap: balance;

  :is(h2 ~ &) {
    margin-top: -0.35em;
  }
}

.carrousel {
  background: alpha(from var(--white) / 0.7);
  backdrop-filter: blur(0.2em);
  border-radius: 0.5em;
  box-shadow: 0.25em 0.25em 1em alpha(from var(--red) / 0.3);
  margin: 2em 0;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;

  > div {
    display: flex;
    width: 300%;
  }

  nav {
    font-size: 0.75em;
    left: 0;
    position: sticky;
    width: 100%;

    .tags {
      border-radius: 0;
      border-top: 1px solid var(--gray);
      margin: 0 2em;

      a {
        color: var(--darkgray);
        margin: 1em 0;

        &:active, &:focus {
          background: var(--darkgray);
          color: var(--white);
        }
      }
    }
  }
}

.sponsors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5em;
  margin: 2em;
  padding: 0;

  li {
    align-items: center;
    display: flex;
    font-size: 0;
  }

  &.gold img {
    max-height: 150px;
    max-width: min(450px, 80vw);
  }

  &.silver img {
    max-height: 100px;
    max-width: min(300px, 80vw);
  }

  &.bronze img {
    max-height: 50px;
    max-width: min(150px, 80vw);
  }
}

.highlight {
  background-color: alpha(from var(--red) / 0.1);
  border-radius: 0.5em;
  font-family: Inconsolata;
  padding: 1em 2em;

  .linenos {
    opacity: 0.2;
    padding-right: 1ch;
  }
}

.icon {
  &::before {
    font: 1em/1 ForkAwesome;
    margin-right: 1ch;
  }

  &.link::before { content: "\f0c1" }
  &.talks::before { content: "\f130" }
  &.mastodon::before { content: "\f2e1" }
  &.linkedin::before { content: "\f0e1" }
  &.opencollective::before { content: "\f336" }
  &.star::before { content: "\f006" }
  &.people::before { content: "\f0c0" }
  &.gnu::before { content: "\f34d" }
  &.user::before { content: "\f007" }
  &.heartbeat::before { content: "\f21e" }
  &.download::before { content: "\f019" }
}


/* Index page */

#page-index {
  header {
    background: none;

    h1 {
      font-size: 0;
      margin-bottom: -2rem;
      position: static;

      &::before {
        background: url(images/bubbles.svg) center no-repeat;
        content: "";
        display: block;
        height: 5rem;
        margin: auto;
        width: 2.5rem;
      }
    }
  }

  main {
    h2 {
      text-align: center;
    }

    .catchphrase {
      max-width: 12em;
      text-align: center;
    }

    #trusted {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        font-size: 0;
        margin: 2rem;
        padding: 0;

        li {
          margin: 0;

          img {
            height: 5rem;
            object-fit: contain;
            filter: grayscale(100%) opacity(70%);
            transition: filter 1s;
            width: 5rem;

            &:hover {
              filter: none;
            }
          }
        }
      }
    }

    #use {
      background: url(images/header.svg), alpha(from var(--red) / 0.2);
      background-blend-mode: overlay;
      border-radius: 0.5em;
      margin: 4em 0;
      padding: 2em 4em;

      article {
        box-sizing: border-box;
        overflow: hidden auto;
        padding: 2em;
        scroll-margin-top: 18rem;
        scroll-snap-align: start;
        width: 100%;

        h3 {
          color: var(--red);
          font-size: 2.2em;
          font-weight: 600;
          line-height: 1;
          margin: 0.25em 0;
        }

        .highlight {
          background-color: color-mix(in srgb, alpha(from var(--red) / 0.5) 30%, var(--white) 70%);
          backdrop-filter: blur(1em);
          background-blend-mode: difference;
          box-shadow: 0.25em 0.25em 2em alpha(from var(--black) / 0.1);
          filter: grayscale(50%) opacity(50%);
          float: right;
          font-size: 0.75em;
          margin: 0 0 -1em -100%;
          max-width: 75%;
          position: relative;
          transform: translatex(25em) scale(85%) rotate(0.01turn);
          transition: 0.5s transform ease-in-out, 0.5s filter ease-in-out;
          width: 35em;
          z-index: 1;

          &:hover {
            filter: none;
            transform: none;
          }
        }

        p,
          ul {
            min-width: 40%;
            width: calc(100% - 15em);
          }

        ul {
          display: flex;
          flex-wrap: wrap;
          font-size: 0.75em;
          gap: 0.5em 2em;
          list-style-type: none;
          margin: 2em 0 0;
          padding: 0;
        }
      }
    }

    #opensource {
      p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        text-wrap: balance;

        &:not(.catchphrase) {
          font-size: 1.25em;
          max-width: 45rem;
        }
      }

      dl {
        display: grid;
        font-size: 0.75em;
        gap: 0.5em 4em;
        grid: auto-flow / 1fr 1fr 1fr;
        max-width: 60em;
        margin: 4em auto;

        dt {
          font-weight: 800;
          grid-row: 1;

          &::before {
            color: var(--red);
            display: block;
            font-size: 1.3em;
            font-weight: 400;
            margin: 0.25em 0;
          }
        }

        dd {
          grid-row: 2;
          margin: 0;
        }
      }
    }

    #experience {
      background: url(images/header.svg), alpha(from var(--blue) / 0.2);
      background-blend-mode: overlay;
      border-radius: 0.5em;
      margin: 4em 0;
      padding: 2em 4em;

      .carrousel {
        background: none;
        backdrop-filter: none;
        box-shadow: none;
        margin-top: 4em;

        div {
          font-size: 0.75em;
          max-width: 300%;
          width: fit-content;

          figure {
            margin: 0.5em;
            scroll-margin-top: 22rem;
            max-width: calc(100% / 3);
            width: 30em;

            blockquote {
              background: alpha(from var(--white) / 0.7);
              backdrop-filter: blur(0.2em);
              border: none;
              color: inherit;
              font-weight: inherit;
              margin: 0;
              text-align: left;

              &::before,
                &::after {
                  content: none;
                }
            }

            figcaption {
              background: alpha(from var(--white) / 0.7);
              backdrop-filter: blur(0.2em);
              margin-top: 1em;
              padding: 1em;
              width: 50%;
            }
          }
        }
      }
    }

    #support {
      background-color: var(--red);
      border-radius: 0.5em;
      margin: 4em auto;
      max-width: 25em;
      padding: 2em 4em;

      h2 {
        margin-top: 1em;
      }

      button {
        background-color: var(--white);
        color: var(--red);
        display: block;
        margin: 3em auto 0;

        &:hover, &:focus {
          background-color: alpha(from var(--white) / 0.8);
        }
      }

      ::marker {
        color: var(--white);
        content: "o ";
        font-size: 1.5em;
        font-weight: 600;
        line-height: 1;
      }
    }
  }
}


/* Team page */

#page-team {
  h2 {
    text-align: center;
  }

  #why {
    border-bottom: 1px solid var(--gray);
    border-top: 1px solid var(--gray);
    padding: 2em 0;

    h2 {
      column-span: all;
      text-align: left;
    }

    p {
      font-size: 1.5em;
      line-height: 1.2;
    }

    img {
      background: lightgray;
      border-radius: 0.5em;
      break-before: column;
      display: block;
      height: 15em;
      width: 100%;
    }

    dl {
      font-size: 0.85em;
      margin: 5em 0 2em;

      dt {
        font-weight: 800;

        &:not(:first-of-type) {
          margin-top: 2em;
        }
      }

      dd {
        margin: 0;

        a {
          color: inherit;
          text-decoration: inherit;
        }
      }
    }

    > a {
      border: 1px solid;
      border-radius: 3px;
      font-size: 0.85em;
      font-weight: 600;
      padding: 0.5em;
      text-decoration: inherit;
      text-transform: uppercase;
    }
  }

  #open {
    text-align: center;

    > p {
      max-width: 50rem;
      text-wrap: balance;

      &:not(.catchphrase) {
        font-size: 1.5em;
        margin: 1.2rem auto;
      }
    }

    div {
      > a {
        color: inherit;
        display: block;
        margin-top: 2rem;
        text-decoration: inherit;
      }

      article {
        display: flex;
        flex-direction: column;
        font-size: 0.85em;
        height: 100%;
        padding-right: 10%;
        text-align: left;

        h3 {
          margin: 0;
        }

        span {
          color: var(--red);
          margin-top: auto;
        }
      }
    }
  }
}


/* Blog home page */

#page-blog {
  header {
    background: none;

    .tags {
      background: alpha(from var(--red) / 0.1);
    }
  }

  main {
    article {
      --left-padding: 10em;
      border-bottom: 1px solid var(--gray);
      font-size: 0.85em;
      overflow: auto;
      padding: 2em 0 2em var(--left-padding);

      img {
        border-radius: 0.5em;
        float: left;
        height: calc(var(--left-padding) - 1em);
        margin-left: calc(var(--left-padding) * -1);
        object-fit: contain;
        width: calc(var(--left-padding) - 1em);
      }

      aside {
        color: var(--darkgray);

        .tags {
          display: inline-flex;
          padding: 0 1em;
          margin: 0;
          vertical-align: 0.05rem;
        }
      }

      h2 {
        font-size: 2.2em;
        font-weight: 600;
        line-height: 1;
        margin: 0.25em 0;

        a {
          text-decoration: inherit;
        }
      }
    }
  }
}


/* Blog article page */

#page-article {
  article {
    header {
      aside {
        margin: 0 0 1.5em;
        opacity: 0.6;
      }
    }

    img {
      max-width: 80%;
      margin: auto;
    }

    figure {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      margin: 3em auto;

      img {
        margin: 0;
      }

      figcaption {
        color: var(--darkgray);
        font-family: Inconsolata;
        width: 35%;
      }
    }
  }
}


/* Links page */

#page-links {
  main {
    max-width: 30em;
    text-align: center;

    h1 {
      background: url(images/logo-white.svg) center / 80% no-repeat var(--red);
      border-radius: 100%;
      font-size: 0;
      height: 7rem;
      margin: 3rem auto;
      width: 7rem;
    }

    ul {
      list-style-type: none;
      padding: 0;

      a {
        border: 1px solid var(--red);
        display: block;
        margin: 1em 0;
        padding: 1em;
        text-decoration: inherit;
        transition: 1s background-color;

        &:hover, &:focus {
          background-color: alpha(from var(--red) / 0.1);
        }
      }
    }
  }
}


/* Desktop */

@media (min-width: calc(60rem + 1px)) {
  body > nav {
    #products {
      color: var(--red);

      &::after {
        content: "\f078";
        font: 1em/1 ForkAwesome;
      }

      &:hover {
        dl {
          opacity: 100%;
          transition: 0.5s opacity;
          visibility: visible;
        }
      }

      dl {
        background:
          linear-gradient(-20deg, alpha(from var(--white) / 0.5), var(--white)) padding-box,
          linear-gradient(-45deg, var(--white), hsla(from var(--white) h s 92 / 0.5)) border-box;
        border: 2px solid transparent;
        border-radius: 5px;
        box-shadow: 0 2px 0 alpha(from var(--red) / 0.2);
        line-height: 1.4;
        opacity: 0;
        padding: 0.5em 0;
        position: absolute;
        text-align: left;
        transform: translateX(-25%);
        transition: 0.5s opacity, 0s visibility 0.5s;
        visibility: hidden;
        width: 200%;
        z-index: 1;

        dt {
          padding: 0.5em 0 0;
        }

        dd {
          border-bottom: 1px solid alpha(from var(--red) / 0.2);
          color: var(--gray);
          font-size: 0.8em;
          font-weight: 400;
          margin: 0;
          padding: 0 2em 0.5em 0;
          position: relative;

          &::after {
            bottom: 0.5em;
            color: var(--red);
            content: "\f178";
            display: block;
            font-family: ForkAwesome;
            position: absolute;
            right: 0;
            transform: rotate(-45deg);
          }
        }

        a {
          display: block;
          margin-top: -1px;
          padding: 0 1em;
          transition: 1s background-color;

          &:hover, &:focus {
            background-color: alpha(from var(--red) / 0.1);
            text-decoration: inherit;
          }

          &:last-of-type dd {
            border: none;
          }
        }
      }
    }
  }

  #page-team {
    #why {
      columns: 2;
      gap: 5em;
    }

    #open div {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      > a {
        width: 25%;
      }
    }
  }
}


/* Mobile */

@media (max-width: 60rem) {
  body {
    margin: 9rem 1rem 3rem;
    overflow-x: hidden;

    /* Draw x when 𑁔 is clicked */
    &:has(> nav:active):not(:has(nav *:active)) {
      footer::before {
        height: calc(1.5rem + 2px);
        transition-delay: 0s;
      }
    }

    /* Draw menu when 𑁔 is clicked */
    > nav:active:not(:has(:active)) {
      transition-delay: 0s;
      left: 0;

      #products::before {
        scale: 100%;
        transition-duration: 0s;
      }

      &::after {
        transition-delay: 0s;
        z-index: 0;
      }
    }

    /* Reset state of menu when x is clicked */
    &:has(footer:active) {
      > nav,
      > nav #products::before,
      footer::before {
        transition: none;
      }
    }
  }

  /* Menu style */
  body > nav {
    height: 100vh;
    left: -100vw;
    position: absolute;
    right: 0;
    top: 0;
    transition: left 0s calc(infinity * 1s);
    width: 100vw;
    z-index: 1;

    ul {
      display: block;
      font-size: 2rem;

      #home {
        margin: 0;
        position: absolute;
        translate: 100vw;

        a {
          background-position: center;
          padding: 1rem 0;
          width: 100vw;
        }
      }

      #github {
        bottom: 1rem;
        position: fixed;
        right: 3.5rem;
      }

      #touch {
        display: none;
      }

      #products, #blog, #about {
        box-sizing: border-box;
        color: white;
        font-weight: 400;
        padding: 0.5em 1em;
        position: fixed;
        text-align: left;
        width: 100vw;

        a {
          color: inherit;
        }
      }

      #products {
        padding-top: 8rem;

        /* Animated menu background */
        &::before {
          background:
            radial-gradient(
              circle at bottom right,
              var(--red) 20%,
              alpha(from var(--red) / 0.5) 20%,
              alpha(from var(--red) / 0.5) 22%,
              transparent 22%);
          content: "";
          left: 0;
          height: 100vh;
          position: absolute;
          scale: 500%;
          top: 0;
          transform-origin: bottom right;
          transition: scale 0.5s;
          width: 100vw;
          z-index: -1;
        }

        /* White bubbles at the top of the menu */
        &::after {
          background: url(images/bubbles-white.svg) center 1rem / 1.75rem no-repeat;
          content: "";
          height: 5rem;
          left: 0;
          position: absolute;
          top: 0;
          width: 100vw;
        }

        dl {
          font-size: 1rem;
          margin-bottom: 1rem;

          dd {
            display: none;
          }
        }
      }

      #blog {
        top: 24rem;
      }

      #about {
        top: 28rem;
      }
    }

    /* Menu burger button */
    &::after {
      backdrop-filter: blur(0.2em);
      background-color: alpha(from var(--white) / 0.7);
      border: 1px solid var(--red);
      border-radius: 3px;
      bottom: 1rem;
      color: var(--red);
      content: "\f0c9";
      cursor: pointer;
      font: 1rem/1.5 ForkAwesome;
      height: 1.5rem;
      position: fixed;
      right: 1rem;
      text-align: center;
      width: 1.5rem;
    }
  }

  .catchphrase, h1 {
    font-size: 2.2rem;
    hyphens: auto;
  }

  header {
    padding: 0.5em 2em;
  }

  footer {
    background: url(images/bubbles.svg) left top / 1.75rem no-repeat;
    padding-top: 5rem;

    /* Menu close button */
    &::before {
      background: var(--red);
      bottom: 1rem;
      content: "×";
      cursor: pointer;
      font-size: 2.5rem;
      font-weight: 100;
      height: 0;
      line-height: calc(1.5rem + 2px);
      position: fixed;
      right: 1rem;
      text-align: center;
      transition: height 0s calc(infinity * 1s);
      overflow: hidden;
      width: calc(1.5rem + 2px);
      z-index: 2;
    }

    section {
      width: 100%;

      &:last-of-type ul li {
        width: 100%;
      }
    }
  }

  #page-index {
    main section {
      &#use, &#experience, &#support {
        padding: 1.5em 1em;

        article {
          p, ul {
            width: 100%;
          }

          .highlight {
            display: none;
          }
        }
      }

      &#opensource {
        dl {
          display: block;
          text-align: center;

          dd {
            margin-bottom: 1em;
          }
        }
      }
    }
  }

  #page-blog {
    main {
      article {
        --left-padding: 5em;

        aside {
          font-size: 0.75em;
        }

        h2 {
          font-size: 1.5em;

          & ~ * {
            display: none;
          }
        }
      }
    }
  }

  #page-links {
    main h1 {
      height: 0;
    }
  }
}