/*

Copyright 2019 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/

/* 
Animation.css

These are boilerplate place-holders for animations.
The '.in-view' class is used to only show elements when
they are visible in the user's browser viewport.
*/

.animation {
	transition: background 4s; /* To show effect of adding .in-view class */
	animation: example-animation 1s infinite alternate;
	animation-play-state: paused;
	padding: 3em;
}

.animation.in-view {
	background: black;
	animation-play-state: running;
}

@keyframes example-animation {
	from {
		color: red;
	}

	to {
		color: lime;
	}
}

/* 
charactergrid.css

These styles define the character grid container css
*/

:root {
	--character-grid-cell: 4rem;
	--character-grid-font-zize: 2rem;
	--character-grid-gap: 0;
}

ol {
	margin: 0;
	padding: 0;
}

.container-glyphs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 1px 1px;
	grid-template-areas: "glyphs preview";
	position: relative;
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
	.container-glyphs {
		display: block;
		width: 94vw;
	}
}

.character-grid-zoom-container {
	pointer-events: none;
	position: sticky;
	top: 0;
	background: var(--background);
	font-size: 28vw;
	text-align: center;
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
	.character-grid-zoom-container {
		display: none;
	}
}

.container-preview {
	grid-area: glyphs;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.character-grid {
	grid-area: preview;
}

.character-grid-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(var(--character-grid-cell), 1fr)
	);
	gap: 1px;
	font-size: var(--character-grid-font-zize);
	background: var(--background);
}

.character-grid-list > li {
	display: flex;
	height: var(--character-grid-cell);
	outline: 1px solid var(--neutral-700);
	justify-content: center;
	align-items: center;
}

.character-grid-list > li:hover {
	cursor: pointer;
	background-color: var(--text);
	color: var(--background);
}

/* 
generic.css

Do not edit.
*/

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

html,
body {
	padding: 0;
	margin: 0;
}

ol,
ul {
	list-style-type: none;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 1em;
}

.interactive-controls {
  --label-width: 7em;
}

.interactive-controls-container {
  margin: 0.5rem 0;
  &:last-of-type {
    margin-bottom: 0;
  }
}

.interactive-controls-text {
  font-size: calc(var(--font-size) * 1px);
  line-height: var(--line-height);
  word-break: break-word;
}

html[data-dark-mode="true"] {
  .interactive-controls-text {
    background-color: var(--bright-900);
  }
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .interactive-controls-text {
    font-size: calc(var(--font-size) * 0.6px);
    margin-bottom: 2rem;
  }
}

.interactive-controls-instances,
.interactive-controls-sliders li {
  display: flex;
  align-items: center;
}

.interactive-controls label {
  flex: none;
  min-width: var(--label-width);
}

.interactive-controls-instances select,
.interactive-controls-slider {
  width: 100%;
}

.interactive-controls-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.controls {
  display: flex;
  flex-direction: column;
  .group-label {
    margin-top: 1rem;
    font-size: 1rem;
    --font-weight: 600;
    font-variation-settings: "wght" var(--font-weight);
  }
}

.css-output-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-output {
  width: 100%;
  min-height: 5em;
  max-height: 20em;
  resize: none;
  overflow-y: auto;
  font-family: monospace;
  padding: 1.25rem;
  line-height: 1.4;
  border-radius: 1rem 1rem 0 0;
  border: none;
  background-color: var(--neutral-50);
  color: var(--neutral-600);
  height: auto;
  margin: 1rem 0 0;
  transition: background-color 0.1s ease-out;
  cursor: pointer;
}

html[data-dark-mode="true"] {
  .css-output {
    background-color: var(--neutral-800);
    color: var(--neutral-300);
  }
}

.css-output.is-hovered {
  background-color: var(--neutral-100);
}

.copy-css-button {
  background-color: var(--bright-600);
  color: var(--white);
  border-radius: 0 0 1rem 1rem;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.1s ease-out;
}

.copy-css-button.is-hovered {
  background-color: var(--bright-700);
}

.copy-css-button.is-copied {
  background-color: var(--bright-800);
}

main {
	/* max-width: 90rem; */
	/* margin: 0 auto; */
	/* display: none; */
	width: 100%;
}

.fonts-loaded main {
	display: block;
}

/* Show big fat loading screen, and a message when font failed to load */

.loading-message {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	color: #fff;
	font-family: monospace;
	pointer-events: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

.loading-message-failed,
.fonts-loaded .loading-message,
.fonts-failed .loading-message-loading {
	display: none;
}

.fonts-failed .loading-message-failed {
	display: inline;
}

.variable-support-message {
	display: block;
}

@supports (font-variation-settings: normal) {
	.variable-support-message {
		display: none;
	}
}

/* --------- Global styles --------- */

/* Setting up some variables first */

:root {
  --white: oklch(1 0 0deg);
  --neutral-50: oklch(0.97 0 0deg);
  --neutral-100: oklch(0.95 0 0deg);
  --neutral-200: oklch(0.86 0 0deg);
  --neutral-300: oklch(0.7412 0 0deg);
  --neutral-400: oklch(0.6474 0 0deg);
  --neutral-500: oklch(0.5536 0 0deg);
  --neutral-600: oklch(0.4598 0 0deg);
  --neutral-700: oklch(0.3661 0 0deg);
  --neutral-800: oklch(0.2723 0 0deg);
  --neutral-900: oklch(0.1785 0 0deg);
  --neutral-950: oklch(0.0847 0 0deg);
  --black: oklch(0 0 0deg);

  --text: var(--neutral-900);
  --background: var(--white);
  --font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --specimen-fallback-font: var(--font-system);

  /* https://okaylich.pages.dev/3f3ffd/ffff4e */

  --bright-50: oklch(0.99 0.0496 103.67deg);
  --bright-100: oklch(0.95 0.0714 103.67deg);
  --bright-200: oklch(0.8989 0.189 103.67deg);
  --bright-300: oklch(0.7926 0.1683 110.47deg);
  --bright-400: oklch(0.6862 0.1477 117.27deg);
  --bright-500: oklch(0.5799 0.127 124.08deg);
  --bright-600: oklch(0.4735 0.1063 130.88deg);
  --bright-700: oklch(0.3672 0.0857 137.68deg);
  --bright-800: oklch(0.2608 0.065 144.49deg);
  --bright-900: oklch(0.2 0.047 144.49deg);
  --bright-950: oklch(0.1 0.0331 144.49deg);

  --highlight: oklch(0.401 0.154 281deg);

  --spacing-hori: 2rem;
  --spacing-vert: 2rem;
}

/* For dark mode */

html[data-dark-mode="true"] {
  --text: var(--white);
  --background: var(--neutral-900);
}

body {
  font-family: var(--font-system);
  color: var(--text);
  background-color: var(--background);
  transition-duration: 200ms; /* This transition makes the change between light and dark mode smoother */
  transition-property: color, background-color;
  transition-timing-function: ease;
}

main {
  /* max-width: 90rem;
  padding: 0 3vw; */
}

a {
  --fontWeight: 400;
  color: inherit;
  text-decoration-color: var(--bright-500);
  text-underline-offset: 0.2em;
  transition: all 100ms ease-out;
  font-variation-settings: "wght" var(--fontWeight);
  &:hover {
    text-decoration-color: transparent;
    --fontWeight: 700;
  }
}

em {
  font-style: italic;
}

button {
  padding: 0.5rem;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

/* --------- Utility styles --------- */

/* These classes are used to change the appearance of the typography through the specimen. */

/* You can use them to change the design of the speicmen to suit your needs, or simply add or amend classes in this css file. */

/* You could also choose to get rid of it all together! */

/* Reading direction utility classes required for reading direction. Please do not delete. */

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}

.ltrttb {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

.rtlttb {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* Spacing utility classes */

.mt-1u {
  margin-top: 1rem;
}

.mt-2u {
  margin-top: 2rem;
}

.mt-3u {
  margin-top: 3rem;
}

.mt-4u {
  margin-top: 4rem;
}

.mt-5u {
  margin-top: 5rem;
}

.mb-1u {
  margin-bottom: 1rem;
}

.mb-2u {
  margin-bottom: 2rem;
}

.mb-3u {
  margin-bottom: 3rem;
}

.mb-4u {
  margin-bottom: 4rem;
}

.mb-5u {
  margin-bottom: 5rem;
}

.pt-1u {
  padding-top: 1rem;
}

.pt-2u {
  padding-top: 2rem;
}

.pt-3u {
  padding-top: 3rem;
}

.pt-4u {
  padding-top: 4rem;
}

.pt-5u {
  padding-top: 5rem;
}

.pb-1u {
  padding-bottom: 1rem !important;
}

.pb-2u {
  padding-bottom: 2rem !important;
}

.pb-3u {
  padding-bottom: 3rem !important;
}

.pb-4u {
  padding-bottom: 4rem !important;
}

.pb-5u {
  padding-bottom: 5rem !important;
}

/* Font colours */

.text-highlight {
  color: var(--highlight);
}

.text-bright-100-200-gradient {
  background-image: linear-gradient(to right, var(--bright-100), var(--bright-200));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.text-bright-400-600-gradient {
  background-image: linear-gradient(to right, var(--bright-400), var(--bright-600));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.text-bright-500-700-gradient {
  background-image: linear-gradient(to right, var(--bright-500), var(--bright-700));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.text-bright-600-800-gradient {
  background-image: linear-gradient(to right, var(--bright-600), var(--bright-800));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.text-bright-50 {
  color: var(--bright-50);
}

.text-bright-100 {
  color: var(--bright-100);
}

.text-bright-200 {
  color: var(--bright-200);
}

.text-bright-300 {
  color: var(--bright-300);
}

.text-bright-400 {
  color: var(--bright-400);
}

.text-bright-500 {
  color: var(--bright-500);
}

.text-bright-600 {
  color: var(--bright-600);
}

.text-bright-700 {
  color: var(--bright-700);
}

.text-bright-800 {
  color: var(--bright-800);
}

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

.text-bright-950 {
  color: var(--bright-950);
}

/* Font sizes (relative to viewport) */

.type-8xl {
  font-size: clamp(5rem, 12vw, 16rem);
  padding: 0;
  margin: 0;
}

.type-7xl {
  font-size: clamp(4rem, 10vw, 14rem);
  padding: 0;
  margin: 0;
}

.type-6xl {
  font-size: clamp(3rem, 8vw, 12rem);
  padding: 0;
  margin: 0;
}

.type-5xl {
  font-size: clamp(2rem, 6vw, 10rem);
  padding: 0;
  margin: 0;
}

.type-4xl {
  font-size: clamp(1.6rem, 5vw, 8rem);
  padding: 0;
  margin: 0;
}

.type-3xl {
  font-size: clamp(3rem, 4vw, 6.2rem);
  padding: 0;
  margin: 0;
}

.type-2xl {
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  padding: 0;
  margin: 0;
}

.type-xl {
  font-size: clamp(1.4rem, 2vw, 2.8rem);
}

.type-lg {
  font-size: clamp(1.3rem, 1.6vw, 1.8rem);
}

.type-md {
  font-size: clamp(1.2rem, 1.4vw, 1.6rem);
}

.type-sm {
  font-size: 0.8rem;
}

.type-xs {
  font-size: 0.7rem;
}

.type-2xs {
  font-size: 0.6rem;
}

.type-3xs {
  font-size: 0.5rem;
}

/* font weights EXPERIMENTAL */

.fw100 {
  font-variation-settings: "wght" 100;
}

.fw200 {
  font-variation-settings: "wght" 200;
}

.fw300 {
  font-variation-settings: "wght" 300;
}

.fw400 {
  font-variation-settings: "wght" 400;
}

.fw500 {
  font-variation-settings: "wght" 500;
}

.fw600 {
  font-variation-settings: "wght" 600;
}

.fw700 {
  font-variation-settings: "wght" 700;
}

.fw800 {
  font-variation-settings: "wght" 800;
}

.fw900 {
  font-variation-settings: "wght" 900;
}

/* Line height */

.lh08 {
  line-height: 0.8;
}

.lh09 {
  line-height: 0.9;
}

.lh10 {
  line-height: 1;
}

.lh11 {
  line-height: 1.1;
}

.lh12 {
  line-height: 1.2;
}

.lh13 {
  line-height: 1.3;
}

.lh14 {
  line-height: 1.4;
}

/* Alignment */

.align-centre {
  text-align: center;
}

.align-justify {
  text-align: justify;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

/* Columns */

.columns-2 {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: 1em;
       column-gap: 1em;
}

.columns-3 {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 0.8em;
       column-gap: 0.8em;
}

/* --------- END Utility styles --------- */

/* --------- CONTAINER styles --------- */

/* These are styles for each vertically stacked container. */

/* Where applicable, they override, or build on top of, styles provided the efoundation for Specimen Builder: Specimen Skeleton. */

/* Global styles */

.container {
  /* border-top: 1px solid var(--text); */
  padding: 0 var(--spacing-hori);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media only screen and (min-width: 720px) {
  .container {
    padding: 0 calc(var(--spacing-hori) * 2);
  }
}

.container-50 {
  background-color: var(--bright-50);
}

.container-100 {
  background-color: var(--bright-100);
}

.container-700 {
  background-color: var(--bright-700);
  color: var(--white);
}

html[data-dark-mode="true"] {
  .container-50 {
    background-color: var(--bright-950);
  }

  .container-100 {
    background-color: var(--bright-800);
  }

  .container-700 {
    background-color: var(--bright-900);
    color: var(--bright-100);
  }
}

.container-full {
  padding: 0;
}

/* CONTAINER: Masthead */

.masthead {
  /* margin-bottom: 2rem; */
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .masthead-meta {
    padding-top: 0;
  }
}

.masthead-title {
  margin-top: 2rem;
  h2 {
    margin: 0;
  }
}

.masthead-meta {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 2rem;
  padding: var(--spacing-vert) var(--spacing-hori);
  font-family: var(--font-system);
  line-height: 1.3;
  align-items: start;
  @media (min-width: 720px) {
    grid-template-columns: 3fr 2fr;
  }
  .masthead-meta-title {
    .type-lg {
      margin-top: 0;
      margin-bottom: 1.25rem;
    }
    p:last-of-type {
      margin-bottom: 0;
    }
  }
  h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 6rem;
    line-height: 0.9;
    font-variation-settings: "wght" 700;
    /* font-style: italic; */
    color: var(--bright-600);
    transition: color 100ms ease-out;
    em {
      font-variation-settings: "wght" 100;
      color: var(--bright-400);
    }
  }
  .metadata {
    /* margin-top: 2rem; */
    font-size: 0.9rem;
    /* color: var(--bright-500); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background-color: var(--bright-50);
    border-radius: 1rem;
    transition: background-color 100ms ease-out;
    p {
      margin-top: 0;
    }
    p:last-of-type {
      margin: 0;
    }
  }
}

@media only screen and (min-width: 720px) {
  .masthead-meta {
    padding: calc(var(--spacing-vert) * 2) calc(var(--spacing-hori) * 2);
  }
}

html[data-dark-mode="true"] {
  .masthead-meta {
    h2 {
      color: var(--bright-300);
    }
    .metadata {
      background-color: var(--bright-900);
    }
  }
}

.faux-button {
  --fontWeight: 600;
  background-color: var(--bright-700);
  font-size: 1.125rem;
  display: inline-block;
  padding: 1em 3em;
  margin-bottom: 1rem;
  border-radius: 1rem;
  color: var(--bright-100);
  text-decoration: none;
  letter-spacing: 0.03em;
  border: 2px solid var(--bright-700);
  transition: all 100ms ease-out;
  font-variation-settings: "wght" var(--fontWeight);
  text-align: center;
  &:hover {
    background-color: transparent;
    --fontWeight: 600;
    color: var(--bright-700);
    border: 2px solid var(--bright-700);
  }
}

html[data-dark-mode="true"] {
  .faux-button {
    background-color: var(--bright-100);
    color: var(--neutral-900);
    border-color: var(--bright-100);
    &:hover {
      background-color: transparent;
      color: var(--bright-200);
      border-color: var(--bright-200);
    }
  }
}

/* Preview layout */

.interactive-controls {
  padding-top: var(--spacing-vert);
  padding-bottom: var(--spacing-vert);
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
  gap: 2rem;
  grid-template-areas: "preview controls";
  hr {
    border-color: var(--bright-300);
    border-style: solid;
    border-width: 1px;
    width: 100%;
  }
  select {
    background-color: var(--white);
    font-size: 1.25rem;
    border-style: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.1s ease-out;
    &:hover {
      background-color: var(--bright-200);
    }
  }
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .interactive-controls {
    display: inline-block;
  }
}

/* Responsive layout styles */

@media only screen and (min-width: 720px) {
  .interactive-controls {
    padding-top: calc(var(--spacing-vert) * 2);
    padding-bottom: calc(var(--spacing-vert) * 2);
  }
}

.controls {
  grid-area: controls;
  /* border-left: 1px solid var(--text); */
  /* padding-left: 2rem; */
  font-family: var(--font-system);
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .controls {
    border: none;
  }
}

.interactive-controls-text {
  grid-area: preview;
  padding: 2rem;
  border-radius: 2rem;
  background-color: var(--bright-50);
  /* font-variation-settings: "wght" var(--wght), "ital" var(--ital, 0), "opsz" var(--opsz); */
  font-size: var(--font-size, 48px);
  line-height: var(--line-height, 1.1);
  transition: background-color 0.1s ease-out;
  &:hover {
    background-color: var(--bright-100);
  }
}

[contenteditable] {
  outline: 0 solid transparent;
}

.interactive-controls label {
  font-size: 0.8rem;
  font-weight: 400;
}

.interactive-controls-buttons button {
  padding: 8px 8px 0px 8px;
  border-radius: 0.25rem;
  color: var(--text);
  transition-property: color, background-color;
  transition-timing-function: ease;
  transition-duration: 200ms;
}

.interactive-controls-buttons button svg {
  width: 18px;
  fill: currentColor;
  transition: fill 200ms ease;
}

.interactive-controls-buttons button.active {
  background: var(--bright-500);
}

/* Range slider */

input[type="range"] {
  height: 2em;
  -webkit-appearance: none;
  width: 100%;
  background-color: transparent;
}

input[type="range"]:focus {
  outline: none;
}

/* Webkit styles */

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: var(--text);
  border-radius: 0;
  border: 0 solid var(--text);
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--text);
  border: 3px solid var(--background);
  height: 17px;
  width: 17px;
  border-radius: 12px;
  background: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--text);
}

/* Moz styles */

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: var(--text);
}

input[type="range"]::-moz-range-thumb {
  border: 3px solid var(--background);
  height: 12px;
  width: 12px;
  border-radius: 9px;
  background: var(--text);
  cursor: pointer;
}

/* IE styles */

input[type="range"]::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: #000;
  border: 0 solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 #000;
}

input[type="range"]::-ms-fill-upper {
  background: #000;
  border: 0 solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 #000;
}

input[type="range"]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0 0 0 #000;
  border: 0 solid #000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}

input[type="range"]:focus::-ms-fill-lower {
  background: #000;
}

input[type="range"]:focus::-ms-fill-upper {
  background: #000;
}

/* END CONTAINER: Masthead */

/* CONTAINER: Setting */

.setting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

/* Responsive layout styles */

@media only screen and (max-width: 720px) {
  .setting {
    display: inline-block;
  }
}

.column-1 {
  grid-column: 1;
}

.column-2 {
  grid-column: 2;
}

.setting p {
  margin: 0.6em 0 0.4em 0;
  padding: 0;
  &.meta {
    font-family: var(--font-system);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7em;
    color: var(--bright-300);
    margin: 2rem 0 1rem;
  }
}

html[data-dark-mode="true"] {
  .setting p {
    &.meta {
      color: var(--bright-500);
    }
  }
}

/* END CONTAINER: Setting */

/* CONTAINER: Character grid */

.character-grid h3 {
  font-family: var(--font-system);
  font-size: 0.7rem;
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* END CONTAINER: Character grid */

/* CONTAINER: Language */

.language {
  line-height: 1.3;
}

/* END CONTAINER: Language */

/* CONTAINER: Footer */

.footer {
  font-family: var(--font-system);
  line-height: 1.3;
  padding: 2rem 0;
}

/* END CONTAINER: Footer */

.font-title {
  /* font-feature-settings: "ss07" 1; */
  font-variation-settings: "wght" 600;
  /* text-transform: uppercase; */
}

.border-top {
  border-top: 2px solid var(--bright-100);
}

.padding-top {
  padding-top: 2rem;
}

.padding-bottom {
  padding-bottom: 2rem;
}

.text-center {
  text-align: center;
}

.navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: calc(var(--spacing-vert) / 2) 0;
}

@media only screen and (min-width: 720px) {
  .navigation {
    padding: calc(var(--spacing-vert)) 0;
  }
}

.dark-mode-toggle {
  background-color: var(--bright-300);
  transition: background-color 0.1s ease-out;
  display: flex;
  padding: 0.5rem 1rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  &:hover {
    background-color: var(--bright-400);
  }
}

html[data-dark-mode="true"] {
  .dark-mode-toggle {
    background-color: var(--bright-600);
    &:hover {
      background-color: var(--bright-700);
    }
  }
}

.hero-container {
  /* overflow: hidden; */
  --swiper-navigation-size: 2rem;
  --swiper-theme-color: var(--bright-500);
  --swiper-pagination-bullet-size: 1rem;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-inactive-color: var(--bright-200);
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  /* opacity: 0.5; */
  /* transition: opacity 0.3s ease-out; */
}

.swiper-slide-active {
  /* opacity: 1; */
}

.hero-container .swiper-pagination {
  position: relative;
}

.swiper-pagination-bullet {
  outline: 0px solid var(--bright-400);
  transition: outline-width 0.1s ease-out;
  &:hover {
    outline: 4px solid var(--bright-400);
  }
  &.swiper-pagination-bullet-active {
    outline: 4px solid var(--black);
  }
}

.hero-container .swiper-pagination-bullets.swiper-pagination-horizontal {
  top: unset;
  bottom: unset;
  left: unset;
  padding-top: calc(var(--spacing-vert) / 2);
}

.swiper-slide img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1.5rem;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.hero-carousel .swiper-button-prev,
.hero-carousel .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  width: 3.5rem;
  height: 3.5rem;
  background: var(--bright-50);
  color: var(--bright-500);
  outline: 1px var(--bright-300) solid;
  border: none;
  border-radius: 5rem;
  font-size: 2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease-out;
  cursor: pointer;
  --shadow-color: 0deg 0% 0%;
  box-shadow: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11), 1.1px 2.2px 3px -0.6px hsl(var(--shadow-color) / 0.14),
    2.6px 5.2px 7.2px -1.2px hsl(var(--shadow-color) / 0.16), 6.1px 12.2px 16.8px -1.8px hsl(var(--shadow-color) / 0.18);
}

.hero-carousel .swiper-button-prev {
  padding: 1rem 0.65rem 1rem 0.35rem;
}

.hero-carousel .swiper-button-next {
  padding: 1rem 0.35rem 1rem 0.65rem;
}

.hero-carousel .swiper-button-prev:hover,
.hero-carousel .swiper-button-next:hover {
  background: var(--bright-300);
  color: var(--bright-700);
  outline: 1px var(--bright-500) solid;
}

.hero-carousel .swiper-button-prev {
  left: 2rem;
}

.hero-carousel .swiper-button-next {
  right: 2rem;
}