/* Patterns by https://www.cssportal.com/css-pattern-generator/  */

:root {
  --path-wrapper: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
  --path-header: polygon(
    0 0,
    100% 0,
    100% calc(100% - 2rem),
    90% 100%,
    10% 100%,
    0 calc(100% - 2rem)
  );
  --path-main: polygon(
    10% 0%,
    90% 0%,
    100% 2rem,
    100% calc(100% - 2rem),
    90% 100%,
    10% 100%,
    0% calc(100% - 2rem),
    0% 2rem
  );
  --path-footer: polygon(10% 0, 90% 0, 100% 2rem, 100% 100%, 0 100%, 0 2rem);
  --path-side: polygon(
    2rem 0%,
    calc(100% - 2rem) 0%,
    100% 2rem,
    100% calc(100% - 2rem),
    calc(100% - 2rem) 100%,
    2rem 100%,
    0% calc(100% - 2rem),
    0% 2rem
  );

  --grad-panel: linear-gradient(
      90deg,
      var(--bg1) -10%,
      transparent 15%,
      transparent 85%,
      var(--bg1) 110%
    ),
    repeating-linear-gradient(
      0deg,
      var(--bg2),
      var(--bg1) 3px,
      transparent 3px,
      transparent
    );

  --bg1: #000;
  --bg2: #001427;
  --bg3: #00004b;
  --accent: #48edff;
  --text: #cff2fa;
  --outline: color-mix(in srgb, var(--accent), transparent 50%);
}

* {
  box-sizing: border-box;
}

::selection {
  background-color: color-mix(in srgb, var(--outline), transparent 60%);
}

img {
  max-width: 100%;
  height: auto;
}

:is(h1, h2, h3, h4, h5, h6) {
  color: var(--accent);
  display: flex;
  align-items: center;
  column-gap: 0.5rem;

  &::before {
    content: "§";
  }
}

a {
  color: var(--accent);
  text-decoration-style: dotted;

  &:hover {
    text-shadow: 0 0 9px var(--text);
  }

  &:focus-visible {
    outline: 4px solid;
  }
}

hr {
  border: 0;
  border-top: 1px solid var(--accent);
  margin: 1.5rem 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg1);
  background-image: linear-gradient(
      90deg,
      var(--bg1) 0%,
      transparent 50%,
      var(--bg1) 100%
    ),
    radial-gradient(var(--outline) 2px, transparent 2px);
  background-size: cover, 20px 20px;
  background-color: var(--bg1);
  color: var(--text);
  font-family: monospace;
}

.wrapper-shadow {
  filter: drop-shadow(0px 0px 4px var(--outline));
}

.wrapper {
  background-color: var(--outline);
  width: 80svw;
  max-width: 1600px;
  height: 90svh;
  clip-path: var(--path-wrapper);
  transform: translateZ(0); /*chrome bleed fix */
  position: relative;
  box-shadow: 0 0 20px 3px var(--bg1);

  .wrapper-inner {
    clip-path: var(--path-wrapper);
    transform: translateZ(0); /*chrome bleed fix */
    position: absolute;
    inset: 1px;
    background-color: var(--bg1);
    display: grid;
    grid-template-columns: 1fr minmax(0, min(40vw, 900px)) 1fr;
    grid-template-rows: auto 1fr auto;
    row-gap: 1rem;
    background: linear-gradient(
        0deg,
        var(--bg1) 20%,
        color-mix(in srgb, var(--bg1), transparent 30%) 40%,
        color-mix(in srgb, var(--bg1), transparent 70%) 50%,
        color-mix(in srgb, var(--bg1), transparent 30%) 60%,
        var(--bg1) 80%
      ),
      linear-gradient(135deg, #0000 20.5%, var(--outline) 0 29.5%, #0000 0) 0
        6px,
      linear-gradient(45deg, #0000 8%, var(--outline) 0 17%, #0000 0 58%) 12px 0,
      linear-gradient(
        135deg,
        #0000 8%,
        var(--outline) 0 17%,
        #0000 0 58%,
        var(--outline) 0 67%,
        #0000 0
      ),
      linear-gradient(
        45deg,
        #0000 8%,
        var(--outline) 0 17%,
        #0000 0 58%,
        var(--outline) 0 67%,
        #0000 0 83%,
        var(--outline) 0 92%,
        #0000 0
      ),
      var(--bg1);
    background-size: cover, 24px 24px, 24px 24px, 24px 24px, 24px 24px;

    .middle-backdrop {
      grid-column: 2 / span 1;
      grid-row: 1 / span 3;
      border-left: 1px solid var(--outline);
      border-right: 1px solid var(--outline);
      background-color: var(--bg1);
      background-image: linear-gradient(
          0deg,
          var(--bg1) 0%,
          transparent 20%,
          transparent 80%,
          var(--bg1) 100%
        ),
        radial-gradient(var(--outline) 1px, transparent 1px);
      background-size: cover, 5px 5px;
    }

    .top {
      grid-column: 2 / span 1;
      grid-row: 1 / span 1;
    }

    .middle {
      grid-column: 1 / span 3;
      grid-row: 2 / span 1;
      display: flex;
      overflow: hidden;
    }

    .bottom {
      grid-column: 2 / span 1;
      grid-row: 3 / span 1;
    }

    header {
      text-align: center;
      margin: 0 1rem;
      filter: drop-shadow(1px 0px 0px var(--outline))
        drop-shadow(-1px 0px 0px var(--outline))
        drop-shadow(0px 1px 0px var(--outline));

      .header-inner {
        background-color: var(--bg1);
        padding: 2rem 10%;
        clip-path: var(--path-header);
        background-image: var(--grad-panel);
        background-attachment: fixed;
        background-size: cover, 3px 3px;

        a.skip {
          position: absolute;
          left: -10000px;
          top: auto;
          width: 1px;
          height: 1px;
          overflow: hidden;
          display: inline-block;
          padding: 0.25rem;
          text-decoration: none;
          background-color: var(--bg1);
          color: var(--text);
        }

        a.skip:focus-visible {
          top: 0;
          left: 0;
          overflow: visible;
          height: auto;
          width: auto;
        }

        h1 {
          margin: 0;
          justify-content: center;
        }
      }
    }

    .nav-wrapper {
      flex: 1 1 0;
      display: flex;
      justify-content: center;

      nav {
        width: 60%;
        display: flex;
        align-items: center;
        filter: drop-shadow(1px 0px 0px var(--outline))
          drop-shadow(-1px 0px 0px var(--outline))
          drop-shadow(0px 1px 0px var(--outline))
          drop-shadow(0px -1px 0px var(--outline));

        ul {
          width: 100%;
          font-size: 1rem;
          list-style-type: none;
          padding: 2rem 0;
          margin: 0;
          background: var(--bg1);
          clip-path: var(--path-side);
          height: 100%;
          max-height: 30svh;
          overflow: auto;
          scrollbar-color: var(--accent) transparent;
          scrollbar-width: thin;
          background-image: var(--grad-panel);
          background-attachment: fixed;
          background-size: cover, 3px 3px;

          li {
            border-top: 1px solid var(--outline);
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            &:last-of-type {
              border-bottom: 1px solid var(--outline);
            }

            a {
              text-decoration: none;
              display: flex;
              align-items: center;
              column-gap: 1rem;
              width: 100%;

              &::before {
                content: "»";
                display: inline-block;
              }

              &.current::before {
                content: "+";
              }
            }
          }
        }
      }
    }

    .content-wrapper {
      flex: 0 0 min(40vw, 900px);
      overflow: hidden;
      display: flex;

      main {
        margin: 0 1rem;
        overflow: hidden;
        flex: 1;
        min-height: 0;
        display: flex;
        filter: drop-shadow(1px 0px 0px var(--outline))
          drop-shadow(-1px 0px 0px var(--outline))
          drop-shadow(0px 1px 0px var(--outline))
          drop-shadow(0px -1px 0px var(--outline));

        .main-inner {
          border-top: 1px solid var(--outline);
          border-bottom: 1px solid var(--outline);
          clip-path: var(--path-main);
          padding: 2rem 10%;
          overflow: auto;
          scrollbar-color: var(--accent) transparent;
          scrollbar-width: thin;
          background-color: var(--bg1);
          background-image: var(--grad-panel);
          background-attachment: fixed;
          background-size: cover, 3px 3px;
        }
      }
    }

    .side-wrapper {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .side {
        width: 60%;
        display: flex;
        align-items: center;
        filter: drop-shadow(1px 0px 0px var(--outline))
          drop-shadow(-1px 0px 0px var(--outline))
          drop-shadow(0px 1px 0px var(--outline))
          drop-shadow(0px -1px 0px var(--outline));

        .side-inner {
          width: 100%;
          padding: 2rem 1rem;
          background-color: var(--bg1);
          clip-path: var(--path-side);
          height: 100%;
          max-height: 30svh;
          overflow: auto;
          scrollbar-color: var(--accent) transparent;
          scrollbar-width: thin;
          background-image: var(--grad-panel);
          background-attachment: fixed;
          background-size: cover, 3px 3px;
        }
      }
    }

    footer {
      margin: 0 1rem;
      text-align: center;
      filter: drop-shadow(1px 0px 0px var(--outline))
        drop-shadow(-1px 0px 0px var(--outline))
        drop-shadow(0px -1px 0px var(--outline));

      .footer-inner {
        background-color: var(--bg1);
        padding: 2rem 10%;
        clip-path: var(--path-footer);
        background-image: var(--grad-panel);
        background-attachment: fixed;
        background-size: cover, 3px 3px;
      }
    }
  }
}

@media screen and (max-width: 1680px) {
  .wrapper {
    width: 90svw;

    .wrapper-inner {
      .nav-wrapper {
        nav {
          width: 70%;
        }
      }

      .side-wrapper {
        .side {
          width: 70%;
        }
      }
    }
  }
}

@media screen and (max-width: 1440px) {
  .wrapper {
    width: 95svw;

    .wrapper-inner {
      .nav-wrapper {
        nav {
          width: 80%;
        }
      }
      .side-wrapper {
        .side {
          width: 80%;
        }
      }
    }
  }
}

@media screen and (max-width: 991px) {
  body {
    display: block;
    background-image: linear-gradient(
        0deg,
        var(--bg1) 0%,
        transparent 50%,
        var(--bg1) 100%
      ),
      radial-gradient(var(--outline) 2px, transparent 2px);
    background-size: cover, 10px 10px;
    background-attachment: fixed;
  }

  .wrapper-shadow {
    filter: none;
  }

  .wrapper {
    height: auto;
    min-height: 95svh;
    width: 90svw;
    margin: 0 auto;
    clip-path: none;
    border-left: 1px solid var(--outline);
    border-right: 1px solid var(--outline);

    .wrapper-inner {
      padding: 1rem 0;
      grid-template-columns: 100%;
      position: static;
      clip-path: none;
      background-image: linear-gradient(
          0deg,
          var(--bg1) 0%,
          transparent 20%,
          transparent 80%,
          var(--bg1) 100%
        ),
        radial-gradient(var(--outline) 1px, transparent 1px);
      background-size: cover, 5px 5px;

      .middle-backdrop {
        display: none;
      }

      :is(.top, .middle, .bottom) {
        grid-column: 1 / span 1;
      }

      .middle {
        flex-direction: column;
        overflow: visible;
      }

      header {
        margin: 0 2rem;
        filter: drop-shadow(1px 0px 0px var(--outline))
          drop-shadow(-1px 0px 0px var(--outline))
          drop-shadow(0px 1px 0px var(--outline))
          drop-shadow(0px -1px 0px var(--outline));

        .header-inner {
          clip-path: var(--path-side);
          padding: 2rem 1rem;
        }
      }

      .nav-wrapper {
        padding: 0 2rem;

        nav {
          width: 100%;
        }
      }

      .content-wrapper {
        flex: unset;
        overflow: visible;

        main {
          overflow: visible;
          margin: 1rem 2rem;

          .main-inner {
            clip-path: var(--path-side);
            padding: 2rem 1rem;
            border: 0;
          }
        }
      }

      .nav-wrapper {
        padding: 0 2rem;

        nav {
          width: 100%;
        }
      }

      .side-wrapper {
        padding: 0 2rem;

        .side {
          width: 100%;
        }
      }

      footer {
        margin: 0 2rem;
        filter: drop-shadow(1px 0px 0px var(--outline))
          drop-shadow(-1px 0px 0px var(--outline))
          drop-shadow(0px 1px 0px var(--outline))
          drop-shadow(0px -1px 0px var(--outline));

        .footer-inner {
          clip-path: var(--path-side);
          padding: 2rem 1rem;
        }
      }
    }
  }
}

@media screen and (max-width: 575px) {
  .wrapper {
    width: 100%;
    border: 0;

    .wrapper-inner {
      :is(header, footer) {
        margin: 0 1rem;
      }

      :is(.nav-wrapper, .side-wrapper) {
        padding: 0 1rem;
      }

      .content-wrapper {
        main {
          margin: 1rem;
        }
      }
    }
  }
}