@font-face {
  font-family: "Nocturno Stencil VF";
  font-style: normal;
  font-variation-settings: "stcl" 1000, "wght" 1000;
  src: local("Nocturno Stencil VF"), url(../fonts/NocturnoStencilL-VF.woff2) format("woff2");
}
@font-face {
  font-family: "IBMPlexSansVar-Roman";
  font-style: normal;
  src: local("IBMPlexSansVar-Roman"), url(../fonts/IBMPlexSansVar-Roman.ttf) format("truetype");
}
:root {
  --color-text: #2f313c;
  --color-neutral: #949494;
  --color-yellow: #ffd177;
  --color-highlight: #bb1f00;
  --ff-default: "IBMPlexSansVar-Roman", Helvetica, Arial, sans-serif;
  --ff-alt: "Nocturno Stencil VF", "Adobe NotDef";
  --txt-default: #2f313c;
  --txt-alt: #22222c9d;
  --link-default: #c0002a;
  --link-alt: #a62339;
  --fs-default: 1rem;
  --fs-small: .889rem;
  --fs-medium: 1.424rem;
  --fs-large: 2.027rem;
  /* Major-third typographic scale 
  --font-size-small: .8rem;
  --font-size-medium: 1.953rem;
  --font-size-large: 3.052rem;
  */
  /* Perfect fourth typographic scale 
  --font-size-small: .75rem;
  --font-size-medium: 1.777rem;
  --font-size-large: 3.157rem;
  */
  /* Perfect fifth typographic scale 
  --font-size-small: .667rem;
  --font-size-medium: 2.25rem;
  --font-size-large: 5.063rem;
  */
  --fw-default: 400;
  --fw-alt: 700;
  --bold-weight: 700;
  --lineheight-default: 1.5;
  --lineheight-alt: 1.3;
  --letter-spacing: 0.06em;
  --letter-spacing-small: 0.03em;
  --letter-spacing-negative: -0.03em;
  --color-primary: #a62339;
  --color-accent: #1b7ca6;
  --surface-default: #f7faff;
  --surface-alt: #D2E0E1;
  --base-default: #2f313c;
  --base-alt: #1b7ca6;
  --border-default: rgba(166,166,166,.3);
  --border-alt: #1b7492;
  --border-radius-default: .25rem;
  --border-stroke: 1px;
  --duration-default: .25s;
  --duration-alt: .5s;
  --spacing-default: 1.5rem;
  --spacing-small: .75rem;
  --spacing-large: 3rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul[class],
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
  display: block;
}

article > * + * {
  margin-top: var(--space-l);
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
main > *, header.nav, footer {
  max-width: var(--max-width);
  margin-right: auto;
  margin-left: auto;
  max-width: 95%;
}
@media (min-width: 50rem) {
  main > *, header.nav, footer {
    max-width: 840px;
  }
}

.home h2 {
  font-family: var(--ff-default);
  font-variation-settings: "wght" 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-negative);
  margin: 0;
}

@media (min-width: 45rem) {
  .threecol {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 45rem) {
  .threecol > * {
    flex: 0 1 calc(33% - 1rem);
  }
}
.threecol > div p:last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 45rem) {
  .twocol {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 45rem) {
  .twocol > * {
    flex: 0 1 calc(50% - 1rem);
  }
}
.twocol > div p:last-child {
  margin-bottom: 0 !important;
}

article header {
  margin-top: var(--spacing-default);
  margin-bottom: var(--spacing-default);
}

@media (min-width: 45rem) {
  .contain {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 2rem;
  }
  .contain h3, .contain h2 {
    margin-top: var(--spacing-small);
    position: sticky;
  }
  .contain > div {
    margin-top: var(--spacing-small);
  }
}

.expanded, .dot-bg.expanded {
  position: relative;
  max-width: 110%;
  border-radius: 0;
  left: -5%;
}
@media (min-width: 50rem) {
  .expanded, .dot-bg.expanded {
    border-radius: 0.25rem;
  }
}

.expanded:first-child {
  margin: var(--spacing-default) 0 var(--spacing-large) 0;
}
@media (min-width: 50rem) {
  .expanded:first-child {
    margin: var(--spacing-large) 0;
  }
}

html[data-theme=dark] .mailingContainer {
  border-radius: var(--border-radius-default);
  margin: var(--spacing-default) auto;
  max-width: 50ch;
  background: none;
  color: var(--txt-default);
  padding: var(--spacing-default);
}
html[data-theme=dark] .mailingContainer input, html[data-theme=dark] .mailingContainer button[type=submit] {
  color: var(--txt-default);
}

.mailingContainer {
  border-radius: var(--border-radius-default);
  margin: var(--spacing-default) auto;
  max-width: 50ch;
  background: var(--color-text);
  color: var(--surface-default);
  padding: var(--spacing-default);
}
li .mailingContainer {
  width: unset;
  max-width: unset;
}

.mailingContainer a {
  font-weight: bold;
  color: var(--color-accent);
}

::-moz-placeholder {
  color: var(--color-bg-op);
}

:-ms-input-placeholder {
  color: var(--color-bg-op);
}

:-moz-placeholder {
  color: var(--color-bg-op);
}

input[type=reset],
input[type=submit],
input[type=search] {
  border-radius: 0;
}

input[type=checkbox] {
  -webkit-appearance: checkbox;
}

.fieldLabel {
  display: block;
  font-size: var(--font-size-s);
}

.hForm {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.hForm input[type=submit] {
  margin-left: var(--spacing-small);
}

.mailingContainer h2 {
  margin-top: 0;
}

.mailingContainer input {
  border-radius: var(--border-radius-default);
  width: 100%;
  margin-bottom: var(--spacing-default);
  border: 0.15rem solid var(--surface-default);
  background: var(--color-text);
  color: var(--surface-default);
  padding: var(--spacing-small) var(--spacing-small);
}

.mailingContainer input:focus {
  outline-offset: 0.15rem;
  border-color: transparent;
}

.mailingContainer input[type=textarea] {
  word-wrap: normal;
  height: 6rem;
}

.mailingContainer button[type=submit] {
  border-radius: var(--border-radius-default);
  padding: 0.65em var(--spacing-default);
  background: var(--surface-default);
  color: var(--color-text);
  border: 0.15rem solid var(--surface-default);
  cursor: pointer;
}

.mailingContainer button[type=submit]:hover,
.mailingContainer button[type=submit]:active {
  background: var(--color-text);
  color: var(--color-bg);
}

[role=banner] {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (min-width: 50rem) {
  [role=banner] {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
}
[role=banner] [role=banner] .logo {
  flex: 1;
}
[role=banner] [role=banner] nav {
  flex: 3;
}

[role=navigation] {
  list-style-type: none;
  margin: 0;
  display: flex;
  align-items: center;
}
[role=navigation] a {
  font-size: var(--font-size);
  text-decoration: none;
  font-weight: normal;
}
[role=navigation] a:hover {
  color: var(--color-highlight);
}
[role=navigation] ul {
  padding: 0;
  margin: 0;
}
[role=navigation] li {
  display: block;
}
@media (min-width: 45rem) {
  [role=navigation] li {
    display: inline-block;
  }
}
[role=navigation] li.my-active-class {
  font-variation-settings: "wght" 600;
  background-image: url("/img/link-bg.svg");
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 45rem) {
  [role=navigation] li + li {
    margin-left: var(--spacing-small);
  }
}

.home h1.logo {
  transition: font-variation-settings 0.25s linear;
  line-height: 0.85em;
  font-size: 2rem;
}

.home h1.logo {
  margin-top: 0;
  line-height: 1em;
  padding-bottom: 0.75rem;
}

footer {
  font-size: var(--fs-small);
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-default);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2.5' cy='2.5' r='.5' fill='%23ff335f'/%3E%3C/svg%3E") repeat-x left top;
  opacity: 0.8;
}
footer ul li {
  margin-bottom: 0px !important;
}
@media (min-width: 45rem) {
  footer {
    display: flex;
    justify-content: space-between;
  }
  footer > * {
    flex: 0 1 30%;
  }
}

ul.footerContact,
ul.footerSocial {
  margin-top: var(--spacing-small);
}

ul.footerSocial {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

footer a {
  font-weight: normal;
  text-decoration: none;
}

section.selected-work ul {
  text-align: left;
  list-style: none;
  margin: 0;
  padding: var(--spacing-small) 0;
}
section.selected-work ul a:focus {
  padding: 0;
}
section.selected-work ul a {
  color: var(--txt-default);
  text-decoration: none;
  font-weight: normal;
}
section.selected-work ul a:hover {
  color: var(--color-accent);
}
section.selected-work ul a:active {
  color: var(--color-primary);
}
section.selected-work ul ul {
  margin-bottom: 3vh;
}
@media (min-width: 45rem) {
  section.selected-work ul ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }
}
section.selected-work ul ul li {
  padding: var(--spacing-small) var(--spacing-default) var(--spacing-small) 0;
  widows: 2;
}
@media (min-width: 45rem) {
  section.selected-work ul ul li {
    width: 33.33%;
  }
}
section.selected-work ul h2 {
  margin: 0;
  padding: 0;
  font-variation-settings: "wght" 300, "stcl" 0;
}
section.selected-work ul ul h2 {
  font-size: var(--font-size-l);
  text-transform: uppercase;
  font-weight: var(--bold-weight) !important;
  font-family: var(--sans);
  letter-spacing: var(--letter-spacing-small);
  font-variation-settings: "wght" 700;
}
section.selected-work ul li {
  margin: 0;
  padding: var(--space-xxs) 0;
}
section.selected-work ul li::before {
  display: none;
}
section.selected-work ul li a {
  background-image: none;
}

section.child_nav > ul > li {
  display: none;
}
section.child_nav > ul > li.my-active-class {
  display: block;
}
section.child_nav > ul > li.my-active-class > a h2, section.child_nav > ul > li.my-active-class > a .txt_xl {
  display: none;
}

.side-projects div {
  margin: var(--spacing-default) 0 0 0;
}
.side-projects div img {
  max-width: 50%;
  margin: 0;
}

@media (min-width: 45rem) {
  .archive ul.work {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }
}
.archive ul.work li {
  margin: 0;
  padding: var(--spacing-small) var(--spacing-default) var(--spacing-small) 0;
  widows: 2;
}
@media (min-width: 45rem) {
  .archive ul.work li {
    width: 33.33%;
  }
}
.archive ul.work li::before {
  display: none;
}
.archive ul.work li h2 {
  font-size: var(--font-size-l);
  text-transform: uppercase;
  font-weight: var(--bold-weight) !important;
  font-family: var(--sans);
  letter-spacing: var(--letter-spacing-small);
  font-variation-settings: "wght" 700;
}
.archive ul.work li a {
  color: var(--txt-default);
  text-decoration: none;
  font-weight: normal;
}
.archive ul.work li a:hover {
  color: var(--color-accent);
}
.archive ul.work li a:active {
  color: var(--color-primary);
}

.work .txt_xl, .side-projects div .txt_xl, .case-study ul .txt_xl {
  font-size: 1rem;
}
.work h2, .side-projects div h2, .case-study ul h2 {
  margin: var(--spacing-small) 0 0 0;
  font-size: var(--font-size-l);
  text-transform: uppercase;
  font-weight: var(--bold-weight) !important;
  font-family: var(--sans);
  letter-spacing: var(--letter-spacing-small);
  font-variation-settings: "wght" 700;
}
.work a, .side-projects div a, .case-study ul a {
  color: var(--txt-default);
  text-decoration: none;
  font-weight: normal;
}
.work a:hover, .side-projects div a:hover, .case-study ul a:hover {
  color: var(--color-accent);
}
.work a:active, .side-projects div a:active, .case-study ul a:active {
  color: var(--color-primary);
}

.twocol.featured {
  margin: 0 0 var(--spacing-default) 0;
}
.twocol.featured img {
  position: relative;
  margin-left: 0;
}

.side-projects {
  margin: var(--spacing-large) 0 0 0;
}

.socialheader li {
  display: inline-block;
}
.socialheader li a {
  font-weight: normal;
  color: var(--color-default);
  text-decoration: none;
  opacity: 75%;
}
.socialheader li a:hover {
  opacity: 100%;
}
.socialheader li a::after {
  display: inline-block;
  background-image: none !important;
}

.gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
  margin-left: -4%;
  width: 108%;
  box-sizing: border-box;
  margin: 0 0 var(--spacing-large) -4%;
}

.gallery img {
  box-shadow: 1px 0.5em 0.5em rgba(0, 0, 0, 0.2);
  border: 1px solid #eee;
  max-height: 540px;
  scroll-snap-align: center;
  margin: 0 0.5rem;
  border: silver 1px solid;
}
.gallery img:first-of-type {
  margin-left: 4%;
}

.gallery figurecaption {
  display: block;
}

n html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media (min-width: 50rem) {
  n html {
    font-size: 115%;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  padding: 5px;
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--txt-default);
  font-family: var(--ff-default);
  font-feature-settings: liga 1;
  font-weight: var(---fw-default);
  line-height: var(--lineheight-default);
}

/* Import webfonts (Critical: All) */
/* Anchors (Critical: All) */
header a, footer a, header a:visited, footer a:visited {
  color: var(--color-text-default);
}

a, a:visited {
  font-weight: var(--fw-alt);
  color: var(--link-default);
  text-decoration-color: var(--link-default);
  text-decoration-thickness: 0.025em;
  text-underline-offset: 0.1em;
  transition: all var(--duration-default) ease;
}

a:focus {
  color: var(--font-link-alt);
  outline: thin dotted;
}

a:visited {
  color: var(--link-default);
}

a:hover {
  color: var(--font-link-alt);
}

a:hover, a:active {
  outline: 0;
}

a:link {
  transition: color var(--duration-default) ease;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

/* Headlines (Critical: All) */
h1, h2, h3, h4, h5, h6 {
  margin: var(--spacing-large) 0 0 0;
  font-family: var(--ff-alt);
  font-style: bold;
  letter-spacing: 0.025em;
  line-height: var(--lineheight-alt);
  orphans: 2;
}

h1 {
  line-height: var(--lineheight-alt);
  font-variation-settings: "wght" 0, "stcl" 0;
}
@media (min-width: 50rem) {
  h1 {
    font-size: var(--fs-large);
  }
}

h2 {
  font-size: var(--fs-medium);
  font-variation-settings: "wght" 0, "stcl" 0;
}

h4, h5, h6 {
  font-family: var(--ff-default);
  font-size: var(--fs-default);
}

h4 {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-small);
}

/* Paragraphs (Critical: All) */
p {
  margin: 0;
  margin-bottom: var(--spacing-default);
  word-spacing: 0.1em;
  font-size: var(--fs-default);
  line-height: 1.75rem;
  widows: 3;
  orphans: 3;
}

p:last-child:only-child {
  margin-bottom: 0;
}

/* Dropcap paragraph (Critical: All) */
@supports not (initial-letter: 1) {
  .dropcap::first-letter {
    float: left;
    padding-top: 6px;
    padding-right: 8px;
    padding-left: 0;
    font-family: var(--ff-default);
    font-size: 5rem;
    line-height: 4.25rem;
    color: var(--color-brand);
  }
}
@supports (initial-letter: 2) {
  .dropcap::first-letter {
    initial-letter: 2;
  }
}
@media screen and (min-width: 70em) {
  @supports (initial-letter: 3) {
    .dropcap::first-letter {
      initial-letter: 3;
    }
  }
}
/* Large paragraphs (Critical: All) */
.standfirst {
  font-size: var(--fs-medium);
  text-transform: uppercase;
}

.lede {
  font-size: var(--fs-medium);
}

/* Small paragraphs (Critical: All) */
.secondary {
  font-size: var(--fs-small);
}

.tertiary {
  font-size: var(--fs-small);
}

/* Block quotes (Critical: All) */
blockquote {
  margin: var(--spacing-default) 0;
  padding: 0;
}

blockquote p {
  font-family: var(--ff-alt);
  font-style: normal;
}

blockquote cite {
  display: block;
  padding-top: var(--spacing-default);
  font-size: var(--fs-small);
}

blockquote.alt p {
  /* Text styles */
}

blockquote.alt cite {
  text-align: right;
  /* Text styles */
}

/* Lists (Critical: All) */
article {
  /* Inline list items (Critical: All) */
  /* Unstyled list items (Critical: All) */
}
article ol, article ul {
  list-style-type: none;
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-default);
  margin-left: 0;
  padding-left: 0;
  font-size: var(--fs-default);
}
article ol li, article ul li {
  margin-left: 0;
  line-height: var(--lineheight-default);
}
article ol li:before {
  margin-right: var(--spacing-default);
  color: var(--font-color-default);
}
article ul[class*=alt-] li:before {
  content: "";
  display: none;
}
article .alt--inline li {
  display: inline-block;
  margin-bottom: var(--spacing-default);
}
article .alt--inline li:not(:last-child) {
  margin-right: var(--spacing-default);
}
/* Text styles (Critical: All) */
abbr[title] {
  border-bottom: var(--border-width-default) dotted var(--color-border-default);
  cursor: help;
}

[contenteditable] {
  cursor: pointer;
  cursor: text;
}

dfn {
  font-style: italic;
}

b, strong {
  font-weight: 550;
}

i, em {
  font-style: italic;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
}

small {
  font-size: var(--fs-small);
  font-style: normal;
}

.display {
  font-size: var(--fs-large);
}

.small {
  font-size: var(--fs-small);
}

/* Figures (Critical: All) */
figure {
  margin: var(--spacing-default) 0;
}

figure img {
  margin-bottom: var(--spacing-default);
}

figcaption {
  font-size: var(--fs-small);
}

figure.alt figcaption {
  padding-right: var(--spacing-large);
  /* Text styles */
}

/* Images (Critical: All) */
img {
  border-width: 0;
  content-visibility: auto;
  max-width: 100%;
  vertical-align: middle;
  margin: var(--spacing-default) auto;
}

img[width], img[height] {
  max-width: none;
}

img.alt {
  border: var(--border-width-default) solid var(--color-border-default);
  /* Radius styles */
  /* Shadow styles */
}

/* Forms (Critical: All) */
form {
  margin: 0 0 var(--spacing-default) 0;
  padding: 0;
}

fieldset {
  margin: 0 0 var(--spacing-default) 0;
  padding: 0;
  border-width: 0;
}

label {
  margin: 0;
  font-weight: var(---fw-alt);
  color: var(--font-color-default);
}

[type=email],
[type=number],
[type=password],
[type=text],
textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin-bottom: var(--spacing-default);
  width: 100%;
  background-color: var(--color-base-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--border-radius-default);
  font-size: var(--fs-default);
  font-family: var(--ff-default);
  color: var(--font-color-default);
}

textarea {
  min-height: 12vh;
  resize: vertical;
}

/* Rules (Critical: All) */
hr {
  height: 1rem;
  border: 0;
  clear: both;
  display: block;
  margin: var(--spacing-default) 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2.5' cy='2.5' r='.5' fill='red'/%3E%3C/svg%3E") repeat bottom left;
  padding: 0;
}

hr.alt {
  border-bottom-width: var(--border-width-alt);
}

hr.alt--spacer {
  border-bottom-width: 0;
}

/* Tables (Critical: All) */
table {
  display: inline-block;
  margin: 0 0 var(--spacing-default);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: inherit;
}

th, td {
  padding: var(--spacing-small) var(--spacing-default) var(--spacing-small) 0;
  font-size: var(--fs-default);
  text-align: left;
  vertical-align: middle;
}

th {
  font-family: var(--ff-default);
  font-weight: var(---fw-alt);
  white-space: nowrap;
}

td:first-of-type {
  padding-left: var(--spacing-small);
}

thead th, thead td {
  border-bottom: var(--border-width-alt) solid var(--color-border-default);
}

tbody th, tbody td {
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

/* Alt tables (Condensed) (Critical: All) */
table.alt th, table.alt td {
  padding-top: var(--spacing-small);
  padding-bottom: var(--spacing-small);
  /* Text styles */
}

/* Buttons (Critical: All) */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  margin: 0;
  padding: var(--spacing-small);
  background-color: var(--base-default);
  border-width: 0;
  border-radius: var(--border-radius-default);
  color: var(--surface-default) !important;
  cursor: pointer;
  font-family: var(--ff-default);
  font-size: var(--fs-default);
  font-weight: var(---fw-alt);
  line-height: 1;
  text-decoration: none;
  transition: all var(--duration-default) ease;
}

.btn.alt {
  background-color: var(--color-base-default);
  color: var(--color-text-default);
}

.btn:hover {
  /* Button styles */
}

.btn.alt:hover {
  /* Button styles */
}

.btn.alt--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Cards (Critical: All) */
article header > h1:first-of-type {
  margin-top: 0;
}

article > h2:first-of-type {
  font-size: 1.2rem;
  margin-top: var(--spacing-default);
  margin-bottom: var(--spacing-default);
}
@media (min-width: 50rem) {
  article > h2:first-of-type {
    font-size: 1.75rem;
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
  }
}

article img {
  border-radius: 0.25rem;
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}

.postMeta {
  font-size: var(--fs-small);
}

article h3 {
  font-size: var(--fs-default);
  text-transform: uppercase;
  font-family: var(--ff-default);
  letter-spacing: var(--letter-spacing-small);
}

article [target]:not(.button):not(img)::after,
article [href^=http]:not([href*="jasonquintin.com"]):not(.button):not(img)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("../img/external.svg");
  background-repeat: no-repeat;
  background-position: center 2px;
  background-size: 90% auto;
  content: "(external link)";
  overflow: hidden;
  white-space: nowrap;
  text-indent: 1em;
}

html[data-theme=dark] body {
  --surface-default: #18001b;
  --txt-default: #D2E0E1;
  --color-highlight: #ffd177;
}
html[data-theme=dark] header li a {
  color: var(--color-accent) !important;
}
html[data-theme=dark] .my-active-class {
  font-variation-settings: "wght" 600;
  background-image: none !important;
}
html[data-theme=dark] .my-active-class a {
  color: var(--color-highlight) !important;
}
html[data-theme=dark] .home2 h1, html[data-theme=dark] .home2 h2, html[data-theme=dark] .home2 h4 {
  color: var(--color-yellow);
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.grain:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(../img/img-noise.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.35;
  position: fixed;
  top: -110%;
  width: 300%;
}

@keyframes grain {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}
body {
  background-color: var(--surface-default);
}

.accent-bg {
  background-image: url("/img/link-bg.svg");
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
}

a.accent-bg {
  color: var(--color-text-default);
}

.fancy {
  font-family: var(--ff-alt);
  line-height: 1.16;
  letter-spacing: var(--letter-spacing-negative);
  background: linear-gradient(225deg, #FE7474 10%, #ffb253 27%, #a1ff7e 43%, #78bbff 66%, #ff63b6 80%, #FE7474 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300%;
  background-repeat: repeat;
  animation: breathe ease-in-out 20s infinite both;
  animation-play-state: paused;
}

.fancy:hover {
  animation: breathe ease-in-out 10s infinite both;
}

.fancy.logo {
  font-variation-settings: "wght" 0, "stcl" 1000;
  margin-top: 0;
  line-height: 1em;
  padding-bottom: 0.75rem;
  font-size: 2rem;
}
.fancy.logo a {
  text-decoration: none;
  padding-bottom: 10px;
}

.logo span.inner {
  transition: ease-in-out 0.25s;
  letter-spacing: -1rem;
  opacity: 0;
}

.logo:hover span.inner {
  transition: ease-in-out 0.25s;
  letter-spacing: 0rem;
  opacity: 100%;
}

article h1.fancy {
  font-size: 10vw !important;
}
@media (min-width: 45rem) {
  article h1.fancy {
    font-size: 6vw !important;
  }
}

article [target]:not(.button):not(img)::after,
article [href^=http]:not([href*="jasonquintin.com"]):not(.button):not(img)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("../img/external.svg");
  background-repeat: no-repeat;
  background-position: center 2px;
  background-size: 90% auto;
  content: "(external link)";
  overflow: hidden;
  white-space: nowrap;
  text-indent: 1em;
}

.home main ul, main ol {
  list-style-type: none;
  padding-left: 0;
}
article > header span {
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  opacity: 0.55;
}

.resume_experience p span {
  opacity: 0.7;
}

.resume_experience {
  margin-top: var(--spacing-small);
}

@keyframes breathe {
  0% {
    font-variation-settings: "wght" 0, "stcl" 1000;
    background-position: 400% center;
  }
  60% {
    font-variation-settings: "wght" 0, "stcl" 0;
  }
  100% {
    font-variation-settings: "wght" 0, "stcl" 1000;
    background-position: -200% center;
  }
}
@keyframes gradientAnimation {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
html {
  --switch-color: var(--base-default);
}

html[data-theme=light] {
  --switch-color: var(--base-default);
}

html[data-theme=dark] {
  --switch-color: var(--base-alt);
}

.toggle-container input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.toggle-container label {
  cursor: pointer;
  text-indent: -9999px;
  width: 3rem;
  height: 1.5rem;
  background: var(--switch-color);
  float: right;
  border-radius: 2.5rem;
  position: relative;
}
.toggle-container label:after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 90px;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.toggle-container input:checked + label {
  background: var(--switch-color);
}
.toggle-container input:checked + label:after {
  left: calc(100% - 3px);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.toggle-container label:active:after {
  width: 45px;
}

.toggle-container {
  margin-top: -0.2rem;
  margin-left: -0.6rem;
}

.dot-bg {
  position: relative;
  margin-bottom: var(--spacing-default);
}
.dot-bg img {
  margin: 0;
}

.dot-bg::before {
  border-radius: 0.25rem;
  z-index: -1;
  content: "";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2.5' cy='2.5' r='.5' fill='red'/%3E%3C/svg%3E") repeat bottom left;
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  width: 100%;
  height: 99%;
  margin: auto;
}

.tag-frame {
  position: relative;
}
.tag-frame span {
  background: var(--surface-default);
  margin: 0 0 var(--spacing-default) 0;
  text-transform: none;
  border-radius: 0.1rem;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-neutral);
  display: inline-block;
}

.tag-frame::before {
  display: inline-block;
  z-index: -1;
  content: "";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2.5' cy='2.5' r='.5' fill='red'/%3E%3C/svg%3E") repeat bottom left;
  position: absolute;
  top: 0.4rem;
  left: 0;
  width: 100%;
  height: 2rem;
  margin: auto;
}

.btn-stacks {
  top: -0.1rem;
  position: relative;
  border: 1px solid var(--color-neutral);
  padding: 0.2rem 0.5rem;
  background-color: var(--surface-default);
  display: inline-block;
  transition: color 0.2s linear, transform 0.2s linear, border-color 0.2s linear;
}
.btn-stacks::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0.25rem;
  left: 0.2rem;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-neutral);
  transition: border-color 0.2s linear;
  background-color: var(--surface-default);
}
.btn-stacks::after {
  z-index: -2;
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0.4rem;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-neutral);
  transition: border-color 0.2s linear;
  background-color: var(--surface-default);
}

.home h1, .home h2, .home h4 {
  color: var(--color-highlight);
}
.home article h1:first-child {
  margin-bottom: 1.5rem !important;
}

.contain.home-experience {
  grid-template-columns: 1fr 7fr;
}
.contain.home-experience h3 {
  font-weight: normal;
  opacity: 0.7;
}

/*# sourceMappingURL=style.css.map */