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

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

@font-face {
  font-family: 'Ronzino';
  src: url('/font/Ronzino-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ronzino';
  src: url('/font/Ronzino-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Theme */
:root {
  --primary-color: #0000f5;
  --background: #fff;
  --foreground: #000019;
  --foreground-emphasis: #191919;
  --selection-color: #ccc;
  --font-libre-caslon: 'Libre Caslon', 'Times New Roman', 'Georgia', serif;
  --font-ronzino: 'Ronzino', 'Arial', 'Helvetica', sans-serif;
  --root-font-size: 1rem;
  --base-grid: 1.25rem;
  --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(5px);
}
strong {
  color: var(--foreground-emphasis);
  font-weight: 700;
}
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-ronzino);
  font-size: 1rem;
  line-height: 1.25;
  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: 1.25;
    cursor: pointer;
  }
}

.textured {
  h2, p, ul {
    -webkit-text-stroke: calc(4 * var(--border-width)) var(--background);
    paint-order: stroke fill;
  }
}

/* The Contents */
body {
  font-family: var(--font-ronzino);
  color: var(--foreground);
  background: var(--primary-color);
  font-size: var(--root-font-size);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  

/* Header */

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

    h1 {
      font-size: 2rem;
      flex: 0 0 auto;
      line-height: 1.25;

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

    p {
      font-size: 4.5rem;
      font-style: italic;
      line-height: 5rem;
      margin: 0.5lh auto 0.25lh;
      transform: translateY(-5px);
      white-space: pre;
      width: min-content;

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

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

      @media (max-width: 360px) {
        font-size: 1rem;
        margin: 2lh auto 0;
        transform: translateY(4px);
      }
    }

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

      @media (max-width: 600px) {
        margin-top: 4px
      }
    }

    /* Animation */

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

      @media (max-width: 600px) {
        height: 40px;
        width: 40px;
      }
    }
  }
}
/* 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: 1.6667;
    font-family: var(--font-libre-caslon);
    font-weight: 500;
    transform: translateY(-8px);
  }

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

#introduction  {

  padding: calc(1 * 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;
  }
}

#services {
  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;

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

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

}

#skills {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="2" y="2" width="1" height="1" fill="black"/></svg>');
  padding: calc(2 * var(--base-grid));
  width: 100%;
  display: flex;
  column-gap: calc(4 * var(--base-grid));
  row-gap: calc(3 * var(--base-grid));
  flex-wrap: wrap;

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

  section {
    flex: 1;
    min-width: calc(17 * var(--base-grid));

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

#testimonials {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="3" y="3" width="1" height="1" fill="black"/></svg>');
  padding: calc(2 * var(--base-grid));
  width: 100%;
  display: flex;
  column-gap: calc(4 * var(--base-grid));
  row-gap: calc(3 * var(--base-grid));
  flex-wrap: wrap;

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

  section {
    flex: 1;
    min-width: calc(17 * var(--base-grid));

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

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

.window {

  .titlebar {
    border-bottom: var(--border-width) solid #000;
    padding: calc(3 * var(--border-width)) calc(8 * 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: var(--base-grid);
  }

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

aside {
  background: var(--background)
}