/* Design Tokens */
/* Base Styles */
:root {
  --breakpoints-sm: 460px;
  --breakpoints-md: 768px;
  --breakpoints-lg: 1024px;
  --color-gray-90: #373946;
  --color-gray-70: #565869;
  --color-gray-50: #77798a;
  --color-gray-30: #b3b4bd;
  --color-gray-10: #eeeef0;
  --color-primary: #191a22;
  --color-black: #050608;
  --color-white: #fff;
  --color-brand: #084e67;
  --font-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --weight-normal: 400;
  --weight-bold: 700;
  --size-xs: clamp(0.6075rem, 0.5636rem + 0.2195vw, 0.72rem);
  --size-sm: clamp(0.7294rem, 0.6628rem + 0.3329vw, 0.9rem);
  --size-base: clamp(0.875rem, 0.7774rem + 0.4878vw, 1.125rem);
  --size-lg: clamp(1.05rem, 0.911rem + 0.6951vw, 1.4063rem);
  --size-xl: clamp(1.26rem, 1.0656rem + 0.972vw, 1.7581rem);
  --size-2xl: clamp(1.5119rem, 1.2443rem + 1.3378vw, 2.1975rem);
  --size-3xl: clamp(1.8144rem, 1.4505rem + 1.8195vw, 2.7469rem);
  --size-4xl: clamp(2.1775rem, 1.6875rem + 2.45vw, 3.4331rem);
  --size-5xl: clamp(2.6125rem, 1.9574rem + 3.2756vw, 4.2913rem);
  --size-6xl: clamp(3.135rem, 2.265rem + 4.35vw, 5.3644rem);
  --space-px: 1px;
  --space-half: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;
  --max-width-sm: 60ch;
  --max-width-md: 70ch;
  --max-width-lg: 85ch;
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-base: 1.5;
  --leading-loose: 1.8;
  --tracking-tight: -0.025rem;
  --tracking-base: auto;
  --tracking-wide: 0.05rem;
  --tracking-loose: 0.1rem;
  --radius-base: 0.25rem;
  --radius-full: 99999px;
  --shadow-sm: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
  --shadow-base: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.6rem 1rem rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.6rem 0.8rem rgba(0, 0, 0, 0.05), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.05), 0 1rem 1.6rem rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.8rem 1rem rgba(0, 0, 0, 0.05), 0 1rem 1.4rem rgba(0, 0, 0, 0.05), 0 1.2rem 2rem rgba(0, 0, 0, 0.05), 0 1.4rem 2.2rem rgba(0, 0, 0, 0.05);
}

/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/assets/fonts/open-sans-v20-latin-regular.woff2") format("woff2"), url("/assets/fonts/open-sans-v20-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/assets/fonts/open-sans-v20-latin-700.woff2") format("woff2"), url("/assets/fonts/open-sans-v20-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
*,
*:after,
*:before {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  --bg-image: url("/assets/images/new-bg.jpg");
  background-attachment: fixed;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), var(--bg-image);
  background-size: cover;
  background-position: 80% 0;
  background-repeat: no-repeat;
  background-color: var(--color-white, white);
  color: var(--color-primary, black);
  font-family: var(--font-base, sans-serif);
  font-size: var(--size-base);
  text-rendering: optimizeSpeed;
  margin: 0;
  min-height: 100vh;
}
@media (min-width: 1280px) {
  body {
    background-position: 25% 0;
  }
}

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

p {
  line-height: var(--leading-base, 1.5);
  margin: 0;
}

a {
  color: var(--color-neutral, blue);
  position: relative;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

img {
  /* Only render images when they're in the viewport */
  content-visibility: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

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

button {
  appearance: none;
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

svg {
  fill: currentColor;
  height: 1em;
  width: 1em;
}

[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

ul.list {
  list-style: initial;
}

ul.list li {
  margin-left: var(--space-8, 2em);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  letter-spacing: var(--tracking-tight, -0.5px);
  line-height: var(--leading-tight, 1);
  font-weight: var(--weight-bold, 700);
  margin: 0;
}

h1,
.h1 {
  font-size: var(--size-3xl);
}

h2,
.h2 {
  font-size: var(--size-2xl);
}

h3,
.h3 {
  font-size: var(--size-xl);
}

h4,
.h4 {
  font-size: var(--size-lg);
}

@supports (display: grid) {
  .browser-message {
    display: none;
  }
}
.email-address {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  /* 1 */
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
  /* 3 */
}

/*
	Use in conjunction with .sr-only to only display content when it's focused.
	@note Useful for skip links
	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
	@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
		@author Sylvain Pigeard
		@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  height: auto !important;
  margin: auto !important;
  overflow: visible !important;
  width: auto !important;
  white-space: normal !important;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Components */
.block-area {
  --gutter: var(--space-8, 2rem);
  --columns: var(--gutter) calc(var(--gutter) / 2) 1fr calc(var(--gutter) / 2)
  	var(--gutter);
  display: grid;
  grid-template-columns: var(--columns);
  row-gap: var(--row-gap, var(--space-10));
}

.block-area > * {
  grid-column: 2/span 3;
}

.block-area > h1 + p,
.block-area > h2 + p,
.block-area > h3 + p,
.block-area > h4 + p,
.block-area > h5 + p,
.block-area > h6 + p {
  --row-gap: var(--space-3);
}

.block-area > p + p,
.block-area > p + ul,
.block-area > ul + p,
.block-area > ul + ul,
.block-area > p + ol,
.block-area > ol + p,
.block-area > ol + ol {
  --row-gap: var(--space-4);
}

.block-area > .alignwide,
.block-area > .alignfull {
  grid-column: 1/-1;
}

@media (min-width: 460px) {
  .block-area > .alignwide {
    grid-column: 2/span 3;
  }
}
@media (min-width: 768px) {
  .block-area {
    --content-width: 640px;
    --columns: var(--gutter) 1fr var(--content-width) 1fr var(--gutter);
  }

  .block-area > * {
    grid-column: 3;
  }
}
@media (min-width: 1024px) {
  .block-area {
    --content-width: 720px;
    --columns: var(--gutter) 1fr 1fr var(--content-width) 1fr 1fr
    	var(--gutter);
  }

  .block-area > * {
    grid-column: 4;
  }

  .block-area > .alignwide {
    grid-column: 3/span 3;
  }
}
.btn {
  --btn-background-color: var(--color-gray-90);
  --btn-color: var(--color-white);
  --btn-padding: var(--space-3) var(--space-6);
  appearance: none;
  background-color: var(--btn-background-color);
  border: var(--btn-border, 0);
  border-radius: var(--btn-radius, var(--radius-full));
  box-shadow: var(--btn-shadow, none);
  color: var(--btn-color);
  font-size: var(--btn-font-size, inherit);
  padding: var(--btn-padding);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: var(--btn-min-width, 5rem);
  transition: var(--btn-transition, all 400ms ease-in-out);
}

.btn:hover,
.btn:focus {
  --btn-background-color: var(--color-white);
  --btn-color: var(--color-primary);
  --btn-shadow: var(--shadow-xl);
  --btn-transition: all 150ms ease-in-out;
}

.btn[data-size=sm] {
  --btn-padding: var(--space-2) var(--space-4);
}

.btn[data-size=lg] {
  --btn-padding: var(--space-2) var(--space-10);
  --btn-font-size: var(--size-lg);
}

.btn[data-color=gray-90] {
  --btn-background-color: #373946;
  --btn-color: var(--color-brand, white);
}

.btn[data-color=gray-70] {
  --btn-background-color: #565869;
  --btn-color: var(--color-brand, white);
}

.btn[data-color=gray-50] {
  --btn-background-color: #77798a;
  --btn-color: var(--color-brand, black);
}

.btn[data-color=gray-30] {
  --btn-background-color: #b3b4bd;
  --btn-color: var(--color-brand, black);
}

.btn[data-color=gray-10] {
  --btn-background-color: #eeeef0;
  --btn-color: var(--color-brand, black);
}

.btn[data-color=primary] {
  --btn-background-color: #191a22;
  --btn-color: var(--color-brand, white);
}

.btn[data-color=black] {
  --btn-background-color: #050608;
  --btn-color: var(--color-brand, white);
}

.btn[data-color=white] {
  --btn-background-color: #fff;
  --btn-color: var(--color-brand, black);
}

.btn[data-color=brand] {
  --btn-background-color: #084e67;
  --btn-color: var(--color-brand, white);
}

.c-checkbox,
.c-radio {
  --size: var(--space-6);
  position: relative;
}

.c-checkbox label,
.c-radio label {
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4LjcxLDcuMjFhMSwxLDAsMCwwLTEuNDIsMEw5Ljg0LDE0LjY3LDYuNzEsMTEuNTNBMSwxLDAsMSwwLDUuMjksMTNsMy44NCwzLjg0YTEsMSwwLDAsMCwxLjQyLDBsOC4xNi04LjE2QTEsMSwwLDAsMCwxOC43MSw3LjIxWiIvPjwvc3ZnPg==");
  --border-width: var(--space-half);
  --border-color: var(--color-gray-30);
  --border-color-checked: var(--color-positive);
  --radius: var(--radius-base);
  display: flex;
  align-items: center;
  user-select: none;
}

.c-radio label {
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGNsYXNzPSJ1aW0tcHJpbWFyeSIvPjwvc3ZnPg==");
  --radius: var(--radius-full);
}

.c-checkbox label:before,
.c-radio label:before {
  content: "";
  display: block;
  border: var(--space-half) solid var(--border-color);
  border-radius: var(--radius);
  width: var(--size);
  height: var(--size);
  margin-right: var(--space-2);
  pointer-events: none;
  flex-shrink: 0;
}

.c-checkbox input,
.c-radio input {
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.c-checkbox input:checked + label:before,
.c-radio input:checked + label:before {
  background-image: var(--icon);
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--border-color-checked);
}

.content {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .content {
    grid-template-columns: 300px 1fr;
    padding-top: var(--space-8);
    padding-bottom: var(--space-20);
  }
}

.content__main {
  padding: var(--space-10);
  background-color: rgba(0, 0, 0, 0.5);
}
.content__main a {
  text-decoration: none;
}

.cta-button {
  text-align: center;
}
@media (min-width: 768px) {
  .cta-button {
    text-align: left;
  }
}

.designed-by {
  display: flex;
  align-items: center;
}
.designed-by > a,
.designed-by > img {
  display: block;
}

/* Form Styles */
label {
  display: block;
  font-size: inherit;
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-none, 1);
}

input[type=text],
input[type=password],
input[type=tel],
input[type=email],
input[type=number],
input[type=datetime-local],
input[type=date],
select,
textarea {
  appearance: none;
  background-color: white;
  border: 0.06rem solid var(--color-gray-30, #ddd);
  border-radius: var(--radius-base, 4px);
  color: var(--color-primary, #111);
  display: block;
  font-family: inherit;
  font-size: inherit;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  width: 100%;
}

input[type=text][data-state=invalid],
input[type=password][data-state=invalid],
input[type=tel][data-state=invalid],
input[type=email][data-state=invalid],
input[type=number][data-state=invalid],
input[type=datetime-local][data-state=invalid],
input[type=date][data-state=invalid],
select[data-state=invalid],
textarea[data-state=invalid] {
  border-color: var(--color-negative, red);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-neutral, blue);
  box-shadow: 0 0 0 4px var(--color-neutral-light, #eee);
  outline: 0;
}

.menu {
  display: none;
}
@media (min-width: 900px) {
  .menu {
    display: block;
  }
}

.menu__link {
  color: var(--menu-link-color, var(--color-gray-70));
  text-decoration: none;
}
.menu__link:hover {
  --menu-link-color: var(--menu-link-color-hover, var(--color-gray-90));
}

.hamburger {
  --bar-color: var(--color-black, black);
  position: relative;
  z-index: 9;
}
@media (min-width: 900px) {
  .hamburger {
    display: none;
  }
}

.hamburger .bar {
  width: 35px;
  height: 3px;
  background-color: var(--bar-color);
  margin: 6px 0;
  transition: 0.4s;
  display: block;
}

.hamburger[data-state=open] .bar:nth-child(1) {
  -webkit-transform: rotate(-45deg) translate(-4px, 6px);
  transform: rotate(-45deg) translate(-4px, 6px);
}

.hamburger[data-state=open] .bar:nth-child(2) {
  opacity: 0;
}

.hamburger[data-state=open] .bar:nth-child(3) {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.mobile-menu {
  background-color: var(--color-white, white);
  box-shadow: var(--shadow-2xl);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--space-64, 320px);
  z-index: 10;
  padding-top: var(--space-10, 40px);
  padding-bottom: var(--space-10, 40px);
  transform: translateX(-100vw);
  transition: transform 500ms ease-in-out;
  will-change: transform;
}
.mobile-menu ul {
  font-size: var(--size-lg, 1.2em);
}
.mobile-menu a {
  color: var(--link-color, blue);
  font-weight: var(--weight-bold, 700);
  display: block;
  padding: var(--space-4, 16px) var(--space-8, 32px);
  text-decoration: none;
}
.mobile-menu .mobile-menu__phone {
  margin-top: auto;
  padding: var(--space-4, 16px) var(--space-8, 32px);
}
.mobile-menu .mobile-menu__phone a {
  color: var(--color-black, black);
  font-size: var(--size-xl, 1.4em);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-tight, -0.5px);
  padding: 0;
}
.mobile-menu[data-state=open] {
  transform: translateX(0);
  transition: transform 250ms ease-in-out;
}
@media (min-width: 900px) {
  .mobile-menu {
    display: none;
  }
}

.page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.page-header {
  display: flex;
  justify-content: center;
}
.page-header__menu {
  display: none;
}
@media (min-width: 768px) {
  .page-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }
  .page-header__logo {
    grid-column: 2;
    display: flex;
    justify-content: center;
  }
  .page-header__menu {
    display: flex;
  }
}

@media (min-width: 768px) {
  .social-media-links {
    display: none;
  }
}

/* Utilities */
/**
 * Alignment Utilities
 *
 * These utilities are meant to be used with Grid or Flex properties
 */
.items-start {
  align-items: flex-start;
}

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

.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

@media (min-width: 460px) {
  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }
}
@media (min-width: 768px) {
  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }
}
@media (min-width: 1024px) {
  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }
}
/** Auto Grid **/
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 10rem), 1fr));
  gap: var(--gap, 1em);
}

.radius-base {
  border-radius: 0.25rem;
}

.radius-full {
  border-radius: 99999px;
}

/** Cluster Utility **/
.cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap, 1em);
}

.c-gray-90 {
  color: #373946;
}

.bg-gray-90 {
  background-color: #373946;
}

.c-gray-70 {
  color: #565869;
}

.bg-gray-70 {
  background-color: #565869;
}

.c-gray-50 {
  color: #77798a;
}

.bg-gray-50 {
  background-color: #77798a;
}

.c-gray-30 {
  color: #b3b4bd;
}

.bg-gray-30 {
  background-color: #b3b4bd;
}

.c-gray-10 {
  color: #eeeef0;
}

.bg-gray-10 {
  background-color: #eeeef0;
}

.c-primary {
  color: #191a22;
}

.bg-primary {
  background-color: #191a22;
}

.c-black {
  color: #050608;
}

.bg-black {
  background-color: #050608;
}

.c-white {
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

.c-brand {
  color: #084e67;
}

.bg-brand {
  background-color: #084e67;
}

/** Container Utility **/
.container {
  max-width: var(--max-width, 20rem);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 420px) {
  .container {
    --max-width: 28rem;
  }
}
@media (min-width: 768px) {
  .container {
    --max-width: 70rem;
  }
}
@media (min-width: 1024px) {
  .container {
    --max-width: 80rem;
  }
}

.flex {
  display: flex;
}

/** Flow Utility **/
.flow > * {
  --flow-space: var(--space-4, 1em);
}

.flow > * + * {
  margin-top: var(--flow-space);
}

.flow-space-px > * {
  --flow-space: 1px;
}

.flow-space-half > * {
  --flow-space: 0.125rem;
}

.flow-space-1 > * {
  --flow-space: 0.25rem;
}

.flow-space-2 > * {
  --flow-space: 0.5rem;
}

.flow-space-3 > * {
  --flow-space: 0.75rem;
}

.flow-space-4 > * {
  --flow-space: 1rem;
}

.flow-space-6 > * {
  --flow-space: 1.5rem;
}

.flow-space-8 > * {
  --flow-space: 2rem;
}

.flow-space-10 > * {
  --flow-space: 2.5rem;
}

.flow-space-12 > * {
  --flow-space: 3rem;
}

.flow-space-16 > * {
  --flow-space: 4rem;
}

.flow-space-20 > * {
  --flow-space: 5rem;
}

.flow-space-24 > * {
  --flow-space: 6rem;
}

.flow-space-28 > * {
  --flow-space: 7rem;
}

.flow-space-32 > * {
  --flow-space: 8rem;
}

.flow-space-40 > * {
  --flow-space: 10rem;
}

.flow-space-48 > * {
  --flow-space: 12rem;
}

.flow-space-56 > * {
  --flow-space: 14rem;
}

.flow-space-64 > * {
  --flow-space: 16rem;
}

/* Font family */
.font-base {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Font size */
.size-xs {
  font-size: clamp(0.6075rem, 0.5636rem + 0.2195vw, 0.72rem);
}

.size-sm {
  font-size: clamp(0.7294rem, 0.6628rem + 0.3329vw, 0.9rem);
}

.size-base {
  font-size: clamp(0.875rem, 0.7774rem + 0.4878vw, 1.125rem);
}

.size-lg {
  font-size: clamp(1.05rem, 0.911rem + 0.6951vw, 1.4063rem);
}

.size-xl {
  font-size: clamp(1.26rem, 1.0656rem + 0.972vw, 1.7581rem);
}

.size-2xl {
  font-size: clamp(1.5119rem, 1.2443rem + 1.3378vw, 2.1975rem);
}

.size-3xl {
  font-size: clamp(1.8144rem, 1.4505rem + 1.8195vw, 2.7469rem);
}

.size-4xl {
  font-size: clamp(2.1775rem, 1.6875rem + 2.45vw, 3.4331rem);
}

.size-5xl {
  font-size: clamp(2.6125rem, 1.9574rem + 3.2756vw, 4.2913rem);
}

.size-6xl {
  font-size: clamp(3.135rem, 2.265rem + 4.35vw, 5.3644rem);
}

/* Weight */
.weight-normal {
  font-weight: 400;
}

.weight-bold {
  font-weight: 700;
}

/* Leading / Line Height */
.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.1;
}

.leading-base {
  line-height: 1.5;
}

.leading-loose {
  line-height: 1.8;
}

/* Tracking / Letter Spacing */
.tracking-tight {
  letter-spacing: -0.025rem;
}

.tracking-base {
  letter-spacing: auto;
}

.tracking-wide {
  letter-spacing: 0.05rem;
}

.tracking-loose {
  letter-spacing: 0.1rem;
}

/* Text Alignment */
.align-left {
  text-align: left;
}

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

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

/* Text Style */
.uppercase {
  text-transform: uppercase;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
  grid-template-rows: repeat(var(--grid-rows, auto), 1fr);
  gap: var(--gap);
}

.cols-1 {
  --grid-columns: 1;
}

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

.col-span-1 {
  grid-column-end: span i;
}

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

.row-start-1 {
  grid-row-start: 1;
}

.row-span-1 {
  grid-row-end: span i;
}

.cols-2 {
  --grid-columns: 2;
}

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

.col-span-2 {
  grid-column-end: span i;
}

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

.row-start-2 {
  grid-row-start: 2;
}

.row-span-2 {
  grid-row-end: span i;
}

.cols-3 {
  --grid-columns: 3;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-span-3 {
  grid-column-end: span i;
}

.rows-3 {
  --grid-rows: 3;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-span-3 {
  grid-row-end: span i;
}

.cols-4 {
  --grid-columns: 4;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-span-4 {
  grid-column-end: span i;
}

.rows-4 {
  --grid-rows: 4;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-span-4 {
  grid-row-end: span i;
}

.cols-5 {
  --grid-columns: 5;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-span-5 {
  grid-column-end: span i;
}

.rows-5 {
  --grid-rows: 5;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-span-5 {
  grid-row-end: span i;
}

.cols-6 {
  --grid-columns: 6;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-span-6 {
  grid-column-end: span i;
}

.rows-6 {
  --grid-rows: 6;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-span-6 {
  grid-row-end: span i;
}

.cols-7 {
  --grid-columns: 7;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-span-7 {
  grid-column-end: span i;
}

.rows-7 {
  --grid-rows: 7;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-span-7 {
  grid-row-end: span i;
}

.cols-8 {
  --grid-columns: 8;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-span-8 {
  grid-column-end: span i;
}

.rows-8 {
  --grid-rows: 8;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-span-8 {
  grid-row-end: span i;
}

.cols-9 {
  --grid-columns: 9;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-span-9 {
  grid-column-end: span i;
}

.rows-9 {
  --grid-rows: 9;
}

.row-start-9 {
  grid-row-start: 9;
}

.row-span-9 {
  grid-row-end: span i;
}

.cols-10 {
  --grid-columns: 10;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-span-10 {
  grid-column-end: span i;
}

.rows-10 {
  --grid-rows: 10;
}

.row-start-10 {
  grid-row-start: 10;
}

.row-span-10 {
  grid-row-end: span i;
}

.cols-11 {
  --grid-columns: 11;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-span-11 {
  grid-column-end: span i;
}

.rows-11 {
  --grid-rows: 11;
}

.row-start-11 {
  grid-row-start: 11;
}

.row-span-11 {
  grid-row-end: span i;
}

.cols-12 {
  --grid-columns: 12;
}

.col-start-12 {
  grid-column-start: 12;
}

.col-span-12 {
  grid-column-end: span i;
}

.rows-12 {
  --grid-rows: 12;
}

.row-start-12 {
  grid-row-start: 12;
}

.row-span-12 {
  grid-row-end: span i;
}

@media (min-width: 460px) {
  .sm\:cols-1 {
    --grid-columns: 1;
  }

  .sm\:col-start-1 {
    grid-column-start: 1;
  }

  .sm\:col-span-1 {
    grid-column-end: span 1;
  }

  .sm\:rows-1 {
    --grid-rows: 1;
  }

  .sm\:row-start-1 {
    grid-row-start: 1;
  }

  .sm\:row-span-1 {
    grid-row-end: span i;
  }

  .sm\:cols-2 {
    --grid-columns: 2;
  }

  .sm\:col-start-2 {
    grid-column-start: 2;
  }

  .sm\:col-span-2 {
    grid-column-end: span 2;
  }

  .sm\:rows-2 {
    --grid-rows: 2;
  }

  .sm\:row-start-2 {
    grid-row-start: 2;
  }

  .sm\:row-span-2 {
    grid-row-end: span i;
  }

  .sm\:cols-3 {
    --grid-columns: 3;
  }

  .sm\:col-start-3 {
    grid-column-start: 3;
  }

  .sm\:col-span-3 {
    grid-column-end: span 3;
  }

  .sm\:rows-3 {
    --grid-rows: 3;
  }

  .sm\:row-start-3 {
    grid-row-start: 3;
  }

  .sm\:row-span-3 {
    grid-row-end: span i;
  }

  .sm\:cols-4 {
    --grid-columns: 4;
  }

  .sm\:col-start-4 {
    grid-column-start: 4;
  }

  .sm\:col-span-4 {
    grid-column-end: span 4;
  }

  .sm\:rows-4 {
    --grid-rows: 4;
  }

  .sm\:row-start-4 {
    grid-row-start: 4;
  }

  .sm\:row-span-4 {
    grid-row-end: span i;
  }

  .sm\:cols-5 {
    --grid-columns: 5;
  }

  .sm\:col-start-5 {
    grid-column-start: 5;
  }

  .sm\:col-span-5 {
    grid-column-end: span 5;
  }

  .sm\:rows-5 {
    --grid-rows: 5;
  }

  .sm\:row-start-5 {
    grid-row-start: 5;
  }

  .sm\:row-span-5 {
    grid-row-end: span i;
  }

  .sm\:cols-6 {
    --grid-columns: 6;
  }

  .sm\:col-start-6 {
    grid-column-start: 6;
  }

  .sm\:col-span-6 {
    grid-column-end: span 6;
  }

  .sm\:rows-6 {
    --grid-rows: 6;
  }

  .sm\:row-start-6 {
    grid-row-start: 6;
  }

  .sm\:row-span-6 {
    grid-row-end: span i;
  }

  .sm\:cols-7 {
    --grid-columns: 7;
  }

  .sm\:col-start-7 {
    grid-column-start: 7;
  }

  .sm\:col-span-7 {
    grid-column-end: span 7;
  }

  .sm\:rows-7 {
    --grid-rows: 7;
  }

  .sm\:row-start-7 {
    grid-row-start: 7;
  }

  .sm\:row-span-7 {
    grid-row-end: span i;
  }

  .sm\:cols-8 {
    --grid-columns: 8;
  }

  .sm\:col-start-8 {
    grid-column-start: 8;
  }

  .sm\:col-span-8 {
    grid-column-end: span 8;
  }

  .sm\:rows-8 {
    --grid-rows: 8;
  }

  .sm\:row-start-8 {
    grid-row-start: 8;
  }

  .sm\:row-span-8 {
    grid-row-end: span i;
  }

  .sm\:cols-9 {
    --grid-columns: 9;
  }

  .sm\:col-start-9 {
    grid-column-start: 9;
  }

  .sm\:col-span-9 {
    grid-column-end: span 9;
  }

  .sm\:rows-9 {
    --grid-rows: 9;
  }

  .sm\:row-start-9 {
    grid-row-start: 9;
  }

  .sm\:row-span-9 {
    grid-row-end: span i;
  }

  .sm\:cols-10 {
    --grid-columns: 10;
  }

  .sm\:col-start-10 {
    grid-column-start: 10;
  }

  .sm\:col-span-10 {
    grid-column-end: span 10;
  }

  .sm\:rows-10 {
    --grid-rows: 10;
  }

  .sm\:row-start-10 {
    grid-row-start: 10;
  }

  .sm\:row-span-10 {
    grid-row-end: span i;
  }

  .sm\:cols-11 {
    --grid-columns: 11;
  }

  .sm\:col-start-11 {
    grid-column-start: 11;
  }

  .sm\:col-span-11 {
    grid-column-end: span 11;
  }

  .sm\:rows-11 {
    --grid-rows: 11;
  }

  .sm\:row-start-11 {
    grid-row-start: 11;
  }

  .sm\:row-span-11 {
    grid-row-end: span i;
  }

  .sm\:cols-12 {
    --grid-columns: 12;
  }

  .sm\:col-start-12 {
    grid-column-start: 12;
  }

  .sm\:col-span-12 {
    grid-column-end: span 12;
  }

  .sm\:rows-12 {
    --grid-rows: 12;
  }

  .sm\:row-start-12 {
    grid-row-start: 12;
  }

  .sm\:row-span-12 {
    grid-row-end: span i;
  }
}
@media (min-width: 768px) {
  .md\:cols-1 {
    --grid-columns: 1;
  }

  .md\:col-start-1 {
    grid-column-start: 1;
  }

  .md\:col-span-1 {
    grid-column-end: span 1;
  }

  .md\:rows-1 {
    --grid-rows: 1;
  }

  .md\:row-start-1 {
    grid-row-start: 1;
  }

  .md\:row-span-1 {
    grid-row-end: span i;
  }

  .md\:cols-2 {
    --grid-columns: 2;
  }

  .md\:col-start-2 {
    grid-column-start: 2;
  }

  .md\:col-span-2 {
    grid-column-end: span 2;
  }

  .md\:rows-2 {
    --grid-rows: 2;
  }

  .md\:row-start-2 {
    grid-row-start: 2;
  }

  .md\:row-span-2 {
    grid-row-end: span i;
  }

  .md\:cols-3 {
    --grid-columns: 3;
  }

  .md\:col-start-3 {
    grid-column-start: 3;
  }

  .md\:col-span-3 {
    grid-column-end: span 3;
  }

  .md\:rows-3 {
    --grid-rows: 3;
  }

  .md\:row-start-3 {
    grid-row-start: 3;
  }

  .md\:row-span-3 {
    grid-row-end: span i;
  }

  .md\:cols-4 {
    --grid-columns: 4;
  }

  .md\:col-start-4 {
    grid-column-start: 4;
  }

  .md\:col-span-4 {
    grid-column-end: span 4;
  }

  .md\:rows-4 {
    --grid-rows: 4;
  }

  .md\:row-start-4 {
    grid-row-start: 4;
  }

  .md\:row-span-4 {
    grid-row-end: span i;
  }

  .md\:cols-5 {
    --grid-columns: 5;
  }

  .md\:col-start-5 {
    grid-column-start: 5;
  }

  .md\:col-span-5 {
    grid-column-end: span 5;
  }

  .md\:rows-5 {
    --grid-rows: 5;
  }

  .md\:row-start-5 {
    grid-row-start: 5;
  }

  .md\:row-span-5 {
    grid-row-end: span i;
  }

  .md\:cols-6 {
    --grid-columns: 6;
  }

  .md\:col-start-6 {
    grid-column-start: 6;
  }

  .md\:col-span-6 {
    grid-column-end: span 6;
  }

  .md\:rows-6 {
    --grid-rows: 6;
  }

  .md\:row-start-6 {
    grid-row-start: 6;
  }

  .md\:row-span-6 {
    grid-row-end: span i;
  }

  .md\:cols-7 {
    --grid-columns: 7;
  }

  .md\:col-start-7 {
    grid-column-start: 7;
  }

  .md\:col-span-7 {
    grid-column-end: span 7;
  }

  .md\:rows-7 {
    --grid-rows: 7;
  }

  .md\:row-start-7 {
    grid-row-start: 7;
  }

  .md\:row-span-7 {
    grid-row-end: span i;
  }

  .md\:cols-8 {
    --grid-columns: 8;
  }

  .md\:col-start-8 {
    grid-column-start: 8;
  }

  .md\:col-span-8 {
    grid-column-end: span 8;
  }

  .md\:rows-8 {
    --grid-rows: 8;
  }

  .md\:row-start-8 {
    grid-row-start: 8;
  }

  .md\:row-span-8 {
    grid-row-end: span i;
  }

  .md\:cols-9 {
    --grid-columns: 9;
  }

  .md\:col-start-9 {
    grid-column-start: 9;
  }

  .md\:col-span-9 {
    grid-column-end: span 9;
  }

  .md\:rows-9 {
    --grid-rows: 9;
  }

  .md\:row-start-9 {
    grid-row-start: 9;
  }

  .md\:row-span-9 {
    grid-row-end: span i;
  }

  .md\:cols-10 {
    --grid-columns: 10;
  }

  .md\:col-start-10 {
    grid-column-start: 10;
  }

  .md\:col-span-10 {
    grid-column-end: span 10;
  }

  .md\:rows-10 {
    --grid-rows: 10;
  }

  .md\:row-start-10 {
    grid-row-start: 10;
  }

  .md\:row-span-10 {
    grid-row-end: span i;
  }

  .md\:cols-11 {
    --grid-columns: 11;
  }

  .md\:col-start-11 {
    grid-column-start: 11;
  }

  .md\:col-span-11 {
    grid-column-end: span 11;
  }

  .md\:rows-11 {
    --grid-rows: 11;
  }

  .md\:row-start-11 {
    grid-row-start: 11;
  }

  .md\:row-span-11 {
    grid-row-end: span i;
  }

  .md\:cols-12 {
    --grid-columns: 12;
  }

  .md\:col-start-12 {
    grid-column-start: 12;
  }

  .md\:col-span-12 {
    grid-column-end: span 12;
  }

  .md\:rows-12 {
    --grid-rows: 12;
  }

  .md\:row-start-12 {
    grid-row-start: 12;
  }

  .md\:row-span-12 {
    grid-row-end: span i;
  }
}
@media (min-width: 1024px) {
  .lg\:cols-1 {
    --grid-columns: 1;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-span-1 {
    grid-column-end: span 1;
  }

  .lg\:rows-1 {
    --grid-rows: 1;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-span-1 {
    grid-row-end: span i;
  }

  .lg\:cols-2 {
    --grid-columns: 2;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:col-span-2 {
    grid-column-end: span 2;
  }

  .lg\:rows-2 {
    --grid-rows: 2;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:row-span-2 {
    grid-row-end: span i;
  }

  .lg\:cols-3 {
    --grid-columns: 3;
  }

  .lg\:col-start-3 {
    grid-column-start: 3;
  }

  .lg\:col-span-3 {
    grid-column-end: span 3;
  }

  .lg\:rows-3 {
    --grid-rows: 3;
  }

  .lg\:row-start-3 {
    grid-row-start: 3;
  }

  .lg\:row-span-3 {
    grid-row-end: span i;
  }

  .lg\:cols-4 {
    --grid-columns: 4;
  }

  .lg\:col-start-4 {
    grid-column-start: 4;
  }

  .lg\:col-span-4 {
    grid-column-end: span 4;
  }

  .lg\:rows-4 {
    --grid-rows: 4;
  }

  .lg\:row-start-4 {
    grid-row-start: 4;
  }

  .lg\:row-span-4 {
    grid-row-end: span i;
  }

  .lg\:cols-5 {
    --grid-columns: 5;
  }

  .lg\:col-start-5 {
    grid-column-start: 5;
  }

  .lg\:col-span-5 {
    grid-column-end: span 5;
  }

  .lg\:rows-5 {
    --grid-rows: 5;
  }

  .lg\:row-start-5 {
    grid-row-start: 5;
  }

  .lg\:row-span-5 {
    grid-row-end: span i;
  }

  .lg\:cols-6 {
    --grid-columns: 6;
  }

  .lg\:col-start-6 {
    grid-column-start: 6;
  }

  .lg\:col-span-6 {
    grid-column-end: span 6;
  }

  .lg\:rows-6 {
    --grid-rows: 6;
  }

  .lg\:row-start-6 {
    grid-row-start: 6;
  }

  .lg\:row-span-6 {
    grid-row-end: span i;
  }

  .lg\:cols-7 {
    --grid-columns: 7;
  }

  .lg\:col-start-7 {
    grid-column-start: 7;
  }

  .lg\:col-span-7 {
    grid-column-end: span 7;
  }

  .lg\:rows-7 {
    --grid-rows: 7;
  }

  .lg\:row-start-7 {
    grid-row-start: 7;
  }

  .lg\:row-span-7 {
    grid-row-end: span i;
  }

  .lg\:cols-8 {
    --grid-columns: 8;
  }

  .lg\:col-start-8 {
    grid-column-start: 8;
  }

  .lg\:col-span-8 {
    grid-column-end: span 8;
  }

  .lg\:rows-8 {
    --grid-rows: 8;
  }

  .lg\:row-start-8 {
    grid-row-start: 8;
  }

  .lg\:row-span-8 {
    grid-row-end: span i;
  }

  .lg\:cols-9 {
    --grid-columns: 9;
  }

  .lg\:col-start-9 {
    grid-column-start: 9;
  }

  .lg\:col-span-9 {
    grid-column-end: span 9;
  }

  .lg\:rows-9 {
    --grid-rows: 9;
  }

  .lg\:row-start-9 {
    grid-row-start: 9;
  }

  .lg\:row-span-9 {
    grid-row-end: span i;
  }

  .lg\:cols-10 {
    --grid-columns: 10;
  }

  .lg\:col-start-10 {
    grid-column-start: 10;
  }

  .lg\:col-span-10 {
    grid-column-end: span 10;
  }

  .lg\:rows-10 {
    --grid-rows: 10;
  }

  .lg\:row-start-10 {
    grid-row-start: 10;
  }

  .lg\:row-span-10 {
    grid-row-end: span i;
  }

  .lg\:cols-11 {
    --grid-columns: 11;
  }

  .lg\:col-start-11 {
    grid-column-start: 11;
  }

  .lg\:col-span-11 {
    grid-column-end: span 11;
  }

  .lg\:rows-11 {
    --grid-rows: 11;
  }

  .lg\:row-start-11 {
    grid-row-start: 11;
  }

  .lg\:row-span-11 {
    grid-row-end: span i;
  }

  .lg\:cols-12 {
    --grid-columns: 12;
  }

  .lg\:col-start-12 {
    grid-column-start: 12;
  }

  .lg\:col-span-12 {
    grid-column-end: span 12;
  }

  .lg\:rows-12 {
    --grid-rows: 12;
  }

  .lg\:row-start-12 {
    grid-row-start: 12;
  }

  .lg\:row-span-12 {
    grid-row-end: span i;
  }
}
.mw-md {
  max-width: 50ch;
}

.shadow-sm {
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}

.text-shadow-sm {
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}

.shadow-base {
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
}

.text-shadow-base {
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
}

.shadow-lg {
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.6rem 1rem rgba(0, 0, 0, 0.05);
}

.text-shadow-lg {
  text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.6rem 1rem rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.6rem 0.8rem rgba(0, 0, 0, 0.05), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.05), 0 1rem 1.6rem rgba(0, 0, 0, 0.05);
}

.text-shadow-xl {
  text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.6rem 0.8rem rgba(0, 0, 0, 0.05), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.05), 0 1rem 1.6rem rgba(0, 0, 0, 0.05);
}

.shadow-2xl {
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.8rem 1rem rgba(0, 0, 0, 0.05), 0 1rem 1.4rem rgba(0, 0, 0, 0.05), 0 1.2rem 2rem rgba(0, 0, 0, 0.05), 0 1.4rem 2.2rem rgba(0, 0, 0, 0.05);
}

.text-shadow-2xl {
  text-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.8rem 1rem rgba(0, 0, 0, 0.05), 0 1rem 1.4rem rgba(0, 0, 0, 0.05), 0 1.2rem 2rem rgba(0, 0, 0, 0.05), 0 1.4rem 2.2rem rgba(0, 0, 0, 0.05);
}

.px-px {
  padding-left: 1px;
  padding-right: 1px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.ml-px {
  margin-left: 1px;
}

.mt-px {
  margin-top: 1px;
}

.gap-px {
  gap: 1px;
}

.px-half {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.py-half {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.ml-half {
  margin-left: 0.125rem;
}

.mt-half {
  margin-top: 0.125rem;
}

.gap-half {
  gap: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

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

.gap-1 {
  gap: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

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

.gap-2 {
  gap: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

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

.gap-3 {
  gap: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

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

.gap-4 {
  gap: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.gap-6 {
  gap: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

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

.gap-8 {
  gap: 2rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.gap-10 {
  gap: 2.5rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.ml-12 {
  margin-left: 3rem;
}

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

.gap-12 {
  gap: 3rem;
}

.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ml-16 {
  margin-left: 4rem;
}

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

.gap-16 {
  gap: 4rem;
}

.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.ml-20 {
  margin-left: 5rem;
}

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

.gap-20 {
  gap: 5rem;
}

.px-24 {
  padding-left: 6rem;
  padding-right: 6rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.ml-24 {
  margin-left: 6rem;
}

.mt-24 {
  margin-top: 6rem;
}

.gap-24 {
  gap: 6rem;
}

.px-28 {
  padding-left: 7rem;
  padding-right: 7rem;
}

.py-28 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.ml-28 {
  margin-left: 7rem;
}

.mt-28 {
  margin-top: 7rem;
}

.gap-28 {
  gap: 7rem;
}

.px-32 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.ml-32 {
  margin-left: 8rem;
}

.mt-32 {
  margin-top: 8rem;
}

.gap-32 {
  gap: 8rem;
}

.px-40 {
  padding-left: 10rem;
  padding-right: 10rem;
}

.py-40 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.ml-40 {
  margin-left: 10rem;
}

.mt-40 {
  margin-top: 10rem;
}

.gap-40 {
  gap: 10rem;
}

.px-48 {
  padding-left: 12rem;
  padding-right: 12rem;
}

.py-48 {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.ml-48 {
  margin-left: 12rem;
}

.mt-48 {
  margin-top: 12rem;
}

.gap-48 {
  gap: 12rem;
}

.px-56 {
  padding-left: 14rem;
  padding-right: 14rem;
}

.py-56 {
  padding-top: 14rem;
  padding-bottom: 14rem;
}

.ml-56 {
  margin-left: 14rem;
}

.mt-56 {
  margin-top: 14rem;
}

.gap-56 {
  gap: 14rem;
}

.px-64 {
  padding-left: 16rem;
  padding-right: 16rem;
}

.py-64 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.ml-64 {
  margin-left: 16rem;
}

.mt-64 {
  margin-top: 16rem;
}

.gap-64 {
  gap: 16rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Vendor */
/**
 * a11y-dark theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 */
code[class*=language-],
pre[class*=language-] {
  color: #f8f8f2;
  background: none;
  font-family: var(--font-mono, monospace);
  font-size: var(--size-sm, 15px);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*=language-] {
  padding: 1em;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: var(--color-gray-90);
}

[data-theme=dark] :not(pre) > code[class*=language-],
[data-theme=dark] pre[class*=language-] {
  background: var(--color-gray-70);
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #d4d0ab;
}

.token.punctuation {
  color: #fefefe;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ffa07a;
}

.token.boolean,
.token.number {
  color: #00e0e0;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #abe338;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #00e0e0;
}

.token.atrule,
.token.attr-value,
.token.function {
  color: #ffd700;
}

.token.keyword {
  color: #00e0e0;
}

.token.regex,
.token.important {
  color: #ffd700;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

@media screen and (-ms-high-contrast: active) {
  code[class*=language-],
pre[class*=language-] {
    color: windowText;
    background: window;
  }

  :not(pre) > code[class*=language-],
pre[class*=language-] {
    background: window;
  }

  .token.important {
    background: highlight;
    color: window;
    font-weight: normal;
  }

  .token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
    font-weight: bold;
  }

  .token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
    color: highlight;
  }

  .token.attr-value,
.token.url {
    font-weight: normal;
  }
}