@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

:root {
    --background-color: #faf9f5;
    --text-color: #3d2f23;
    --link-color: #714e26;
    --link-color-hover: #bb813f;
    --logo-color-1: #281e19;
    --logo-color-2: #bb813f;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background-color: #131215;
      --text-color: #ddd6ce;
      --link-color: #9f7b4c;
      --link-color-hover: #e8a550;
      --logo-color-1: #f5e4d1;
      --logo-color-2: #e8a550;
    }
  }

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--background-color);
  }

  body {
    font-family: 'Geist Mono', monospace;
    font-size: 0.875rem;
    /* letter-spacing: -0.025em; */
    line-height: 1.8;
    color: var(--text-color);
    background: var(--background-color);
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(anim-grid.svg) repeat center center;
    background-size: 250px;
    opacity: 0.3;
  }

  @media (prefers-color-scheme: dark) {
    body:before {
      filter: invert(1);
      opacity: 0.15;
    }
  }

  #container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 300px 300px var(--background-color);
    background: var(--background-color);
    opacity: 0.7;
    border-radius: 50% 50% 50% 50%;
    width: 50%;
    max-width: 680px;
    height: 60%;
  }


  #text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 3rem);
    max-width: 600px;
    /* border: 1px solid #3d2f23; */
  }



  h2 {
    /* font-family: sans-serif; */
    font-size: 1.5rem;
    letter-spacing: -0.035em;
    font-weight: 600;
    min-height: 2em;
    /* max-width: 360px; */
  }

  @media (max-width: 768px) {
    h2 {
      min-height: 4em;
    }
  }

  h2 .char {
    display: inline-block;
  }

  h3 {
    font-size: 0.925rem;
    /* font-size: inherit; */
    font-weight: 400;
  }

  .mobile-only {
    display: none;
  }

  @media (max-width: 768px) {
    .mobile-only {
      display: block;
    }
  }

  p {
    margin: 1.5rem 0;
  }

  footer {
    margin: 3rem 0 2rem;
    font-size: 0.8rem;
  }

  .icon-links {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
  }

  .icon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    color: var(--link-color);
    transition: color 0.2s ease-in-out;
  }

  .icon-link:hover {
    color: var(--link-color-hover);
  }

  .icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  #muxi-wordmark {
    width: 128px;
    pointer-events: none;
  }

  #muxi-wordmark g:first-of-type {
    fill: var(--logo-color-1);
  }

  #muxi-wordmark g:last-of-type {
    fill: var(--logo-color-2);
  }


  @media (max-width: 768px) {

    html,
    body {
      overflow: auto;
      min-height: 100vh;
    }

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem 1.5rem;
      box-sizing: border-box;
    }

    #container {
      opacity: 0.5;
    }

    #text-container {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      flex-shrink: 0;
    }

    .icon-links {
      gap: 1rem
    }
  }