/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */

@font-face {
  font-family: "Perfectly Nineties";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/PerfectlyNineties-Regular.woff") format("woff");
}

@font-face {
  font-family: "Perfectly Nineties";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/PerfectlyNineties-Italic.woff") format("woff");
}

@font-face {
  font-family: "MD UI";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDUI-Regular.woff2") format("woff");
}

@font-face {
  font-family: "MD UI";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDUI-Italic.woff2") format("woff");
}

@font-face {
  font-family: "MD IO";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDIO-Regular.woff2") format("woff");
}

@font-face {
  font-family: "MD IO";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDIO-Italic.woff2") format("woff");
}

/* =======================
 Base styles
 ======================= */

:root {
  /* Primitive tokens: raw design values */
  --color-neutral-100: #F7F7F7;
  --color-neutral-200: #D4D4D4;
  --color-neutral-300: #B4B4B4;
  --color-neutral-400: #959595;
  --color-neutral-500: #777777;
  --color-neutral-600: #5B5B5B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #292929;
  --color-neutral-900: #0F0F0F;
  
  --color-orange-red-100: #FFE7CC;
  --color-orange-red-200: #FFC999;
  --color-orange-red-300: #FFA466;
  --color-orange-red-400: #FF803F;
  --color-orange-red-500: #FF4500;
  --color-orange-red-600: #DB2C00;
  --color-orange-red-700: #B71800;
  --color-orange-red-800: #930900;
  --color-orange-red-900: #7A0000;
  
  --color-orange-100: #FFF1CC;
  --color-orange-200: #FFDE99;
  --color-orange-300: #FFC766;
  --color-orange-400: #FFB13F;
  --color-orange-500: #FF8C00;
  --color-orange-600: #DB6E00;
  --color-orange-700: #B75400;
  --color-orange-800: #933D00;
  --color-orange-900: #7A2C00;
  
  --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
  --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
  --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
  --text-h4: clamp(1.375rem, 1.22rem + 0.45vw, 1.75rem);
  --text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
  --text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  
  --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-small: 0.875rem;
  --text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
  
  --line-tight: 1.1;
  --line-normal: 1.2;
  --line-relaxed: 1.4;
  --line-loose: 1.6;
  
  --spacing-1: 0.125rem;
  --spacing-2: 0.25rem;
  --spacing-3: 0.5rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 2.5rem;
  --spacing-8: 3rem;
  --spacing-9: 3.5rem;
  --spacing-10: 4rem;
  --spacing-11: 4.5rem;
  --spacing-12: 5rem;
  
  --border-width-sm: 1px;
  --border-width-md: 1.5px;
  
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-xxl: 2.5rem;
  
  --shadow-box: 0px 2px 8px 0px rgba(0, 0, 0, 0.32), 0px 1px 4px 0px rgba(0, 0, 0, 0.24);
  --shadow-button: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.16), inset 0px -1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.32), 0px 1px 4px 0px rgba(0, 0, 0, 0.24);
  --shadow-button-active: inset 0px -1px 2px 0px rgba(0, 0, 0, 0.16), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.32), 0px 1px 4px 0px rgba(0, 0, 0, 0.24);

  /* Semantic tokens: contextual usage */
  --color-background: var(--color-neutral-900); 
  --color-primary: var(--color-orange-red-500);
  --color-primary-hover: var(--color-orange-500);
  --color-primary-active: var(--color-orange-red-600);
  --color-text-light: var(--color-neutral-100);
  --color-text-dark: var(--color-neutral-900);
}

* {
  box-sizing: border-box;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

body {
  /* margin: 0; */
  background: var(--color-background);
  color: var(--color-text-light);
  font-family: "MD UI", Helvetica, sans;
  font-style: normal;
  font-weight: 400;
  font-size: 100%;
  line-height: var(--line-relaxed);
}

section,
h1,
h2,
h3,
p {
  scroll-margin-top: 80px;
}

::-moz-selection {
  background: var(--color-orange-red-200);
  text-shadow: none;
}

::selection {
  background: var(--color-orange-red-200);
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: var(--border-width-sm) solid var(--color-neutral-500);
  margin: var(--spacing-4) 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* =======================
   Author's custom styles
   ======================= */

.spacer {
  display: block;
  width: 100%;
  height: var(--spacing-2);
  flex-shrink: 0;
}

.spacer-sm {
  height: var(--spacing-3);
}

.spacer-lg {
  height: var(--spacing-4);
}

.spacer-xl {
  height: var(--spacing-5);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Perfectly Nineties", Times, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-normal);
  text-align: left;
  margin: var(--spacing-6) 0 var(--spacing-6) 0;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

h4 {
  font-size: var(--text-h4);
}

h5 {
  font-size: var(--text-h5);
}

h6 {
  font-size: var(--text-h6);
}

p {
  font-family: "MD UI", Helvetica, sans;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "ss01" 1, "ss02" 1;
  font-size: var(--text-body);
  line-height: var(--line-relaxed);
  margin: var(--spacing-3) 0 var(--spacing-4) 0;
  text-align: left;
}

ul, ol, li {
  margin: var(--spacing-5) 0 var(--spacing-5) 0;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.175rem;
  text-decoration-thickness: 0.075rem;
  transition: 0.2s;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration-thickness: 0.175rem;
}

a:visited {
  color: var(--color-primary);
  text-decoration-thickness: 0.175rem;
}

button, .link-button {
  min-height: 44px;
  font-family: "MD IO", monospace;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  padding: 0.875rem 1rem;
  min-height: 44px;
  background: var(--color-primary);
  font-size: var(--text-button);
  color: var(--color-text-dark);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-button);
  text-decoration: none;
}

button:hover, .link-button:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-dark);
}

button:active, .link-button:active {
  background: var(--color-primary-active);
  box-shadow: var(--shadow-button-active);
}

button:visited, .link-button:visited {
  color: var(--color-text-dark);
  text-decoration: none;
}

.link-button span {
  margin-right: 0.3em;
}

main {
  max-width: 900px;
  border: none;
  margin-left:auto;
  margin-right:auto;
  padding: var(--spacing-4) var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  justify-content: space-between;
  row-gap: var(--spacing-4);
  min-height: 100vh; 
  min-height: 100dvh; /* better on modern mobile browsers */
}

.align-left {
	align-items: left;
	align-content: left;
	padding-top: 1rem;
}

.content-box {
  width: 100%;
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-box);
  row-gap: var(--spacing-7);
  padding: var(--spacing-6);
  color: var(--color-neutral-900);
}

.content-intro {
  background: var(--color-orange-red-500);
  border: color-mix(in srgb, var(--color-orange-red-800) 50%, transparent) solid;
  border-width: var(--border-width-sm);
}

.content-text {
  background: var(--color-orange-500);
  border: color-mix(in srgb, var(--color-orange-800) 50%, transparent) solid;
  border-width: var(--border-width-sm);
}

.placeholder {
  flex: 1;
  background: var(--color-neutral-800);
  border: color-mix(in srgb, var(--color-neutral-600) 25%, transparent) solid;
  border-width: var(--border-width-sm);
  min-height: 120px;
  -webkit-mask-image: linear-gradient(
    to top,
    hsla(0, 0%, 6%, 0) 0%,
    hsla(0, 0%, 6%, 0.1) 13.6%,
    hsla(0, 0%, 6%, 0.199) 24.8%,
    hsla(0, 0%, 6%, 0.296) 33.8%,
    hsla(0, 0%, 6%, 0.391) 41%,
    hsla(0, 0%, 6%, 0.481) 46.8%,
    hsla(0, 0%, 6%, 0.568) 51.5%,
    hsla(0, 0%, 6%, 0.649) 55.4%,
    hsla(0, 0%, 6%, 0.724) 58.8%,
    hsla(0, 0%, 6%, 0.792) 62.2%,
    hsla(0, 0%, 6%, 0.852) 65.9%,
    hsla(0, 0%, 6%, 0.903) 70.1%,
    hsla(0, 0%, 6%, 0.944) 75.3%,
    hsla(0, 0%, 6%, 0.975) 81.8%,
    hsla(0, 0%, 6%, 0.993) 89.9%,
    hsl(0, 0%, 6%) 100%
  );
  mask-image: linear-gradient(
    to top,
    hsla(0, 0%, 6%, 0) 0%,
    hsla(0, 0%, 6%, 0.1) 13.6%,
    hsla(0, 0%, 6%, 0.199) 24.8%,
    hsla(0, 0%, 6%, 0.296) 33.8%,
    hsla(0, 0%, 6%, 0.391) 41%,
    hsla(0, 0%, 6%, 0.481) 46.8%,
    hsla(0, 0%, 6%, 0.568) 51.5%,
    hsla(0, 0%, 6%, 0.649) 55.4%,
    hsla(0, 0%, 6%, 0.724) 58.8%,
    hsla(0, 0%, 6%, 0.792) 62.2%,
    hsla(0, 0%, 6%, 0.852) 65.9%,
    hsla(0, 0%, 6%, 0.903) 70.1%,
    hsla(0, 0%, 6%, 0.944) 75.3%,
    hsla(0, 0%, 6%, 0.975) 81.8%,
    hsla(0, 0%, 6%, 0.993) 89.9%,
    hsl(0, 0%, 6%) 100%
  );
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.headline {
  line-height: var(--line-tight);
  margin: 0;
  font-size: var(--text-h2);
}

.text {
  width: clamp(min(100%, 40ch), 75%, 60ch);
  margin: 0;
}

.text a {
  color: var(--color-neutral-900);
}

.text a:hover {
  color: var(--color-neutral-800);
}

.text a:visited {
  color: var(--color-neutral-900);
}

footer {
  margin-top: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  /* background: var(--color-neutral-800);
  border: color-mix(in srgb, var(--color-neutral-600) 25%, transparent) solid;
  border-width: var(--border-width-sm);
  border-radius: var(--radius-md); */
  box-sizing: border-box;
  /* box-shadow: 0px 2px 12px 0px #00000080, 0px 1px 4px 0px #00000066; */
  font-family: "MD IO", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-small);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-400);
  z-index: 20;
}

footer a {
	color: var(--color-neutral-400);
}

footer a:hover {
	color: var(--color-neutral-200);
}

footer a:visited {
	color: var(--color-neutral-400);
}

/* .footer-fixed {
	position: fixed;
	left: auto;
	right: auto;
	bottom: 32px;
	z-index: 20;
} */

.footer-content {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-5);
}

.footer-links {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-4);
}

/* .footer-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320px;
  background: linear-gradient(
    to bottom,
    hsla(0, 0%, 6%, 0) 0%,
    hsla(0, 0%, 6%, 0.1) 13.6%,
    hsla(0, 0%, 6%, 0.199) 24.8%,
    hsla(0, 0%, 6%, 0.296) 33.8%,
    hsla(0, 0%, 6%, 0.391) 41%,
    hsla(0, 0%, 6%, 0.481) 46.8%,
    hsla(0, 0%, 6%, 0.568) 51.5%,
    hsla(0, 0%, 6%, 0.649) 55.4%,
    hsla(0, 0%, 6%, 0.724) 58.8%,
    hsla(0, 0%, 6%, 0.792) 62.2%,
    hsla(0, 0%, 6%, 0.852) 65.9%,
    hsla(0, 0%, 6%, 0.903) 70.1%,
    hsla(0, 0%, 6%, 0.944) 75.3%,
    hsla(0, 0%, 6%, 0.975) 81.8%,
    hsla(0, 0%, 6%, 0.993) 89.9%,
    hsl(0, 0%, 6%) 100%
  );
  pointer-events: none;
  z-index: 10;
} */


/* =======================
   Helper classes
   ======================= */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* =======================
   Media Queries for Responsive Design.
   ======================= */

@media screen and (max-width:768px) {
  main {
    padding: var(--spacing-4) var(--spacing-5);
  }
  .footer-content {
    flex-direction: column;
    row-gap: var(--spacing-4);
  }
  .footer-fade {
    height: 240px;
  }
}

@media screen and (max-width:440px) {
  /* .footer-fixed {
    position: unset;
    left: unset;
    right: unset;
    bottom: unset;
    z-index: unset;
  } */
  .footer-links {
    flex-direction: column;
    row-gap: var(--spacing-4);
  }
  .footer-fade {
    display: none;
  }
}

@media screen and (max-width:375px) {
  main {
    padding: var(--spacing-4);
  }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* =======================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ======================= */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: var(--border-width-sm) solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}