:root {
        --background: #200624;
        --backgrounddark: #180624;
        --backgroundlight: #30092b;
        --backgrounddarkest: #0f010d;
        --backgrounddanger: #1c0202;
        --backgroundwarning: #1a0a05;
        --backgroundinfo: #05171a;
        --backgroundsuccess: #0f1c11;
        --foreground: #baf9c3; /* light neon mint */
        --foregroundspecial: #4cf5f8; /* sky cyan */
        --accent: #f874ee; /* pink */
        --accentspecial: #f4b35d; /* orange */
        --accentprimary: #f4e05d; /* yellow */
        --accentsecondary: #a35df4; /* purple */
        --accenttertiary: #f46c5d; /* coral */
        --accentquaternary: #5df483; /* lime */
        --radius: 0;
      }

@media (max-width: 768px) {
  .nav-link-text {
    display: none;
  }
}

.nav-metal-link-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 45 45'%3E%3Cg fill='currentColor'%3E%3Cpath d='M6.65,27.79c-.62.62-.35,1.98.62,2.15,1.18.21,4.97.12,6.14-.17,2.55-.64,4.13-2.89,4.16-5.48,3.17,1.93,7.16-.35,7.48-3.96.37-4.11-.37-8.81,0-12.91.29-3.26,4.74-3.19,5,0-.31,6.66.39,13.66,0,20.27-.41,6.86-5.26,11.83-12.14,12.28-6.34.41-11.23-.1-15.45-5.21-3.26-3.93-4.11-13.02,2.69-13.53,1.49-.11,6.64-.19,7.83.22,2.69.91,2.74,4.79.1,5.78-1.49.56-5.73-.13-6.43.57Z'%3E%3C/path%3E%3Cpath d='M7.58,18.73H2.59V2c0-.06.36-.83.44-.95.92-1.41,3.19-1.41,4.11,0,.08.12.44.89.44.95v16.72Z'%3E%3C/path%3E%3Cpath d='M19.61,12.52c1.49-.24,2.78.76,2.95,2.26.12,1.08.14,4.77-.06,5.77-.55,2.66-4.6,2.57-4.93-.35-.12-1.08-.14-4.77.06-5.77.19-.94,1.03-1.75,1.98-1.9Z'%3E%3C/path%3E%3Cpath d='M12.12,10.02c1.49-.24,2.78.76,2.95,2.26.1.92.11,3.77-.1,4.62-.62,2.58-4.57,2.41-4.9-.46-.1-.9-.11-3.67.06-4.52.19-.94,1.03-1.75,1.98-1.9Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-top: -3px;
    margin-right:-5px;
    padding-right: 0;
}



.nav-icon {
    color: var(--foreground);
}

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

.nav-link-text {
    color: var(--foreground);
}

.nav-link-active {
    color: var(--accentquaternary);
}

.nav-link-text:hover {
    color: var(--foregroundspecial);
}



.bg-darkest {
    background-color: var(--backgrounddarkest);
}


      .weekdays {
        background-color: var(--backgrounddark);
      }

      .weekend {
        background-color: var(--backgroundlight);
      }
      html {
        box-sizing: border-box;
      }

      body {
        font-family: 'Fira Code', 'JetBrains Mono', Monaco, Consolas,
          'Ubuntu Mono', monospace;
        font-weight: 400;
        background-color: var(--background);
        color: var(--foreground);
        text-rendering: optimizeLegibility;
        font-variant-ligatures: contextual;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust: 100%;
      }

    /* what is this? */
      var {
        color: var(--accentspecial);
      }

      h1 {
        color: var(--accent);
        text-shadow: 0px 3px 3px black;
        font-size: 3.5rem;
      }

      h2 {
        color: var(--accentspecial);
                text-shadow: 0px 3px 3px black;
        font-size: 3rem;
      }

      h3 {
        color: var(--accentprimary);
      }

      h4 {
        color: var(--accentsecondary);
      }
    .purple {
          color: var(--accenttertiary);
      }
      h5 {
        color: var(--accenttertiary);
      }
       .coral {
          color: var(--accenttertiary);
      }
      h6 {
        color: var(--accentquaternary);
      }
      
      .lime {
          color: var(--accentquaternary);
      }

      a {

        color: var(--foregroundspecial);
        text-decoration-thickness: 1px;
        text-underline-offset:3px;
        text-decoration-line: underline;
        text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent);
        text-decoration-style: dotted;
      }

      .module-border-wrap {
        background: linear-gradient(
          to bottom,
          var(--accent),
          var(--background)
        );
        padding: 2px;
      }

      .module {
        background: var(--background);
        color: var(--foreground);
        padding: 1rem;
      }

      button {
        position: relative;
        font: inherit;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        background: transparent;

        transition: background 0.15s linear;
        appearance: none;
        cursor: pointer;
        outline: none;
      }
      button.active {
        position: relative;
        font: inherit;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        background: transparent;
        color: var(--foreground);
        border-right: 4px solid var(--foreground);
        border-left: 4px solid var(--foreground);
        border-top: 4px solid var(--foreground);
        transition: background 0.15s linear;
        appearance: none;
        cursor: crosshair;
      }

      /* button {
        position: relative;
        font: inherit;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        background: transparent;
        color: var(--accent);
        border: 4px solid var(--accent);
        border-radius: var(--radius);
        transition: background 0.15s linear;
        appearance: none;
        cursor: pointer;
        outline: none;
      } */

      button .btn-accent {
        color: var(--accent);
        border: 4px solid var(--accent);
      }

      button:hover {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
      }

      button:focus-visible,
      a:focus-visible {
        outline: 1px solid var(--accent);
        outline-offset: 2px;
      }

      fieldset {
        border: 2px solid var(--foreground);
        border-radius: calc(var(--radius) * 1.6);
      }

      input,
      textarea,
      select {
        background: transparent;
        color: var(--foreground);
        border: 1px solid var(--foreground);
        border-radius: var(--radius);
      }

      input:focus-visible,
      input:active,
      textarea:focus-visible,
      textarea:active,
      select:focus-visible,
      select:active {
        border-color: var(--accent);
        outline: 1px solid var(--accent);
        outline-offset: 2px;
      }

      input:active,
      textarea:active,
      select:active {
        box-shadow: none;
      }

      select {
        background-image: linear-gradient(
            45deg,
            transparent 50%,
            var(--foreground) 50%
          ),
          linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
        background-position: calc(100% - 18px), calc(100% - 14px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: 40px;
      }

      select option {
        background: var(--background);
      }

      input[type='checkbox'],
      input[type='radio'] {
        box-shadow: inset 0 0 0 3px var(--background);
      }

      input[type='radio'] {
        border-radius: 5px;
      }

      input[type='checkbox']:checked,
      input[type='radio']:checked {
        background: var(--accent);
      }

      img {
        display: block;
        max-width: 100%;
        padding: 8px;
        overflow: hidden;
        margin: 0;
      }

      figure img,
      figure video {
        margin-bottom: 0;
      }

      figure figcaption {
        color: var(--background);
        text-align: center;
        font-size: 1em;
        font-weight: normal;
        margin-top: -8px;
        border-radius: 0 0 var(--radius) var(--radius);
      }

      ul,
      ol {
        margin-left: 4ch;
        padding: 0;
      }

      ul ul,
      ul ol,
      ol ul,
      ol ol {
        margin-top: 0;
      }

      li::marker {
        color: var(--accent);
      }

      ul li,
      ol li {
        position: relative;
      }

      code,
      kbd {
        font-family: 'Fira Code', 'JetBrains Mono', Monaco, Consolas,
          Ubuntu Mono, monospace !important;
        font-feature-settings: normal;
        background: color-mix(in srgb, var(--foreground) 5%, transparent);
        color: color-mix(in srgb, var(--foreground) 5%, var(--accent));
        padding: 0 6px;
        margin: 0 2px;
        font-size: 0.95em;
      }

      code {
        border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
      }

      kbd {
        border-top: 1px solid
          color-mix(in srgb, var(--accentprimary) 25%, transparent);
        border-left: 1px solid var(--accentspecial);
        border-right: 1px solid var(--accentsecondary);
        border-bottom: 4px solid var(--accentsecondary);
        border-radius: 4px;
      }

      code code {
        background: transparent;
        padding: 0;
        margin: 0;
      }

      pre {
        tab-size: 4;
        background: color-mix(
          in srgb,
          var(--foreground) 5%,
          transparent
        ) !important;
        color: color-mix(in srgb, var(--foreground) 5%, var(--accentspecial));
        padding: 16px 8px;
        font-size: 0.95em !important;
        overflow: auto;
        border-radius: var(--radius);
        border: 1px solid
          color-mix(in srgb, var(--accentsecondary) 25%, transparent);
      }

      pre code {
        background: none !important;
        margin: 0;
        padding: 0;
        font-size: inherit;
        border: none;
      }

      sup {
        line-height: 0;
      }

      abbr {
        position: relative;
        text-decoration-style: wavy;
        text-decoration-color: var(--accentspecial);
        cursor: help;
      }

      sub {
        bottom: -0.25em;
        color: var(--accentspecial);
      }

      sup {
        top: -0.25em;
        color: var(--foregroundspecial);
      }

      mark {
        background: color-mix(in srgb, var(--accent) 45%, transparent);
        color: var(--foregroundspecial);
      }

      blockquote {
        position: relative;
        border-top: 1px solid var(--accent);
        border-bottom: 1px solid var(--accent);
        margin: 0;
        padding: 20px;
      }

      blockquote:before {
        content: '>';
        display: block;
        position: absolute;
        left: 0;
        color: var(--accentprimary);
      }

      blockquote p {
        color: var(--accentprimary);
      }

      blockquote p:first-child {
        margin-top: 0;
      }

      blockquote p:last-child {
        margin-bottom: 0;
      }

      table {
        table-layout: auto;
        border-collapse: collapse;
        margin: 0;
      }

      table,
      th,
      td {
        border: 2px solid var(--foreground);
        padding: 8px;
      }

      th {
        border-style: solid;
        color: var(--foreground);
      }

      hr {
        width: 100%;
        border: none;
        background: var(--accent);
        height: 2px;
      }

      /* Bold elements */

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      b,
      strong,
      th,
      button {
        font-weight: 600;
      }