@font-face {
    font-family: 'Nunito Block';
    src: url('https://fonts.noisefactor.io/fonts/nunito/Nunito-Block.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
  }

  @font-face {
    font-family: 'Nunito';
    src: url('https://fonts.noisefactor.io/fonts/nunito/Nunito%5Bwght%5D.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Audiowide';
    src: url('https://fonts.noisefactor.io/fonts/audiowide/Audiowide-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url('https://fonts.noisefactor.io/fonts/material-symbols-outlined/material-symbols-outlined.woff2') format('woff2');
    font-display: block;
  }

  body, html {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', 'Nunito Block';
    color: #555555;
    background: #040404;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  h1 {
    margin-top: 0;
    margin-bottom: 0.25em;
    color: var(--slide-accent);
    padding: 0;
    display: inline-block;
  }

  h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
  }

  h2 {
    color: var(--slide-accent);
  }

  h4 {
    color: #666666;
  }

  h3 {
    margin-top: 1em;
    background: none;
    color: var(--slide-accent);
    padding: 0;
    display: inline-block;
  }

  a {
    color: var(--slide-accent);
  }

  a:hover {
    color: var(--slide-accent);
    opacity: 0.7;
  }

  .content-column {
    flex: 3;
  }

  @media (prefers-color-scheme: dark) {
    body, html {
      color: #c9c9c9;
      background: #040404;
    }

    h2 {
      color: var(--slide-accent);
    }

    h4 {
      color: #c9c9c9;
    }

    h1 {
      color: var(--slide-accent);
    }

    h3 {
      background: none;
      color: var(--slide-accent);
    }

    a {
      color: var(--slide-accent);
    }

    a:hover {
      color: var(--slide-accent);
      opacity: 0.7;
    }

    .content-column {
      color: #c9c9c9;
    }

    .material-symbols-outlined {
      color: var(--slide-accent) !important;
      background: linear-gradient(135deg, #585858 0%, #202020 100%) !important;
      border-radius: 0.5rem !important;
    }
  }

  .smaller {
    font-size: 1.05em;
    margin-bottom: 1.0em;
  }

  .container {
    display: flex;
    align-items: flex-start;
    background: transparent;
    max-width: 50rem;
    width: 100%;
  }

  .logo-column {
    flex: 0 1 7.8125rem;
  }

  .logo img {
    max-width: 6.25rem;
    margin-bottom: 0.625rem;
  }

  .products {
    display: flex;
    justify-content: space-around;
  }

  .product {
    flex: 1;
    margin-right: 0.625rem;
  }

  @media (max-width: 48em), (max-height: 43.75em) {
    .container {
      flex-direction: column;
    }

    .logo-column, .content-column {
      text-align: left;
      flex: none;
    }

    .products {
      flex-direction: column;
    }

    .product {
      width: 100%;
    }
  }