/* ==================================================================
  CSS Boilerplate v2.0.2
  The Unlicense <https://unlicense.org>
  https://github.com/MattMcAdams/CSS-Boilerplate
================================================================== */

.opening-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(146, 129, 129, 0.05);
    z-index: 1;
    transition: ease 2s;
}

.opening-container.hidden {
    opacity: 0;
    pointer-events: none;
}

lottie-player {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.main-container {
    width: 100vw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #928181;
    color: #fff;
    opacity: 0;
    transition: ease 3s 2s;
}

@media screen and (max-width: 990px) {
    .main-container {
        flex-direction: column;
        justify-content: start;
    }
}

.main-container.visible {
    opacity: 1;
}

.main-container > div {
    flex-shrink: 0;
    height: 100%;
    width: 100%;
}

.left-content {
    flex-basis: 65%;
    position: relative;
}

@media screen and (max-width: 990px) {
    .left-content {
        flex-basis: unset;
        height: 45dvh!important;
    }
}

.left-content::after {
    content: '';
    background: rgb(146, 129, 129);
    background: radial-gradient(circle, rgba(146, 129, 129, .5) 0%, rgba(0, 0, 0, 1) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.left-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 17dvh 3vw;
    flex-basis: 35%;
}


@media screen and (max-width: 990px) {
    .right-content {
        flex-basis: unset;
        height: 55dvh!important;
        padding: 2dvh 8vw;
        justify-content: start;
    }
}

.right-content h1 {
    text-align: left;
    width: 100%;
    /*transform: translateX(-10vw);*/
    font-size: 9vw;
    line-height: 1.1em;
    font-weight: 400;
}

@media screen and (max-width: 990px) {
    .right-content h1 {
        font-size: 22vw;
        margin-bottom: 7dvh;
    }
}


.right-content h1::after {
    content: none;
    position: absolute;
    width: 150%;
    height: 150%;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
    border-radius: 80% 40%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    border-top: none;
    border-bottom: none;
    opacity: .4;
}

.right-content div {
    text-transform: uppercase;
    text-align: right;
    width: 100%;
    line-height: 1em;
    font-size: 1.5vw;
}

.right-content span {
    display: block;
    font-size: 1vw;
}


@media screen and (max-width: 990px) {
    .right-content div {
        font-size: 5vw;
    }

    .right-content span {
        font-size: 4vw;
    }
}

.right-content .button {
    padding: 5px 10px;
    margin-top: 2dvh;
    background-color: #928181;
    color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    font-size: 14px;
    transition: all ease .3s;
}

.right-content .button:hover {
    background-color: #fff;
    color: #928181;
    border: 1px solid #fff;
}
/* =================================================================
/* SECTION Tokens
================================================================= */

:root {
  /* Spacing */
  --space_05: 0.25rem; /* 4px   - utility to substitute 0 margins */
  --space_1: 0.5rem;   /* 8px   - utility for tight paddings etc */
  --space_2: 1rem;     /* 16px  - 1/2 line height, for closely related elements */
  --space_4: 2rem;     /* 32px  - 1 line height, for related elements */
  --space_8: 4rem;     /* 64px  - 2 line heights, for loosely related elements */
  --space_16: 8rem;    /* 128px - 4 line heights, for unrelated elements */

  /* Semantic Space */
  --space_flow: var(--space_4);
  --space_gutter: var(--space_2);
  --space_section: var(--space_8);
  --space_grid-gap: var(--space_4);
  --space_flex-gap: var(--space_2);
  --space_layout-gap: var(--space_4);

  /* Layout Widths */
  --width_content: 60rem; /* 960px + gutters */
  --width_sidebar: 20rem; /* 320px + gutters */
  --width_wide: calc(
    var(--width_content) +
    var(--width_sidebar) +
    var(--space_layout-gap)
  );
  /* Total wide width: 60rem + 20rem + 2rem = 82rem */

  /* Colors */
  --color_text--default: #18181b;
  --color_text--subtle: #71717a;
  --color_text--link: #6366f1;
  --color_text--link-alt: #4f46e5;
  --color_text--accent: var(--color_text--link);
  --color_background--surface: white;
  --color_background--element: #f4f4f5;
  --color_background--chip: #e4e4e7;
  --color_accent: var(--color_text--link);

  /* Font Families */
  --font_body: "Gowun Dodum", sans-serif;
  --font_head: "Ving Smith", sans-serif;
  --font_mono: "Gowun Dodum", sans-serif;

  /* Font Weights */
  --font_weight--thin: 100;
  --font_weight--extralight: 200;
  --font_weight--light: 300;
  --font_weight--normal: 400;
  --font_weight--medium: 500;
  --font_weight--semibold: 600;
  --font_weight--bold: 700;
  --font_weight--extrabold: 800;
  --font_weight--black: 900;

  /* Font Sizes & Line Heights */
  /* Based on a modular scale 1.125 by 1.2 */
  /* Exact values have been refined to be a whole pixel value */
  --font_size--small: 0.9375rem;    /* 15px */
  --font_size--normal: 1.125rem;    /* 18px */
  --font_size--medium: 1.375rem;    /* 22px */
  --font_size--large: 1.625rem;     /* 26px */
  --font_size--xlarge: 1.9375rem;   /* 31px */
  --font_size--xxlarge: 2.3125rem;  /* 37px */
  --font_size--xxxlarge: 2.8125rem; /* 45px */

  /* Line heights */
  --font_height--small: 1.2;
  --font_height--normal: 1.8;
  --font_height--medium: 1.5;
  --font_height--large: 1.3;
  --font_height--xlarge: 1.2;
  --font_height--xxlarge: 1.1;
  --font_height--xxxlarge: 1;
}

/* Medium font sizes */
/* Based on a modular scale 1.125 by 1.25 */
/* Exact values have been refined to be a whole pixel value */
@media (min-width: 30rem) {
  :root {
    --font_size--small: 0.875rem;     /* 14px */
    --font_size--medium: 1.4375rem;   /* 23px */
    --font_size--large: 1.75rem;      /* 28px */
    --font_size--xlarge: 2.1875rem;   /* 35px */
    --font_size--xxlarge: 2.75rem;    /* 44px */
    --font_size--xxxlarge: 3.4375rem; /* 55px */
  }
}

/* Large font sizes */
/* Based on a modular scale 1.125 by 1.3 */
/* Exact values have been refined to be a whole pixel value */
@media (min-width: 60em) {
  :root {
    --font_size--large: 1.875rem;     /* 30px */
    --font_size--xlarge: 2.5rem;      /* 40px */
    --font_size--xxlarge: 3.1875rem;  /* 51px */
    --font_size--xxxlarge: 4.1875rem; /* 67px */
  }
}

del {
  --color_background--element: #fdebeb;
}

ins {
  --color_background--element: #e3fcec;
}

/* !SECTION Tokens */
/* =================================================================
/* SECTION Reset
** http://meyerweb.com/eric/tools/css/reset/
** v2.0 | 20110126 * License: none (public domain)
** Modified by Matt McAdams
================================================================= */

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, hr {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* END !SECTION Reset */
/* =================================================================
/* SECTION Core
================================================================= */

/* Links that point to a location on the same page will scroll
 * smoothly down to that location. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Hide content visually, but allow screen readers to read the
 * content. Note that for Accessibility guidelines, this content
 * must become visible if toggled over using a keyboard. */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Give the hidden attribute most priority - fixes issue where
 * an html element can be marked as hidden but is still visible.
 * Use aria-hidden="true" to hide visual elements from
 * screen readers. */

[hidden] {
  display: none !important;
}

/* Ensures disabled elements do not accept events */

[disabled] {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Use primary color for focus styles */

:focus-visible {
  outline-color: var(--color_accent);
  outline-offset: 3px;
  outline-width: 2px;
}

/* Adds a margin above an element when it is the target of an ID link */

* {
  scroll-margin-top: var(--space_flow);
  scroll-margin-bottom: var(--space_flow);
}

/* ::selection {
  background-color: var(--color-primary-100);
} */

/* ==============================
/* SECTION Typography
============================== */

/* Set the document's default font, color, size, and line height */

body {
  font-family: var(--font_body);
  font-size: var(--font_size--normal);
  line-height: var(--font_height--normal);
  color: var(--color_text--default);
  background: var(--color_background--surface);
  accent-color: var(--color_accent);
}

/* Heading typography */

h1, h2, h3, h4, h5 {
  font-family: var(--font_head);
  font-weight: var(--font_weight--bold);
}

h1,
.util_txt--h1 {
  font-size: var(--font_size--xxxlarge);
  line-height: var(--font_height--xxxlarge);
}

h2,
.util_txt--h2 {
  font-size: var(--font_size--xxlarge);
  line-height: var(--font_height--xxlarge);
}

h3,
.util_txt--h3 {
  font-size: var(--font_size--xlarge);
  line-height: var(--font_height--xlarge);
}

h4,
.util_txt--h4 {
  font-size: var(--font_size--large);
  line-height: var(--font_height--large);
}

h5 {
  font-size: var(--font_size--medium);
  line-height: var(--font_height--medium);
}

/* Set typography for small text */

small,
.util_txt--small {
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
}

/* Basic styles for inline semantics */

strong, b { font-weight: bold; }
em, cite, i, q { font-style: italic; }
s { text-decoration: line-through; }
u { text-decoration: underline; font-style: normal; }

/* Basic style for subscript and superscript text */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

del {
  background: var(--color_background--element);
  text-decoration: line-through;
  padding: 0.1em 0.3em;
}

ins {
  background: var(--color_background--element);
  text-decoration: underline;
  padding: 0.1em 0.3em;
}

/* Mark styles - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */

mark {
  background: var(--color_text--accent);
  color: var(--color_background--surface);
  padding: 0.1em 0.3em;
}

/* Basic styles for abbreviation. Only style differently when
 * a title is present. */

abbr { text-decoration: none; }
abbr[title] {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
}


/* !SECTION Typography */
/* ==============================
/* SECTION Links
** :not([class]) is so that the styles won't need to be overridden
** in special use cases like navigation / buttons
============================== */

a:not([class]) {
  color: var(--color_text--link);
  text-decoration: none;
  font-weight: bold;
}

/* a:not([class]):visited { } */

a:not([class]):hover,
a:not([class]):focus {
  text-decoration: underline;
  text-decoration-color: var(--color_text--link-alt);
  text-decoration-thickness: 2px;
}

/* OPTIONAL STYLES - Add an icon for special links */

/* a:not([class])[target="_blank"]::after,
a:not([class])[data-link-type="external"] {
  content: '';
  padding-inline-start: 0.1em;
} */

/* a:not([class])[href$='.pdf']::after,
a:not([class])[data-link-type='document']::after {
  content: '';
  padding-inline-start: 0.1em;
} */

/* a:not([class])[href^="tel:"]::before,
a:not([class])[data-link-type="telephone"]::before {
  content: '';
  padding-inline-end: 0.1em;
} */

/* a:not([class])[href^="mailto:"]::before,
a:not([class])[data-link-type="email"]::before {
  content: '';
  padding-inline-end: 0.1em;
} */

/* !SECTION Links */
/* ==============================
/* SECTION Blockquote
============================== */

blockquote {
  border-left: 5px solid var(--color_accent);
  padding: var(--space_2) var(--space_4);
  font-weight: var(--font_weight--semibold);
}

blockquote footer,
blockquote cite {
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
  font-weight: var(--font_weight--normal);
}

blockquote cite {
  font-style: italic;
}

blockquote > cite,
blockquote > footer {
  display: block;
  margin-block-start: calc(var(--space_flow) / 2);
}

/* !SECTION Blockquote */
/* ==============================
/* SECTION Lists
** :not([class]) is so that the styles won't need to be overridden
** in special use cases. For example, when list markup might need
** to be paired with a grid layout
============================== */

/* Set nested unordered list styles */

ul:not([class]) { list-style-type: disc; }
ul:not([class]) ul:not([class]) { list-style-type: circle; }
ul:not([class]) ul:not([class]) ul:not([class]) { list-style-type: square; }

/* Set nested ordered list styles */

ol:not([class]) { list-style-type: decimal; }
ol:not([class]) ol:not([class]) { list-style-type: upper-alpha; }
ol:not([class]) ol:not([class]) ol:not([class]) { list-style-type: lower-roman; }

/* Set indention and flow spacing for lists */

ol:not([class]) li,
ul:not([class]) li {
  margin-block-end: var(--space_1);
  margin-inline-start: var(--space_4);
}

/* Add basic styles for definition lists */

dt { font-weight: bold; }
dd { padding-inline-start: var(--space_2); }

/* !SECTION Lists */
/* ==============================
/* SECTION Media
============================== */

/* Allow media to sit correctly in content flow */

img,
figure,
video,
.aspect-ratio,
.embed-wrapper {
  display: block;
  width: 100%;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Add placeholder background for video */

video:not(:has(source)) {
  background: var(--color_background--element);
}

/* Basic style for figcaption */

figcaption {
  display: block;
  font-style: italic;
}

/* Allow audio to sit correctly in content flow,
 * Adjust border radius to allow consistency across browsers */

audio {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 900px;
}

/* Setup media wrappers */

.aspect-ratio,
.embed-wrapper {
  --aspect-ratio: 16/9;
  width: 100%;
  padding-block-start: calc(100%/(var(--aspect-ratio)));
  position: relative;
}

/* Position inner elements in media wrappers */

.embed-wrapper > iframe,
.embed-wrapper > embed,
.embed-wrapper > object,
.aspect-ratio > iframe,
.aspect-ratio > embed,
.aspect-ratio > object,
.aspect-ratio > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

/* Allow img to crop to avoid being stretched */

.aspect-ratio > img {
  object-fit: cover;
}

/* Wrapper to allow horizontal overflow,
 * Useful for tables and other wide content */

.overflow-x,
.table-wrapper {
  overflow-x: auto;
}

/* !SECTION Media */
/* ==============================
/* SECTION Rules
============================== */

hr {
  border: none;
  border-block-end: 1px solid var(--color_text--subtle);
  width: 100%;
}

hr.spacer {
  --spacer-height: calc(var(--space_flow) * 2);
  border: none;
  margin-block-start: var(--spacer-height) 0;
}

/* !SECTION Rules*/
/* ==============================
/* SECTION Tables
============================== */

table {
  width: 100%;
}

caption {
  font-size: inherit;
  line-height: inherit;
  text-align: start;
  margin-block-end: var(--space_2);
}

thead {
  background-color: var(--color_text--default);
  color: var(--color_background--surface);
}

th, td {
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
  padding: var(--space_2);
  text-align: start;
}

th { font-weight: bold; }

tr {
  border-block-end: 0.5px solid var(--color_text--subtle);
}

tbody tr:hover {
  background-color: var(--color_background--element);
}

tfoot {
  background-color: var(--color_background--chip);
}

/* !SECTION Tables */
/* ==============================
/* SECTION Code
============================== */

code, samp, kbd, var {
  font-family: var(--font_mono);
  padding: 0.1em 0.3em;
}

code, samp {
  background-color: var(--color_background--element);
}

var {
  font-style: italic;
  font-weight: bold;
}

kbd {
  background-color: var(--color_text--default);
  color: var(--color_background--surface);
  border-radius: 5px;
}

pre code,
pre samp {
  display: block;
  padding: var(--space_2);
  overflow: auto;
  font-family: var(--font_mono);
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
}

/* !SECTION Code */
/* ==============================
/* SECTION Details
============================== */

/* Display:block removes Firefox's marker
 * ::webkit-details-marker removed Chrome & Safair's marker */

details {
  display: block;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  display: block;
  cursor: pointer;
  color: var(--color_text--default);
  font-weight: var(--font_weight--bold);
  font-weight: bold;
}

summary::before {
  content: "+";
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  font-size: 1em;
  width: 1em;
  margin-inline-end: 0.5em;
  will-change: transform;
  transition: transform 300ms ease;
}

summary:focus::before {
  color: var(--color_accent);
}

summary + * {
  margin-block-start: calc(var(--space_flow) / 2);
}

details[open] > summary::before {
  transform: rotate(45deg);
}

details {
  background: var(--color_background--element);
  padding: var(--space_2);
}

/* !SECTION Details */
/* ==============================
/* SECTION Meter
============================== */

meter {
  --meter-color_track: var(--color_background--element);
  --meter-color_optimum: #15803d;
  --meter-color_sub-optimum: #f59e0b;
  --meter-color_sub-sub-optimum: #dc2626;

  display: block;
  width: 100%;
  height: 1rem;

  -webkit-appearance: none;
  border-radius: 0;
  background: none;
  background-color: var(--meter-color_track);
}

/* Set the track color for webkit browsers */

meter::-webkit-meter-bar {
  background: var(--meter-color_track);
}

/* Set the optimum color */

meter::-webkit-meter-optimum-value {
  background: var(--meter-color_optimum);
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--meter-color_optimum);
}

/* Set the sub optimum color */

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--meter-color_sub-optimum);
}

meter::-webkit-meter-suboptimum-value {
  background: var(--meter-color_sub-optimum);
}

/* Set the sub sub optimum color */

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--meter-color_sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
  background: var(--meter-color_sub-sub-optimum);
}

/* !SECTION Meter */
/* ==============================
/* SECTION Progress
============================== */

progress[value] {
  --progress-color_track: var(--color_background--element);
  --progress-color_fill: var(--color_accent);

  display: block;
  width: 100%;
  height: 0.25rem;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;

  background: var(--progress-color_track);
}

progress[value]::-webkit-progress-bar {
  background: var(--progress-color_track);
}

progress[value]::-webkit-progress-value {
  background: var(--progress-color_fill);
}

progress[value]::-moz-progress-bar {
  background: var(--progress-color_fill);
}

/* !SECTION Progress */
/* !SECTION Core */
/* =================================================================
/* SECTION Forms
** File uploads are not styled, you're better off implementing
** something with JS.
** Date & Color inputs are not styled, they're far too complicated
** for the scope of this project.
================================================================= */

/* Setup form specific styles and variables  */

form {
  --form_invalid-color: #dc2626;
}

/* Add required input notice if required fields exist */

form:has(.form-field input[required])::after {
  content: "* indicates a required field";
  color: var(--form_invalid-color);
  margin-block-start: var(--space_flow);
  display: block;
}

/* Standardize labels */

label, legend {
  background-color: transparent;
  font: inherit;
}

/* Standard styles for normal inputs */

input:not([type="checkbox"], [type="radio"], [type="color"]),
select,
textarea,
button {
  font: inherit;
  padding: var(--space_1);
  display: block;
  width: 100%;
  border: 1px solid var(--color_text--subtle);
  line-height: inherit;
  box-sizing: border-box;
  background: transparent;
}

/* Remove border and padding for file inputs */

input[type="file"] {
  padding: var(--space_1) 0;
  border: none;
}

/* Set textarea default height and restrict resize to vertical */

textarea {
  resize: vertical;
  min-height: 10rem;
  font-family: var(--font_mono);
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
}

/* ==============================
/* SECTION Form field class
============================== */

.form-field label {
  display: block;
}

/* Add required marker to labels if their input is required */

.form-field:has(input[required]) label::after {
  content: " *";
  color: var(--form_invalid-color);
}

/* !SECTION Form field class */
/* ==============================
/* SECTION Radio & Checkbox
============================== */

ul:has(input[type="checkbox"]),
ul:has(input[type="radio"]),
ol:has(input[type="checkbox"]),
ol:has(input[type="radio"]) {
  list-style: none;
}

ul:has(input[type="checkbox"]) li,
ul:has(input[type="radio"]) li,
ol:has(input[type="checkbox"]) li,
ol:has(input[type="radio"]) li {
  margin: 0;
}

/* !SECTION Radio & Checkbox */
/* ==============================
/* SECTION Range
============================== */

input[type="range"],
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  font-size: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
}

/* Track Styles */
input[type="range"]::-webkit-slider-runnable-track {
  border: none;
  height: 5px;
  border-radius: 0;
  background-color: var(--color_background--element);
}

input[type="range"]::-moz-range-track {
  height: 5px;
  border: none;
  border-radius: 0;
  background-color: var(--color_background--element);
}

input[type="range"]::-moz-range-progress{
  background-color: var(--color_accent);
  height: 5px;
}

/* Thumb Styles */
input[type="range"]::-webkit-slider-thumb {
  margin-block-start: calc((1.2rem / -2) + 2.5px);
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--color_background--surface);
  border-radius: 1000rem;
  background: var(--color_accent);
}

input[type="range"]::-moz-range-thumb {
  border: 2px solid var(--color_background--surface);
  border-radius: 1000rem;
  font-size: 1.2rem;
  background: var(--color_accent);
}

/* !SECTION Range */
/* ==============================
/* SECTION Buttons
============================== */

.button,
.button--secondary,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  width: auto;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--color_text--link);
  cursor: pointer;
  box-sizing: border-box;
  color: var(--color_background--surface);
  border: 2px solid var(--color_text--link);
  padding-inline: var(--space_4);
  padding-block: var(--space_1);
}

a.button:hover,
a.button--secondary:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
a.button--secondary:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  border-color: var(--color_text--link-alt);
  background-color: var(--color_text--link-alt);
}

.button--secondary,
button[type="reset"],
input[type="reset"] {
  background-color: var(--color_background--surface);
  color: var(--color_text--link);
  border-color: var(--color_text--link);
}

a.button--secondary:hover,
button[type="reset"]:hover,
input[type="reset"]:hover,
a.button--secondary:focus,
button[type="reset"]:focus,
input[type="reset"]:focus {
  background-color: var(--color_background--surface);
  color: var(--color_text--link-alt);
  border-color: var(--color_text--link-alt);
}

span.button,
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
  cursor: auto;
  background-color: var(--color_background--chip);
  color: var(--color_text--subtle);
  border-color: var(--color_background--chip);
}

span.button--secondary,
input[type="reset"][disabled],
button[type="reset"][disabled] {
  cursor: auto;
  background-color: var(--color_background--surface);
  color: var(--color_background--chip);
  border-color: var(--color_background--chip);
}

/* !SECTION Buttons */
/* !SECTION Forms */
/* =================================================================
/* SECTION Layout
================================================================= */
/* ==============================
/* SECTION Container System
** Containers allow for a robust and flexible layout system by
** applying the gutter padding and max width to the container itself.
** Containers can be nested as needed.
============================== */

/* Setup containers */

.container {
  margin-inline: auto;
  padding-inline: var(--space_gutter);
  max-width: var(--width_content);
}

.container--wide {
  margin-inline: auto;
  padding-inline: var(--space_gutter);
  max-width: var(--width_wide);
}

.container--full {
  margin-inline: auto;
  padding-inline: var(--space_gutter);
}

/* Allow nested containers wider than parent */

.container > .container--wide {
  max-width: var(--width_wide);
  margin-inline: calc(
    min(
      calc(100vw - 100%),
      calc(var(--width_wide) - 100%)
    ) / -2
  );
}

.container > .container--full,
.container--wide > .container--full {
  max-width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
}

/* Remove duplicate gutters from nested containers the same size as parent */

.container > .container,
.container--wide > .container--wide,
.container--full > .container--full {
  margin-inline: calc(var(--space_gutter) * -1);
}

/* Account for containers smaller than parent */

.container--wide > .container,
.container--full > .container {
  margin-inline: max(
    calc(var(--space_gutter) * -1),
    calc((100% - var(--width_content)) / 2)
  );
}

.container--full > .container--wide {
  margin-inline: max(
    calc(var(--space_gutter) * -1),
    calc((100% - var(--width_wide)) / 2)
  );
}

/* !SECTION Containers */
/* ==============================
/* SECTION Flow Spacing
** Flow spacing is the space between elements in a vertical flow.
** The .section class is provided for larger gaps between sections.
** Flow spacing can be applied to a individual container using the .layout--flow class. or to the entire document using the .global--flow class. The implementation is different for each method, so consider how you want the spacing to be applied.
============================== */

.layout--flow > * + *,
blockquote > * + *,
details > * + * {
  margin-block-start: var(--space_flow);
}

.layout--flow-double > * + * {
  margin-block-start: calc(var(--space_flow) * 2);
}

.layout--flow-half > * + * {
  margin-block-start: calc(var(--space_flow) / 2);
}

.layout--flow > * + h1,
.layout--flow > * + h2,
.layout--flow > * + h3,
.layout--flow > * + h4,
.layout--flow > * + h5,
.layout--flow > * + h6 {
  margin-block-start: calc(var(--space_flow) * 2);
}

.layout--flow > h1 + h2,
.layout--flow > h2 + h3,
.layout--flow > h3 + h4,
.layout--flow > h4 + h5,
.layout--flow > h5 + h6 {
  margin-block-start: calc(var(--space_flow) / 2);
}

.section {
  margin-block-start: var(--space_section);
}

/* !SECTION Flow Spacing */
/* ==============================
/* SECTION Level
** Creates a bar with content vertically aligned on both sides
** Good for split navigation bars etc.
============================== */

.layout--level {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  gap: var(--space_gutter);
}

/* !SECTION Level */
/* ==============================
/* SECTION Grid
** The grid layout creates a responsive grid with a fluid number of columns.
** You can define the number of columns to allow as well as the minimum
** width of each grid item. Just be aware that if you set the minimum width
** too high, the grid may not fit on viewports smaller than the minimum width.
============================== */

.layout--grid {
  --grid-column--count: 6;
  --grid-gap--width: var(--space_grid-gap);
  --grid-gap--count: calc(var(--grid-column--count) - 1);
  --grid-gap--total: calc(var(--grid-gap--width) * var(--grid-gap--count));
  --grid-item--min-width: 14rem;
  --grid-item--max-width: calc((100% - var(--grid-gap--total)) / var(--grid-column--count));

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  gap: var(--grid-gap--width);
}

/* Stabilize height of components that are side by side */

.layout--grid > div > :only-child,
.layout--grid > li > :only-child {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.layout--grid > div > :only-child > *,
.layout--grid > li > :only-child > * {
  flex: 1;
}

/* !SECTION Grid */
/* ==============================
/* SECTION App
** The app wrapper ensures the the site footer sticks to the
** bottom of the viewport on short pages.
** Structure should be as follows:
** <div id="app">
**   <header></header>
**   <main></main>
**   <footer></footer>
** </div>
** No other elements should be present in the app div.
============================== */

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
}

#app > :nth-child(2) {
  width: 100%;
  flex: 1 0 auto;
  place-content: start center;
}

/* !SECTION App */
/* ==============================
/* SECTION Page Layout
** The page layout provides grid areas for a hero, content, and sidebar.
** It arranges the grid areas responsively based on the presence of a sidebar.
** Inside the <main class="page"> tag, the structure should follow:
** <div class="page_header"> (optional, may use header element)
** <div class="page_content"> (may use article element)
** <div class="page_sidebar"> (optional, may use aside or nav elements)
============================== */

.page {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar";
  grid-template-columns: 1fr;
  column-gap: var(--space_layout-gap);
  max-width: var(--width_wide);
  margin-inline: auto;
}

/* Fix for x overflow elements breaking layout */

.page > * {
  min-width: 0;
}

/* Page areas */

.page__header {
  grid-area: header;
}

.page__content {
  grid-area: content;
  margin-block: var(--space_section);
}

.page__sidebar {
  grid-area: sidebar;
  margin-block-end: var(--space_section);
}

/* Layout fixes */

.page:has(.page__sidebar) .container > .container--wide,
.page:has(.page__sidebar) .container > .container--full,
.page:has(.page__sidebar) .container--wide > .container,
.page:has(.page__sidebar) .container--wide > .container--full,
.page:has(.page__sidebar) .container--full > .container,
.page:has(.page__sidebar) .container--full > .container--wide {
  margin-inline: calc(var(--space_gutter) * -1);
}

.page:not(:has(.page__sidebar)) .width--full,
.page:not(:has(.page__sidebar)) .container--full {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
}

/* Enable sidebar */

@media (min-width: 60rem) {
  .page:has(.page__sidebar) {
    grid-template-areas:
      "header header"
      "sidebar content";
    grid-template-columns:
      minmax(calc(25% - (var(--space_layout-gap) / 2)), var(--width_sidebar))
      min(calc(75% - (var(--space_layout-gap) / 2)), var(--width_content));
  }
  .page__sidebar {
    margin-block-start: var(--space_section);
  }
}

/* !SECTION Page Layout */
/* !SECTION Layout */