/* Font Faces */
@font-face {
  font-family: 'Libre Caslon';
  src: url('/font/LibreCaslonText[wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

@font-face {
  font-family: 'Libre Caslon';
  src: url('/font/LibreCaslonText-Italic[wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('/font/LibreCaslonCondensed[wdth,wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('/font/LibreCaslonCondensed-Italic[wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Fallback Fonts */
@font-face {
  font-family: 'Fallback Display';
  src: local('Times New Roman');
  font-weight: 400 700;
  size-adjust: 95%;
}

@font-face {
  font-family: 'Fallback Body';
  src: local('Times New Roman');
  font-weight: 300;
  size-adjust: 119.2%;
  ascent-override: 80%;
}


/* Theme */
:root {
  --primary-color: #0000f5;
  --background: #fff;
  --foreground: #000019;
  --foreground-emphasis: #191919;
  --selection-color: #ccc;
  --font-display: 'Libre Caslon Condensed', 'Fallback Display', serif;
  --font-body: 'Libre Caslon', 'Fallback Body', serif;
  --font-windows: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* There's an issue with Helvetica Neue Bold's glyph sizing that wrecks the grid. */
  --font-windows-bold: Helvetica, Arial, sans-serif;
  --root-font-size: 1rem;
  --base-grid: 1.5625rem;
  --radius: 4px;
  --border-width: 1px;
  --outer-radius: calc(var(--radius) - var(--border-width));
}

::selection {
  background-color: var(--selection-color);
  -webkit-text-stroke: 0;
  color: var(--primary-color);
}

/* CSS Reset */
* {margin: 0; padding: 0; box-sizing: border-box}
html { scroll-behavior: smooth }

/* Base Elements */
h1,h2,h3,h4 { font-weight: 300 }
li,p {
  hyphens: auto;
  text-align: justify;
  transform: translateY(7px);
}
strong {
  font-family: var(--font-body);
  color: var(--foreground-emphasis);
  font-weight: 700;
  line-height: 1;
}
p { margin-bottom: var(--base-grid); }
a[role="button"],
button {
  border: var(--border-width) solid var(--foreground);
  border-radius: var(--radius);
  background-color: var(--background);
  color: var(--foreground);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--base-grid)
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  transition: 0.1s all linear;
  padding: calc(0.5lh - var(--border-width)) 1lh;
  margin-bottom: 1lh;

  &:active {
    background-color: var(--foreground);
    color: var(--background);
  }

  label {
    line-height: var(--base-grid);
    cursor: pointer;
  }
}

.textured {
  h2, p, ul {
    paint-order: stroke fill;
  }
}

/* The Contents */
body {
  font-family: var(--font-body);
  font-synthesis: none;
  font-variant-emoji: text;
  color: var(--foreground);
  background: var(--primary-color);
  font-size: var(--root-font-size);
  line-height: var(--base-grid);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;


/* Header */

  & > header {
    color: #fff;
    display: flex;
    background: var(--primary-color);
    font-family: var(--font-display);
    padding: var(--base-grid);
    position: relative;

    h1 {
      font-size: 1.3125rem;
      flex: 0 0 auto;
      line-height: var(--base-grid);

      @media (max-width: 600px) {
        font-size: 1rem;
      }
    }

    p {
      font-size: 4.5rem;
      font-style: italic;
      line-height: 4.6875rem;
      margin: var(--base-grid) auto var(--base-grid);
      transform: translateY(12px);
      white-space: pre;
      width: min-content;

      @media (max-width: 800px) {
        font-size: 3rem;
        line-height: 3.125rem;
        margin: 1lh auto var(--base-grid);
        transform: translateY(7px)
      }

      @media (max-width: 600px) {
        font-size: 2rem;
        margin: 0.75lh auto 0.25lh;
        transform: translateY(1px)
      }

      @media (max-width: 360px) {
        font-size: 1rem;
        font-size: var(--base-grid);
        transform: translateY(3px);
      }
    }

    a {
      color: #fff;
      display: block;
      margin-top: 5px;
      text-decoration: none;
      width: min-content;
      word-spacing: 100vw;

      @media (max-width: 600px) {
        margin-top: 0;
        transform: translateY(6px);
      }
    }

    /* Animation */

    canvas {
      background: var(--primary-color);
      display: block;
      height: 75px;
      width: 75px;

      @media (max-width: 600px) {
        height: 50px;
        width: 50px;
      }
    }
  }
}
/* The Main Body */

main {
  flex-grow: 1;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  h2 {
    font-size: 1.5rem;
    line-height: 3.125rem;
    font-family: var(--font-display);
    font-weight: 500;
    transform: translateY(-8px);
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 500;
    transform: translateY(2px);
    margin: 2lh 0 1lh;
  }

  h4 {
    font-weight: 500;
    font-size: 1rem;
    line-height: var(--base-grid);
    transform: translateY(4px);
    margin: 1lh 0;
  }

  ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: var(--base-grid);
  }
  li {
    position: relative;
    padding-left: var(--base-grid);
    
    &::before {
      content: "✳\FE0E";
      width: var(--base-grid);
      display: inline-block;
      margin-left: calc(-1 * var(--base-grid));
      text-align: left;
    }
  }
}

#introduction  {

  padding: var(--base-grid);

  .content {
    column-gap: var(--base-grid);
    width: 100%;
    max-width: calc(35 * var(--base-grid));
    background: var(--background);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.columns {
  column-gap: calc(2 * var(--base-grid));
  row-gap: calc(3 * var(--base-grid));
  padding: calc(2 * var(--base-grid));
  width: 100%;
  max-width: calc(83 * var(--base-grid));
  background: var(--background);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  article {
    flex: 1;
    min-width: calc(13 * var(--base-grid));
    max-width: calc(25 * var(--base-grid));

    ul {
      margin-bottom: 0;
    }

    @media (max-width: 360px) {
      min-width: calc(100vw - 2 * var(--base-grid));
    }
  }

}

.darktexture {
  background-image: url('/img/darkgrid.svg');
}

.lighttexture {
  background-image: url('/img/lightgrid.svg');
}

footer {

  color: #fff;
  padding: calc(2 * var(--base-grid));

  ul {
    list-style-position: inside;
  }
  li {
    float: left;
    list-style-position: inside;
    padding: 0 var(--base-grid);
    text-align: left;

    @media (max-width: 360px) {
      padding: 0;
      float: none;
      text-align: left;
    }
  }

  a {
    color: #fff;
    display: inline-block;
    padding: 0 0 calc(1lh - 5px);
    margin-bottom: 5px;
  }

  @media (max-width: 360px) {
    padding: var(--base-grid);
  }
}

#text  {
  max-width: calc(35 * var(--base-grid));
  padding: var(--base-grid);
}

/* The Floating Window */
.cutoff-corners {
  background-color: #fff;
  border: var(--border-width) solid #000;
  border-radius: var(--radius);
}

.window {

  font-family: var(--font-windows);

  .titlebar {
    border-bottom: var(--border-width) solid #000;
    font-family: var(--font-windows-bold);
    padding: calc(6 * var(--border-width)) calc(8 * var(--border-width)) calc(6 * var(--border-width)) ;
    line-height: calc(9 * var(--border-width));
    text-align: center;
    font-weight: 700;
    background: repeating-linear-gradient(
      0deg,
      black,
      black var(--border-width),
      white var(--border-width),
      white calc(var(--border-width) * 2)
    );
    background-clip: content-box;
    background-origin: content-box;
    list-style: none;

    &::marker {
      content: "";
    }

    .label {
      background-color: #fff;
      padding: var(--border-width) calc(5 * var(--border-width));
      line-height: calc(12 * var(--border-width));
      height: calc(12 * var(--border-width));
      display: inline-block;
    }
  }

  .content {
    padding: calc(var(--base-grid) - 1px) var(--base-grid);
  }

  hr.divider {
    margin-left: -6px;
    margin-right: -6px;
  }
}

aside {
  background: var(--background)
}