/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/
html {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
  line-height: 1.15; /* 2 */
  -webkit-text-size-adjust: 100%; /* 3 */
  tab-size: 4; /* 4 */
}

/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
  margin: 0;
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

@font-face {
  font-family: "Auto Mission";
  src: url("/assets/fonts/auto-mission.woff2") format("woff2"), url("/assets/fonts/auto-mission.otf") format("opentype"), url("/assets/fonts/auto-mission.ttf") format("truetype");
}
@font-face {
  font-family: "Peignot";
  src: url("/assets/fonts/peignot.woff2") format("woff2"), url("/assets/fonts/peignot.otf") format("opentype"), url("/assets/fonts/peignot.ttf") format("truetype");
}
:where(html) {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --size-px-000: -8px;
  --size-px-00: -4px;
  --size-px-1: 4px;
  --size-px-2: 8px;
  --size-px-3: 16px;
  --size-px-4: 20px;
  --size-px-5: 24px;
  --size-px-6: 28px;
  --size-px-7: 32px;
  --size-px-8: 48px;
  --size-px-9: 64px;
  --size-px-10: 80px;
  --size-px-11: 120px;
  --size-px-12: 160px;
  --size-px-13: 240px;
  --size-px-14: 320px;
  --size-px-15: 480px;
  --size-fluid-1: clamp(.5rem, 1vw, 1rem);
  --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-4: clamp(2rem, 4vw, 3rem);
  --size-fluid-5: clamp(4rem, 5vw, 5rem);
  --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
  --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
  --size-fluid-8: clamp(10rem, 20vw, 15rem);
  --size-fluid-9: clamp(15rem, 30vw, 20rem);
  --size-fluid-10: clamp(20rem, 40vw, 30rem);
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 480px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px;
  --size-relative-000: -.5ch;
  --size-relative-00: -.25ch;
  --size-relative-1: .25ch;
  --size-relative-2: .5ch;
  --size-relative-3: 1ch;
  --size-relative-4: 1.25ch;
  --size-relative-5: 1.5ch;
  --size-relative-6: 1.75ch;
  --size-relative-7: 2ch;
  --size-relative-8: 3ch;
  --size-relative-9: 4ch;
  --size-relative-10: 5ch;
  --size-relative-11: 7.5ch;
  --size-relative-12: 10ch;
  --size-relative-13: 15ch;
  --size-relative-14: 20ch;
  --size-relative-15: 30ch;
}

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
@custom-media --useDataOK (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --highContrast (prefers-contrast: more);
@custom-media --lowContrast (prefers-contrast: less);
@custom-media --invertedColors (inverted-colors: inverted);
@custom-media --forcedColors (forced-colors: active);
@custom-media --portrait (orientation: portrait);
@custom-media --landscape (orientation: landscape);
@custom-media --HDcolor (dynamic-range: high) or (color-gamut: p3);
@custom-media --touch (hover: none) and (pointer: coarse);
@custom-media --stylus (hover: none) and (pointer: fine);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-only (0px <= width < 240px);
@custom-media --xxs-n-above (width >= 240px);
@custom-media --xxs-n-below (width < 240px);
@custom-media --xxs-phone (--xxs-only) and (--portrait);
@custom-media --xs-only (240px <= width < 360px);
@custom-media --xs-n-above (width >= 360px);
@custom-media --xs-n-below (width < 360px);
@custom-media --xs-phone (--xs-only) and (--portrait);
@custom-media --sm-only (360px <= width < 480px);
@custom-media --sm-n-above (width >= 480px);
@custom-media --sm-n-below (width < 480px);
@custom-media --sm-phone (--sm-only) and (--portrait);
@custom-media --md-only (480px <= width < 768px);
@custom-media --md-n-above (width >= 768px);
@custom-media --md-n-below (width < 768px);
@custom-media --md-phone (--md-only) and (--portrait);
@custom-media --lg-only (768px <= width < 1024px);
@custom-media --lg-n-above (width >= 1024px);
@custom-media --lg-n-below (width < 1024px);
@custom-media --lg-phone (--lg-only) and (--portrait);
@custom-media --xl-only (1024px <= width < 1440px);
@custom-media --xl-n-above (width >= 1440px);
@custom-media --xl-n-below (width < 1440px);
@custom-media --xxl-only (1440px <= width < 1920px);
@custom-media --xxl-n-above (width >= 1920px);
@custom-media --xxl-n-below (width < 1920px);
:where(html) {
  --font-main-title: "Auto Mission";
  --font-secondary-title: "Peignot";
  --font-body: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
}

.content-centring-container:has(header) {
  background-size: 3px 3px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
}
@media (max-width: 480px) {
  .content-centring-container:has(header) {
    border-bottom: black solid var(--size-1);
  }
}
@media (min-width: 481px) {
  .content-centring-container:has(header) {
    border-bottom: black solid calc(var(--size-1) / 2);
  }
}
.content-centring-container:has(nav) {
  background-size: 3px 3px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom: black solid calc(var(--size-1) / 2);
}
@media (max-width: 480px) {
  .content-centring-container:has(nav) {
    background-color: rgba(0, 0, 0, 0.7);
    border-top: black solid var(--size-1);
    order: 2;
  }
}

header a {
  text-decoration: none;
}
header h1 {
  font-size: var(--size-9);
}
@media (max-width: 480px) {
  header h1 {
    text-align: center;
  }
}
@media (min-width: 481px) {
  header h1 {
    text-align: left;
  }
}

nav {
  font-family: var(--font-secondary-title);
  padding: var(--size-2);
}
nav, nav * {
  font-size: var(--size-4);
}
@media (max-width: 480px) {
  nav {
    text-align: center;
  }
}
@media (min-width: 481px) {
  nav {
    text-align: left;
  }
}
nav h1 {
  margin: var(--size-1) auto;
  display: inline-block;
}
nav a {
  text-decoration: none;
}
nav span {
  text-transform: uppercase;
}
nav li a {
  background-color: #ff86d8;
}
@media (max-width: 480px) {
  nav li {
    padding: var(--size-1) 0;
  }
}
@media (min-width: 481px) {
  nav li {
    display: inline-block;
  }
  nav li:after {
    content: "|";
  }
  nav li:last-child:after {
    content: "";
  }
  nav li a {
    padding: 0 var(--size-1);
  }
}
nav ul {
  padding: 0;
  margin: 0;
}
nav li {
  font-size: var(--size-4);
  list-style-type: none;
}
nav hr {
  border-color: #ff06b5;
  box-shadow: 1px 0px 3px rgba(255, 255, 255, 0.2), -1px 0px 3px rgba(255, 255, 255, 0.2), 0px 1px 3px rgba(255, 255, 255, 0.2), 0px -1px 3px rgba(255, 255, 255, 0.2);
}
@media (min-width: 481px) {
  nav hr {
    display: none;
  }
}

.content-centring-container:has(article) {
  flex-grow: 1;
  background-size: 3px 3px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-color: rgba(0, 0, 0, 0.7);
}
@media (min-width: 481px) {
  .content-centring-container:has(article) {
    padding: var(--size-1) 0 0;
  }
}

article {
  margin: var(--size-2);
  padding: var(--size-2);
}
@media (max-width: 480px) {
  article {
    margin: var(--size-3);
    min-height: 100%;
  }
}
@media (min-width: 481px) {
  article {
    margin: var(--size-3) var(--size-3) var(--size-3) 0;
    border-radius: var(--size-1);
  }
}
article img {
  max-width: 100%;
  border-radius: var(--size-2);
}
article p {
  font-size: var(--size-4);
  font-family: var(--font-body);
  margin: var(--size-2) 0;
  text-indent: var(--size-3);
  background-color: #ff86d8;
}
article p:has(img) {
  text-align: center;
}
article p:has(img) img {
  margin: 0 auto;
  display: block;
}
article p:has(img) em {
  font-size: var(--size-3);
  text-decoration: underline;
}
article hr {
  border-color: #ff06b5;
  box-shadow: 1px 0px 3px rgba(255, 255, 255, 0.2), -1px 0px 3px rgba(255, 255, 255, 0.2), 0px 1px 3px rgba(255, 255, 255, 0.2), 0px -1px 3px rgba(255, 255, 255, 0.2);
}
article h1, article h2, article h3 {
  font-family: var(--font-secondary-title);
}
article h1 {
  font-size: var(--size-6);
}
article h2 {
  font-size: var(--size-5);
}
article h3 {
  font-size: var(--size-4);
}

.content-centring-container:has(footer) {
  background-size: 3px 3px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-color: rgba(0, 0, 0, 0.7);
  border-top: black solid calc(var(--size-1) / 2);
  order: 4;
}

footer {
  display: flex;
  flex-direction: row;
}
footer * {
  padding: 0 var(--size-1);
}
footer .copyright {
  flex-grow: 1;
}
@media (max-width: 480px) {
  footer {
    flex-direction: column;
  }
  footer * {
    text-align: center;
  }
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--size-3);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url(/assets/images/bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position-x: center;
}

h1, h2, h3, h4, h5, p, ul, ol, li, a, span {
  background-color: #ff06b5;
  color: transparent;
  text-shadow: 1px 0px 3px rgba(255, 255, 255, 0.2), -1px 0px 3px rgba(255, 255, 255, 0.2), 0px 1px 3px rgba(255, 255, 255, 0.2), 0px -1px 3px rgba(255, 255, 255, 0.2);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-main-title);
  margin: var(--size-1) auto var(--size-000);
}

@media (max-width: 480px) {
  .content-centring-container {
    border-left: #ff06b5 solid var(--size-1);
    border-right: #ff06b5 solid var(--size-1);
  }
}
@media (min-width: 481px) {
  .content-centring-container {
    border-left: #ff06b5 solid var(--size-2);
    border-right: #ff06b5 solid var(--size-2);
  }
}

.content-centring-container > * {
  max-width: 1080px;
  margin: 0 auto;
}

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