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

:root {
  --path-panel: polygon(
    0 0,
    65% 0%,
    70% 2.5rem,
    100% 2.5rem,
    100% 100%,
    35% 100%,
    30% calc(100% - 2.5rem),
    0% calc(100% - 2.5rem)
  );
  --path-panel-mobile: polygon(
    0 0,
    65% 0%,
    70% 1.5rem,
    100% 1.5rem,
    100% 100%,
    35% 100%,
    30% calc(100% - 1.5rem),
    0% calc(100% - 1.5rem)
  );
  --path-oct: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );

  --text: #333;
  --bg: #c0c0c0;
  --bg-pattern: #b9b9b9;
  --bg-grill: #cdcdcd;
  --bg-panel: #ddd;
  --bg-nav: #aaa;
  --nav-link: #fff;
  --border: #999;
}

* {
  box-sizing: border-box;
}

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

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

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

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

body {
  background-color: var(--bg);
  font-family: monospace;
  color: var(--text);
  display: flex;
  justify-content: center;

  background-image: linear-gradient(var(--bg-pattern) 1px, transparent 1px),
    linear-gradient(to right, var(--bg-pattern) 1px, transparent 1px);
  background-size: 10px 10px;
}

.grill {
  border: 1px solid var(--border);
  background-color: var(--bg-grill);
  position: relative;

  &::after {
    content: "";
    border: 1px solid var(--border);
    position: absolute;
    background-color: var(--bg-panel);
    box-shadow: inset 1px 1px 0px 0px var(--border);
  }
}

.wrapper {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 2rem;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  column-gap: 2rem;

  .wrapper-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    row-gap: 2rem;
    padding: 2rem 0;

    .oct {
      width: 6rem;
      height: 6rem;
      background-color: var(--border);
      clip-path: var(--path-oct);
      position: relative;

      &::before {
        content: "";
        position: absolute;
        inset: 1px;
        background-color: var(--bg-grill);
        clip-path: var(--path-oct);
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translatex(-50%) translatey(-50%);
        width: 2.5rem;
        height: 3rem;
        background-color: var(--bg-panel);
        border: 1px solid var(--border);
        box-shadow: inset 1px 1px 0px 0px var(--border);
      }
    }

    .grill {
      width: 5rem;
      height: calc(100svh - 20rem);

      &::after {
        inset: 5px;
        background-size: 8px 8px;
        background-image: repeating-linear-gradient(
          to bottom,
          var(--border),
          var(--border) 1px,
          transparent 1px,
          transparent
        );
      }
    }
  }

  .wrapper-inner {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: 100svh;
    padding: 2rem 1rem;
    max-width: 1000px;
    margin: 0 auto;

    --s: 10px;
    --c1: var(--bg);
    --c2: var(--bg-pattern);

    --c: #0000, var(--c1) 0.5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
    background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)), var(--g2),
      var(--g2) var(--s) calc(1.73 * var(--s)), var(--g3) var(--s) 0,
      var(--g3) 0 calc(1.73 * var(--s)) var(--c2);
    background-size: calc(2 * var(--s)) calc(3.46 * var(--s));
  }
}

header {
  flex-shrink: 0;
  text-align: center;
  
  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(--bg-panel);
    color: var(--text);
  }
  
  a.skip:focus-visible {
    top: 0;
    left: 0;
    overflow: visible;
    height: auto;
    width: auto;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    column-gap: 1rem;

    h1 {
      margin: 0;
    }

    .grill {
      flex-grow: 1;
      flex-shrink: 1;
      max-width: 400px;
      height: 2rem;
      position: relative;

      &::after {
        inset: 3px;
        background-size: 6px 6px;
        background-color: var(--bg-panel);
      }

      &:nth-of-type(1)::after {
        background-image: repeating-linear-gradient(
          to left,
          var(--border),
          var(--border) 1px,
          transparent 1px,
          transparent
        );
      }

      &:nth-of-type(2)::after {
        background-image: repeating-linear-gradient(
          to right,
          var(--border),
          var(--border) 1px,
          transparent 1px,
          transparent
        );
      }
    }
  }

  nav {
    border: 1px solid var(--border);
    background-color: var(--bg-nav);
    margin: 1rem 0;
    padding: 0.5rem;
    box-shadow: inset 1px 1px 0px 0px var(--border);

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      li {
        flex: 1 1 0;
        position: relative;

        a {
          color: var(--nav-link);
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          column-gap: 0.5rem;

          &:hover {
            color: #ccc;
          }

          &::before {
            content: "";
            border: 3px double var(--bg-panel);
            width: 0.3rem;
            height: 0.3rem;
            display: inline-block;
          }

          &.current {
            &::before {
              background-color: var(--text);
            }
          }
        }

        &::after {
          content: "/";
          position: absolute;
          right: 0;
        }

        &:last-of-type::after {
          display: none;
        }
      }
    }
  }
}

main {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  overflow: hidden;

  .panel-wrapper {
    position: relative;
    display: flex;

    .panel-backdrop {
      position: absolute;
      inset: -1px;
      background-color: var(--border);
      clip-path: var(--path-panel);
    }

    .panel {
      background-color: var(--bg-panel);
      background-image: repeating-linear-gradient(
        0deg,
        var(--bg-panel),
        var(--nav-link) 2px,
        transparent 2px,
        transparent
      );
      background-attachment: fixed;
      background-size: 2px 2px;
      overflow: auto;
      scrollbar-color: var(--border) transparent;
      scrollbar-width: thin;
      clip-path: var(--path-panel);
      transform: translateZ(0); /*chrome bleed fix */
      padding: 2.5rem 1rem;
      border: 1px solid var(--border);
      box-shadow: inset 1px 1px 0px 0px var(--border);

      a {
        color: inherit;
      }

      hr {
        border: 0;
        border-top: 1px solid;
      }
    }
  }
}

footer {
  flex-shrink: 0;
  text-align: center;
  margin-top: 1rem;
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: inset 1px 1px 0px 0px var(--border);
  padding: 0.5rem;
}

@media screen and (max-width: 1441px) {
  .wrapper {
    padding: 0 1rem;
    column-gap: 1rem;

    .wrapper-side {
      .oct {
        width: 5rem;
        height: 5rem;

        &::after {
          width: 1.5rem;
          height: 2rem;
        }
      }

      .grill {
        width: 4rem;
        height: calc(100svh - 18rem);
      }
    }
  }
}

@media screen and (max-width: 992px) {
  header {
    nav {
      ul {
        justify-content: space-around;

        li {
          flex: unset;

          &::after {
            display: none;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 769px) {
  .wrapper {
    padding: 0 0.5rem;
    column-gap: 0.5rem;

    .wrapper-inner {
      padding: 1rem;
    }

    .wrapper-side {
      .oct {
        width: 4rem;
        height: 4rem;

        &::after {
          width: 1rem;
          height: 1.5rem;
        }
      }

      .grill {
        width: 3rem;
        height: calc(100svh - 18rem);
      }
    }
  }

  header {
    nav {
      ul {
        flex-direction: column;
        align-items: start;
        row-gap: 0.5rem;
      }
    }
  }

  main {
    .panel-wrapper {
      .panel-backdrop,
      .panel {
        clip-path: var(--path-panel-mobile);
      }
    }
  }
}

@media screen and (max-width: 576px) {
  .wrapper {
    padding: 0;

    .wrapper-side {
      display: none;
    }

    .wrapper-inner {
      display: block;
    }
  }

  main {
    display: block;
  }
}

@media screen and (max-width: 400px) {
  .wrapper {
    .wrapper-inner {
      padding: 0.5rem;
    }
  }
}