/*
 * Reset
 * Adapted from Josh Comeau: https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
}

/* fonts + more accessible line-height */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  line-height: 1.5;
}

/* Improve media defaults */
img,
picture,
s video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-wrap: break-word;
}

/*
 * Base styles
*/

@font-face {
  font-family: "HEX Franklin";
  font-weight: 100 900;
  font-stretch: 80 140;
  src: url("../_assets/fonts/HEX_Franklin_v0.3_Variable.woff2") format("woff2");
}

:root {
  --element-shadow: rgba(0, 0, 0, 0.08) 0 0.2em 0.5em;
  --red: #ed4d47;
  --figure-padding: 1rem;
  --black: #11111a;
  --font-stack-base: "HEX Franklin", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

html {
  font-size: max(16px, min(2vw, 32px));
}

body {
  font-family: "HEX Franklin", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-family: var(--font-stack-base);
  font-feature-settings: "ss04";
}

.container {
  max-width: 1440px;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 801px) {

.container {
    padding-left: 3rem;
    padding-right: 3rem;
}
  }

/* Hide the site title */
#site-title {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/*
 * Media & figures
 */

.intrinsic {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  box-shadow: rgba(0, 0, 0, 0.08) 0 0.2em 0.5em;
  box-shadow: var(--element-shadow);
}

.intrinsic.ratio-1x1 {
    padding-bottom: 100%;
  }

.intrinsic iframe,.intrinsic img,.intrinsic video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.intrinsic img,.intrinsic video {
    -o-object-fit: cover;
       object-fit: cover;
  }

.media video {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0.2em 0.5em;
    box-shadow: var(--element-shadow);
  }

figure {
  margin-bottom: 2.2rem;
}

figure img {
  box-shadow: rgba(0, 0, 0, 0.08) 0 0.2em 0.5em;
  box-shadow: var(--element-shadow);
}

figure + figcaption {
  margin-top: 1.5rem;
}

.figures {
  display: flex;
  flex-wrap: wrap;
}

.figures figure {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
  }

@media (min-width: 801px) {

.figures figure {
      flex-basis: calc(50% - 1rem);
      flex-basis: calc(50% - var(--figure-padding));
  }
      .figures figure:nth-child(2n - 1) {
        margin-right: calc(1rem * 2);
        margin-right: calc(var(--figure-padding) * 2);
      }
    }

.figures figure.no-shadow * {
      box-shadow: none;
    }

.figures figure figcaption {
      margin-top: 1rem;
      font-size: max(18px, min(0.85rem, 22px));
      font-stretch: 80%;
    }

.figures figure figcaption a {
        font-weight: 700;
        font-style: normal;
      }

/*
 * Base typography
 */

p {
  margin-bottom: 1.4em;
}

p + figure,
p + .figures {
  margin-top: 2.2rem;
}

strong {
  font-weight: 700;
}

strong em,
em strong {
  /* font-family: "Duplicate Ionic", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.05em; */
  font-style: normal;
  background-color: #ed4d47;
  background-color: var(--red);
  color: white;
}

strong em:after {
    content: " ";
    display: inline-block;
    margin-right: 0.05em;
  }

em strong:after {
    content: " ";
    display: inline-block;
    margin-right: 0.05em;
  }

small {
  display: inline-block;
  font-size: max(14px, min(0.7em, 17px));
  opacity: 0.85;
  font-weight: 420;
  line-height: 1.7;
  letter-spacing: 0.015em;
  font-stretch: 97%;
}

/*
 * Projects
 */

.project-section {
  padding-top: 2.7rem;
  padding-bottom: 2.5rem;
  position: relative;
}

.project-section:after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 80px;
    bottom: 0;
    background-size: 2000px 100%;
    background-position: bottom left;
    z-index: 0;
  }

p.section-intro {
  font-size: 1.8rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-stretch: 75%;
  font-weight: 700;
}

#intro {
  padding-top: 4rem;
  padding-bottom: 1rem;
  background-color: rgb(254, 254, 254);
  color: #11111a;
  color: var(--black);
}

#intro p {
    font-size: 2.4rem;
    line-height: 1.2;
    font-stretch: 60%;
    font-weight: 700;
    margin-bottom: 1em;
  }

@media (min-width: 801px) {

#intro p {
      font-size: max(24px, min(9vh, 3rem));
  }
    }

#intro p strong {
      font-weight: 780;
    }

#intro p .pronouns {
      font-family: "HEX Franklin", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
      font-family: var(--font-stack-base);
      font-stretch: 60%;
      font-weight: 150;
      display: inline-block;
      position: relative;
      top: -0.04em;
      left: -0.03em;
      /* top: -1em;
      left: 0.1em; */
      margin-right: -0.03em;
      font-size: 0.6em;
      /* transform: rotate(-10deg); */
      /* font-size: 0.3em; */
      letter-spacing: -0.01em;
    }

#intro:after {
    background-image: url("../_assets/Texture-Yellow.png");
  }

#choicelab {
  background-color: #ffc600;
}

#choicelab p {
    font-size: max(18px, min(0.8rem, 24px));
    max-width: 730px;
    margin-left: auto;
    font-stretch: 101%;
    font-weight: 360;
    letter-spacing: -0.01em;
  }

@media (min-width: 801px) {
    #choicelab #choicelab-editor {
      flex-basis: calc(60% - 1rem);
      flex-basis: calc(60% - var(--figure-padding));
    }
    #choicelab #choicelab-preview {
      flex-basis: calc(40% - 1rem);
      flex-basis: calc(40% - var(--figure-padding));
    }
  }

#choicelab:after {
    background-image: url("../_assets/Texture-LightBlue.png");
  }

#advent {
  background-color: #a4e9ff;
  color: #00294e;
  font-stretch: 80%;
  font-weight: 380;
  letter-spacing: -0.005em;
}

#advent a {
    color: white;
  }

#advent strong {
    font-weight: 650;
  }

#advent p {
    font-size: max(18px, min(0.8rem, 24px));
    max-width: 730px;
    margin-right: auto;
    font-stretch: 101%;
    font-weight: 360;
    letter-spacing: -0.01em;
  }

#advent:after {
    background-image: url("../_assets/Texture-Red.png");
  }

#interactives {
  background-color: #ed4d47;
  background-color: var(--red);
  color: white;
}

#interactives a {
    color: white;
  }

#interactives strong em {
    background-color: white;
    color: #ed4d47;
    color: var(--red);
  }

#interactives:after {
    background-image: url("../_assets/Texture-Black.png");
  }

#music {
  background-color: #11111a;
  background-color: var(--black);
  color: white;
}

#music a {
    color: white;
  }

#music strong em {
    background-color: white;
    color: #11111a;
    color: var(--black);
  }

#music .album-art {
    max-width: 60%;
    min-width: 240px;
    width: 25vw;
  }

#footer {
  background-color: #11111a;
  background-color: var(--black);
  color: white;
  font-stretch: 70%;
  font-weight: 700;
  font-size: 2.55rem;
  line-height: 1;
  padding-top: 3rem;
  padding-bottom: 9rem;
}

#footer p {
    margin: 0;
  }

#footer strong em {
    background-color: transparent;
  }

#footer a {
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: background-color 0.4s ease, color 0.4s ease;
    background-color: #ed4d47;
    background-color: var(--red);
    color: white;
  }

#footer a:hover {
      background-color: rgb(0, 191, 191);
    }