:root {
  --hue-accent: tomato;
  --hue-on-accent: white;
  --hue-background: black;
  --hue-on-background: white;

  --grid: 8px;
  --grid-sm: calc(var(--grid) / 2);

  --font-size: calc(var(--grid) * 2);
  --font-size-lg: calc(var(--grid) * 3);
  --font-size-xl: calc(var(--grid) * 4);
}

:root,
:root > body {
  margin: 0;
  padding: 0;
}

:root {
  background-color: var(--hue-background);
  color: var(--hue-on-background);
  font-size: var(--font-size);
  font-family: sans-serif;
  text-transform: lowercase;

  > body {
    > header {
      align-items: center;
      display: flex;
      flex-direction: row;

      > h1 {
        align-items: center;
        align-self: flex-start;
        background-color: var(--hue-on-background);
        border-color: var(--hue-on-background);
        border-style: solid;
        border-width: 1px;
        color: var(--hue-background);
        display: flex;
        flex-direction: row;
        font-size: var(--font-size-xl);
        font-stretch: condensed;
        font-weight: 200;
        justify-content: center;
        letter-spacing: -5px;
        line-height: var(--font-size-xl);
        margin: 0;
        padding: 0 var(--grid) 0 0;
        text-transform: uppercase;
      }

      > h2 {
        flex: 1;
        font-size: var(--font-size-lg);
        font-stretch: expanded;
        font-weight: 400;
        margin: 0;
        padding: 0 var(--grid);
        text-transform: lowercase;
      }

      > aside {
        > a {
          border-radius: var(--grid-sm);
          padding: 0 var(--grid);
          transition: 100ms ease-in-out background-color;

          &:active,
          &:focus,
          &:hover {
            background-color: color-mix(in srgb, var(--hue-on-background) 10%, transparent);
            outline: none;
          }

          &:active:focus,
          &:active:hover {
            background-color: color-mix(in srgb, var(--hue-on-background) 15%, transparent);
          }
        }
      }
    }

    > main {
      &:focus {
        outline: solid 1px var(--hue-accent);
      }
    }
  }
}

a {
  color: var(--hue-accent);
  text-decoration: none;
}

code {
  font-family: monospace;
  font-weight: 700;
  letter-spacing: -1px;
}

p {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: 700;
}

b {
  color: var(--hue-accent);
}

s {
  text-decoration-line: line-through;
  text-transform: uppercase;
}

h3 {
  font-size: var(--font-size);
  font-stretch: expanded;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

:root > body > main > footer > p {
  font-size: 1px;
  text-align: center;
}

@media screen {
  :root {
    background: linear-gradient(45deg, var(--hue-background), color-mix(in srgb, var(--hue-accent) 25%, var(--hue-background)));

    > body {
      > header {
      }

      > main {
        > footer {
          align-items: center;
          color: color-mix(in srgb, var(--hue-on-background) 20%, transparent);
          display: flex;
          flex-direction: column;
          padding: var(--grid);
        }
      }

      code {
        background-color: color-mix(in srgb, var(--hue-accent) 90%, transparent);
        box-shadow: 2px 2px 0 var(--hue-background);
        color: var(--hue-on-accent);
        display: inline flex;
        margin: 0;
        padding: 0 var(--grid-sm);
        transform: rotate(-3deg);
      }

      .summary {
         font-size: var(--font-size-lg);
         font-stretch: extra-condensed;
         margin: var(--grid);
         padding: var(--grid);
         text-shadow: 1px 1px 0 var(--hue-background);

        b {
          color: inherit;
          font-weight: 700;
        }
      }

      h3 {
        font-size: var(--font-size-xl);
        font-stretch: extra-condensed;
        margin: 0 var(--grid);
        padding: var(--grid);
      }

      ul {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: var(--grid);

        > li {
          border-color: var(--hue-accent);
          border-style: dotted;
          border-width: 1px 0 0;
          list-style: none;
          margin: 0;
          padding: var(--grid);

          &:first-of-type {
            border-width: 0;
          }

          &:nth-of-type(even) {
            background-color: color-mix(in srgb, var(--hue-on-background) 5%, transparent);
          }
        }
      }

      s {
        color: color-mix(in srgb, var(--hue-on-background) 30%, transparent);
      }
    }
  }
}

@media print {
  :root {
    --font-size: 13px;
    --hue-accent: black;
    --hue-background: white;
    --hue-on-background: black;
  }

  :root {
    > body {
      .summary {
        margin: var(--font-size) 0;
      }

      main > footer {
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: var(--hue-on-background);
        margin: var(--font-size) 0 0;
      }
    }
  }
}

@media screen and (width < 800px) {
  :root > body > header {
    > h2 {
      text-align: end;
    }

    > aside {
    }
  }
}

@media screen and (800px <= width) {
  :root > body > main > section {
    &[class] {
      margin: var(--grid) auto;
      width: 75vw;
    }

    &.experience {
      background-color: color-mix(in srgb, var(--hue-on-background) 1%, transparent);
      border-color: color-mix(in srgb, var(--hue-on-background) 5%, transparent);
      border-radius: var(--grid);
      border-style: double;
      border-width: 3px;
      display: grid;
      grid-template-columns: 1fr 2fr;
      padding: var(--grid);

      > header {
        align-items: stretch;
        display: flex;
        flex-direction: column;

        > h3 {
          background: none;
          border: none;
          flex: 1;
          font-size: var(--font-size-xl);
          font-stretch: extra-condensed;
        }
      }

      > ul {
        padding: 0;
      }
    }
  }
}