@font-face {
  font-display: swap;
  font-family: Grandstander;
  font-weight: 100 900;
  src: url("/.fonts/Grandstander.woff2");
}

@font-face {
  font-display: swap;
  font-family: Hyperlegible;
  font-weight: 100 900;
  src: url("/.fonts/Hyperlegible.woff2");
}

@font-face {
  font-display: swap;
  font-family: Zarid;
  font-weight: 100 900;
  src: url("/.fonts/Zarid.woff2");
}

:root {
  --sans: Hyperlegible, sans-serif;
  --slab: Zarid, sans-serif;
  --script: Grandstander, sans-serif;

  color-scheme: light dark;

  --light: snow;
  --dark: #1B1D1F;

  --background: var(--light);
  --forground: var(--dark);

  @media (prefers-color-scheme: dark) {
    --background: var(--dark);
    --forground: var(--light);
  }

  font: 16px/1.33 var(--sans);

  @media (min-width: 48rem) { font-size: 17px; }
  @media (min-width: 51rem) { font-size: 18px; }
  @media (min-width: 54rem) { font-size: 19px; }
  @media (min-width: 57rem) { font-size: 20px; }
  @media (min-width: 60rem) { font-size: 21px; }
  @media (min-width: 63rem) { font-size: 22px; }
  @media (min-width: 66rem) { font-size: 23px; }
  @media (min-width: 69rem) { font-size: 24px; }
  @media (min-width: 72rem) { font-size: 25px; }
}

::selection { background-color: greenyellow; }

a {
  box-shadow: inset 0 -2px 0 deeppink;
  color: inherit;
  text-decoration: none;
  transition: all .2s;

  &:hover {
    box-shadow: inset 0 -1em 0 color(from deeppink srgb r g b / .2);
  }

  &[rel="external"] {
    box-shadow: inset 0 -2px 0 deepskyblue;

    &:hover {
      box-shadow: inset 0 -1em 0 color(from deepskyblue srgb r g b / .2);
    }
  }
}

article {
  margin: auto;
  padding: 0 2rem;
  width: 22.5rem;
}

aside {
  color: lightslategray;
  font-family: var(--script);
  font-size: .7rem;
  font-weight: 300;
  float: left;
  margin-left: -11rem;
  text-align: right;
  transform: rotate(-3deg);
  width: 8rem;

  @media (max-width: 47rem) { display: none; }

  &.pointing::after {
    content: "☞";
    display: block;
    float: right;
    font-size: 1.25rem;
    margin-right: -1.5em;
    transform: rotate(3deg);
    width: 1em;
  }

  &.right {
    float: right;
    margin-right: -11rem;
    text-align: left;
    transform: rotate(3deg);

    &.pointing {
      &::before {
        content: "☜";
        display: block;
        float: left;
        font-size: 1.25rem;
        margin-left: -1.5em;
        transform: rotate(-3deg);
        width: 1em;
      }

      &::after { content: none; }
    }
  }
}

blockquote {
  border-color: cadetblue;
  border-style: solid;
  border-width: 0 0 0 3px;
  color: color(from var(--forground) srgb r g b / 0.9);
  margin: 0;
  padding: 0 .8rem 0 calc(.8rem - 3px);

  &::before {
    color: darkslategray;
    content: "“";
    display: block;
    font-size: 3rem;
    position: absolute;
    margin: -.5rem 0 0 -2.5rem;
  }

  p {
    font-style: oblique;
    font-weight: 400;
  }
}

body {
  background-color: white;
  background-color: light-dark(white, black);
  margin: 0;
}

dd { margin: 0 0 1rem 0; }

dt {
  font-weight: 500;
  margin-bottom: .3rem;
}

em { font-style: oblique; }

footer {
  color: slategray;
  color: light-dark(slategray, darkslategray);
  font-family: var(--slab);
  min-width: 24.5rem;
  padding: 1rem;

  a {
    box-shadow: none !important;
    color: cadetblue;
    font-weight: 500;

    &:hover { text-decoration: underline; }

    &[href="https://alternator.sh"] { color: firebrick; }
  }

  span {
    float: right;
  }
}

h1, h2 {
  font-family: var(--slab);
  margin: 2em 0 1rem 0;
}

h1 {
  color: var(--forground);
  font-size: 2rem;
  font-weight: 900;

  &::before {
    display: inline-block;
    padding-right: .4rem;
    margin-left: -2.4rem;
    text-align: right;
    width: 2rem;

    @media (max-width: 28rem) { display: none; }
  }

  + p {
    color: color(from var(--forground) srgb r g b / .95);
    font-size: 1.25rem;
    font-weight: 300;

    strong { font-weight: 600; }
  }
}

h2 {
  color: cadetblue;
  color: light-dark(maroon, cadetblue);
  font-size: 1.5rem;
  font-weight: 700;

  &::before {
    color: darkslategray;
    content: "#";
    display: inline-block;
    font-weight: 400;
    margin-left: -1.6rem;
    margin-right: .6rem;
    text-align: right;
    width: 1rem;
  }
}

h3 {
  color: color(from var(--forground) srgb r g b / 0.95);
  font-size: 1rem;
  font-variant: all-small-caps;
  font-weight: 600;
  margin: 1rem 0;
}

h4 {
  color: var(--dark);
  margin: 2rem 0 1rem 0;

  & strong {
    background-color: orangered;
    color: var(--light);
    display: inline-block;
    font-weight: 600;
    margin-left: -1rem;
    padding: 0 .25rem;
    transform: rotate(-1deg);
  }

  & em {
    background-color: yellow;
    display: block;
    float: right;
    font-style: normal;
    font-weight: 500;
    font-size: .8rem;
    margin-right: -.25rem;
    margin-top: .3em;
    padding: 0 .25rem;
    /* transform: rotate(3deg); */
  }
}

header {
  font-family: var(--slab);
  min-width: 24.5rem;
  padding: 1rem;

  a {
    box-shadow: none;

    &:hover {
      box-shadow: none;
      text-decoration: underline;
    }

    &:first-child {
      color: orangered;
      font-weight: 550;

      &::before {
        content: "🚀";
        display: inline-block;
        margin-right: .25em;
        text-decoration: none;
        transition: .2s ease-in-out;
      }

      &:hover::before { transform: scale(1.2); }
    }

    &:last-child {
      background-color: rebeccapurple;
      border-radius: 1px;
      color: var(--light);
      float: right;
      padding: 0 .3rem;
    }
  }

  span {
    color: lightslategray;
    color: light-dark(lightslategray, cadetblue);

    @media (max-width: 35rem) { display: none; }

    &::before {
      color: gainsboro;
      color: light-dark(gainsboro, darkslategray);
      content: "/";
    }
  }
}

hr {
  border: none;
  border-color: gainsboro;
  border-color: light-dark(gainsboro, darkslategray);
  border-style: dashed;
  border-width: 1px 0 0 0;
  margin: 2rem 1rem;
}

img {
  margin-bottom: 1rem;
  margin-left: -1.5rem;
  width: calc(100% + 3rem);

  @media (max-width: 26.5rem) {
    margin-left: -2rem;
    width: calc(100% + 4rem);
  }
}

li::marker { color: cadetblue; }

main {
  background-color: var(--background);
  border-color: gainsboro;
  border-color: light-dark(gainsboro, darkslategray);
  border-style: dashed;
  border-width: 1px 0;
  color: color(from var(--forground) srgb r g b / 0.9);
  font-weight: 300;
  margin: auto;
  padding: 2rem 0;
  width: 100%;

  h1:first-child { margin-top: 0; }
}

mark {
  background-color: yellow;
  color: var(--dark);
  font-weight: 500;
}

p, ol, ul {
  padding-inline-start: 0;
  margin: 0 0 1rem 0;
}

summary {
  font-weight: 500;
  margin-bottom: .5rem;
  margin-left: -.8rem;

  &:hover { cursor: pointer; }
}

summary::-webkit-details-marker,
summary::marker {
  color: cadetblue;
}

.stripe-btn {
  margin-left: -.8rem;

  a:nth-child(1) {
    background: rebeccapurple;
    background: linear-gradient(-15deg, indigo 0%, rebeccapurple 100%);
    border: 1px solid rebeccapurple;
    border-radius: 1rem;
    box-shadow: none;
    color: var(--light);
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1rem;
    padding: .4rem .8rem .3rem .8rem;

    &:hover { transform: scale(1.05); }
  }

  a:nth-child(2) { font-weight: 600; }
}

#previous-clients {
  font-size: 0;
  margin-left: -2rem;
  width: calc(100% + 4rem);

  picture {
    display: inline-block;
    height: 3rem;
    position: relative;
    width: 25%;

    &:nth-child(7n-2) { margin-left: 12.5%; }

    img {
      inset: 0;
      margin: auto;
      position: absolute;

      @media (prefers-color-scheme: dark) {
        filter: grayscale(1) invert(1);
      }
    }
  }
}