* {
  --color-light-color-1-lightness: 0.711;
  --color-light-color-1-chroma: 0.229;
  --color-light-color-1-hue: 136;
  --color-light-color-1: oklch(var(--color-light-color-1-lightness) var(--color-light-color-1-chroma) var(--color-light-color-1-hue));

  --color-light-color-7-lightness: 0.417;
  --color-light-color-7-chroma: 0.228;
  --color-light-color-7-hue: 296;
  --color-light-color-7: oklch(var(--color-light-color-7-lightness) var(--color-light-color-7-chroma) var(--color-light-color-7-hue));

  --color-light-color-8-lightness: 0.953;
  --color-light-color-8-chroma: 0.07;
  --color-light-color-8-hue: 164;
  --color-light-color-8: oklch(var(--color-light-color-8-lightness) var(--color-light-color-8-chroma) var(--color-light-color-8-hue));

  --color-light-color-9-lightness: 0.907;
  --color-light-color-9-chroma: 0.038;
  --color-light-color-9-hue: 308;
  --color-light-color-9: oklch(var(--color-light-color-9-lightness) var(--color-light-color-9-chroma) var(--color-light-color-9-hue));

  --color-light-color-10-lightness: 0.902;
  --color-light-color-10-chroma: 0.097;
  --color-light-color-10-hue: 89;
  --color-light-color-10: oklch(var(--color-light-color-10-lightness) var(--color-light-color-10-chroma) var(--color-light-color-10-hue));

  --color-light-color-11-lightness: 0.711;
  --color-light-color-11-chroma: 0.135;
  --color-light-color-11-hue: 254;
  --color-light-color-11: oklch(var(--color-light-color-11-lightness) var(--color-light-color-11-chroma) var(--color-light-color-11-hue));

  --color-light-color-12-lightness: 0.264;
  --color-light-color-12-chroma: 0.03;
  --color-light-color-12-hue: 284;
  --color-light-color-12: oklch(var(--color-light-color-12-lightness) var(--color-light-color-12-chroma) var(--color-light-color-12-hue));

  --color-light-color-13-lightness: 0.973;
  --color-light-color-13-chroma: 0;
  --color-light-color-13-hue: 1;
  --color-light-color-13: oklch(var(--color-light-color-13-lightness) var(--color-light-color-13-chroma) var(--color-light-color-13-hue));

  --color-light-color-14-lightness: 0.417;
  --color-light-color-14-chroma: 0.228;
  --color-light-color-14-hue: 296;
  --color-light-color-14: oklch(var(--color-light-color-14-lightness) var(--color-light-color-14-chroma) var(--color-light-color-14-hue));

  --color-light-color-15-lightness: 0.628;
  --color-light-color-15-chroma: 0.258;
  --color-light-color-15-hue: 29;
  --color-light-color-15: oklch(var(--color-light-color-15-lightness) var(--color-light-color-15-chroma) var(--color-light-color-15-hue));

  --color-light-color-16-lightness: 0.32;
  --color-light-color-16-chroma: 0.172;
  --color-light-color-16-hue: 298;
  --color-light-color-16: oklch(var(--color-light-color-16-lightness) var(--color-light-color-16-chroma) var(--color-light-color-16-hue));

  --color-light-color-17-lightness: 0.917;
  --color-light-color-17-chroma: 0.05;
  --color-light-color-17-hue: 296;
  --color-light-color-17: oklch(var(--color-light-color-17-lightness) var(--color-light-color-17-chroma) var(--color-light-color-17-hue));

  --color-dark-color-1-lightness: 0.9;
  --color-dark-color-1-chroma: 0.229;
  --color-dark-color-1-hue: 136;
  --color-dark-color-1: oklch(var(--color-dark-color-1-lightness) var(--color-dark-color-1-chroma) var(--color-dark-color-1-hue));

  --color-dark-color-7-lightness: 0.417;
  --color-dark-color-7-chroma: 0.228;
  --color-dark-color-7-hue: 296;
  --color-dark-color-7: oklch(var(--color-dark-color-7-lightness) var(--color-dark-color-7-chroma) var(--color-dark-color-7-hue));

  --color-dark-color-9-lightness: 0.907;
  --color-dark-color-9-chroma: 0.038;
  --color-dark-color-9-hue: 308;
  --color-dark-color-9: oklch(var(--color-dark-color-9-lightness) var(--color-dark-color-9-chroma) var(--color-dark-color-9-hue));

  --color-dark-color-10-lightness: 0.902;
  --color-dark-color-10-chroma: 0.097;
  --color-dark-color-10-hue: 89;
  --color-dark-color-10: oklch(var(--color-dark-color-10-lightness) var(--color-dark-color-10-chroma) var(--color-dark-color-10-hue));

  --color-dark-color-11-lightness: 0.711;
  --color-dark-color-11-chroma: 0.135;
  --color-dark-color-11-hue: 254;
  --color-dark-color-11: oklch(var(--color-dark-color-11-lightness) var(--color-dark-color-11-chroma) var(--color-dark-color-11-hue));

  --color-dark-color-13-lightness: 0.14;
  --color-dark-color-13-chroma: 0;
  --color-dark-color-13-hue: 1;
  --color-dark-color-13: oklch(var(--color-dark-color-13-lightness) var(--color-dark-color-13-chroma) var(--color-dark-color-13-hue));

  --color-dark-color-14-lightness: 0.45;
  --color-dark-color-14-chroma: 0.3;
  --color-dark-color-14-hue: 296;
  --color-dark-color-14: oklch(var(--color-dark-color-14-lightness) var(--color-dark-color-14-chroma) var(--color-dark-color-14-hue));

  --color-dark-color-15-lightness: 0.628;
  --color-dark-color-15-chroma: 0.258;
  --color-dark-color-15-hue: 29;
  --color-dark-color-15: oklch(var(--color-dark-color-15-lightness) var(--color-dark-color-15-chroma) var(--color-dark-color-15-hue));

  --color-dark-color-16-lightness: 0.32;
  --color-dark-color-16-chroma: 0.172;
  --color-dark-color-16-hue: 298;
  --color-dark-color-16: oklch(var(--color-dark-color-16-lightness) var(--color-dark-color-16-chroma) var(--color-dark-color-16-hue));

  --color-dark-color-17-lightness: 0.01;
  --color-dark-color-17-chroma: 0.2;
  --color-dark-color-17-hue: 296;
  --color-dark-color-17: oklch(var(--color-dark-color-17-lightness) var(--color-dark-color-17-chroma) var(--color-dark-color-17-hue));

  --color-light-neutral-1: oklch(0.01 0.01 136);
  --color-light-neutral-2: oklch(0.2 0.01 136);
  --color-light-neutral-3: oklch(0.3 0.01 136);
  --color-light-neutral-4: oklch(0.4 0.01 136);
  --color-light-neutral-5: oklch(0.5 0.01 136);
  --color-light-neutral-6: oklch(0.6 0.01 136);
  --color-light-neutral-7: oklch(0.7 0.01 136);
  --color-light-neutral-8: oklch(0.85 0.01 136);
  --color-light-neutral-9: oklch(0.95 0.01 136);
  --color-light-neutral-10: oklch(0.99 0.01 136);
  
  --color-dark-neutral-1: oklch(0.99 0.01 136);
  --color-dark-neutral-2: oklch(0.95 0.01 136);
  --color-dark-neutral-3: oklch(0.85 0.01 136);
  --color-dark-neutral-4: oklch(0.7 0.01 136);
  --color-dark-neutral-5: oklch(0.6 0.01 136);
  --color-dark-neutral-6: oklch(0.5 0.01 136);
  --color-dark-neutral-7: oklch(0.4 0.01 136);
  --color-dark-neutral-8: oklch(0.3 0.01 136);
  --color-dark-neutral-9: oklch(0.2 0.01 136);
  --color-dark-neutral-10: oklch(0.01 0.01 136);
  
  --shadow-color-light: oklch(0.07 0.1 136);
  --shadow-color-dark: oklch(0.3 0.03 136)
}

:root {
  color-scheme: light;
  --color-color-1: var(--color-light-color-1);
  --color-color-7: var(--color-light-color-7);
  --color-color-9: var(--color-light-color-9);
  --color-color-10: var(--color-light-color-10);
  --color-color-11: var(--color-light-color-11);
  --color-color-13: var(--color-light-color-13);
  --color-color-14: var(--color-light-color-14);
  --color-color-15: var(--color-light-color-15);
  --color-color-16: var(--color-light-color-16);
  --color-color-17: var(--color-light-color-17);
  --color-neutral-1: var(--color-light-neutral-1);
  --color-neutral-2: var(--color-light-neutral-2);
  --color-neutral-3: var(--color-light-neutral-3);
  --color-neutral-4: var(--color-light-neutral-4);
  --color-neutral-5: var(--color-light-neutral-5);
  --color-neutral-6: var(--color-light-neutral-6);
  --color-neutral-7: var(--color-light-neutral-7);
  --color-neutral-8: var(--color-light-neutral-8);
  --color-neutral-9: var(--color-light-neutral-9);
  --color-neutral-10: var(--color-light-neutral-10);
  --shadow-color: var(--shadow-color-light);
  --contrast-color: black;
  --contrast-color-mix-percent: 10%
}

@media(prefers-color-scheme:dark) {
  :root {
    color-scheme: dark;
    --color-color-1: var(--color-dark-color-1);
    --color-color-7: var(--color-dark-color-7);
    --color-color-9: var(--color-dark-color-9);
    --color-color-10: var(--color-dark-color-10);
    --color-color-11: var(--color-dark-color-11);
    --color-color-13: var(--color-dark-color-13);
    --color-color-14: var(--color-dark-color-14);
    --color-color-15: var(--color-dark-color-15);
    --color-color-16: var(--color-dark-color-16);
    --color-color-17: var(--color-dark-color-17);
    --color-neutral-1: var(--color-dark-neutral-1);
    --color-neutral-2: var(--color-dark-neutral-2);
    --color-neutral-3: var(--color-dark-neutral-3);
    --color-neutral-4: var(--color-dark-neutral-4);
    --color-neutral-5: var(--color-dark-neutral-5);
    --color-neutral-6: var(--color-dark-neutral-6);
    --color-neutral-7: var(--color-dark-neutral-7);
    --color-neutral-8: var(--color-dark-neutral-8);
    --color-neutral-9: var(--color-dark-neutral-9);
    --color-neutral-10: var(--color-dark-neutral-10);
    --shadow-color: var(--shadow-color-dark);
    --contrast-color: white;
    --contrast-color-mix-percent: 5%
  }
}

.light,
[color-scheme=light] {
  color-scheme: light;
  --color-color-1: var(--color-light-color-1);
  --color-color-7: var(--color-light-color-7);
  --color-color-9: var(--color-light-color-9);
  --color-color-10: var(--color-light-color-10);
  --color-color-11: var(--color-light-color-11);
  --color-color-13: var(--color-light-color-13);
  --color-color-14: var(--color-light-color-14);
  --color-color-15: var(--color-light-color-15);
  --color-color-16: var(--color-light-color-16);
  --color-color-17: var(--color-light-color-17);
  --color-neutral-1: var(--color-light-neutral-1);
  --color-neutral-2: var(--color-light-neutral-2);
  --color-neutral-3: var(--color-light-neutral-3);
  --color-neutral-4: var(--color-light-neutral-4);
  --color-neutral-5: var(--color-light-neutral-5);
  --color-neutral-6: var(--color-light-neutral-6);
  --color-neutral-7: var(--color-light-neutral-7);
  --color-neutral-8: var(--color-light-neutral-8);
  --color-neutral-9: var(--color-light-neutral-9);
  --color-neutral-10: var(--color-light-neutral-10);
  --shadow-color: var(--shadow-color-light);
  --contrast-color: black;
  --contrast-color-mix-percent: 10%
}

.dark,
[color-scheme=dark] {
  color-scheme: dark;
  --color-color-1: var(--color-dark-color-1);
  --color-color-7: var(--color-dark-color-7);
  --color-color-9: var(--color-dark-color-9);
  --color-color-10: var(--color-dark-color-10);
  --color-color-11: var(--color-dark-color-11);
  --color-color-13: var(--color-dark-color-13);
  --color-color-14: var(--color-dark-color-14);
  --color-color-15: var(--color-dark-color-15);
  --color-color-16: var(--color-dark-color-16);
  --color-color-17: var(--color-dark-color-17);
  --color-neutral-1: var(--color-dark-neutral-1);
  --color-neutral-2: var(--color-dark-neutral-2);
  --color-neutral-3: var(--color-dark-neutral-3);
  --color-neutral-4: var(--color-dark-neutral-4);
  --color-neutral-5: var(--color-dark-neutral-5);
  --color-neutral-6: var(--color-dark-neutral-6);
  --color-neutral-7: var(--color-dark-neutral-7);
  --color-neutral-8: var(--color-dark-neutral-8);
  --color-neutral-9: var(--color-dark-neutral-9);
  --color-neutral-10: var(--color-dark-neutral-10);
  --shadow-color: var(--shadow-color-dark);
  --contrast-color: white;
  --contrast-color-mix-percent: 5%
}
.ho-header {
  background: var(--color-neutral-10)
}

.ho-header div {
  flex-wrap: wrap;
  background: var(--color-color-2);
  color: var(--color-neutral-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s) 0 var(--space-2xs) 0;
}

.ho-header div .logo {
  flex: 0 0 auto;
  text-decoration: none
}





.ho-bubbles {
  color: var(--color-neutral-1);
  padding: var(--space-l-2xl) 0
}

.ho-bubbles div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-m-xl)
}

.ho-bubbles div h3 {
  color: var(--color-neutral-1);
  max-width: 30ch;
  text-align: left
}

.ho-bubbles div ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-m-xl)
}

.ho-bubbles div ul li {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  row-gap: var(--space-m);
  min-width: 13rem
}

.ho-bubbles div ul li .icon {
  background: var(--color-color-7);
  width: var(--space-3xl);
  height: var(--space-3xl);
  border-radius: 50%;
  padding: 0
}

.ho-bubbles div ul li .texts {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1em;
  align-items: center
}

.ho-bubbles div ul li .texts p {
  text-align: center;
  color: var(--color-neutral-1)
}

.ho-bubbles div ul li {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  row-gap: var(--space-m);
  min-width: 13rem
}

.ho-bubbles div ul li .icon {
  background: var(--color-color-7);
  width: var(--space-3xl);
  height: var(--space-3xl);
  border-radius: 50%;
  padding: 0
}

.ho-bubbles div ul li .texts {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1em;
  align-items: center
}

.ho-bubbles div ul li .texts p {
  text-align: center;
  color: var(--color-neutral-1)
}

.ho-bubbles div ul li {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  row-gap: var(--space-m);
  min-width: 13rem
}

.ho-bubbles div ul li .icon {
  background: var(--color-color-7);
  width: var(--space-3xl);
  height: var(--space-3xl);
  border-radius: 50%;
  padding: 0
}

.ho-bubbles div ul li .texts {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1em;
  align-items: center
}

.ho-bubbles div ul li .texts p {
  text-align: center;
  color: var(--color-neutral-1)
}

.ho-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-s)
}

.ho-login form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  border: 2px solid var(--color-neutral-6);
  padding: var(--space-m);
  width: 25rem;
  max-width: 100%;
  border-radius: var(--border-radius);
  z-index: 1;
}

.ho-register {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-s)
}

.ho-register form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  border: 2px solid var(--color-neutral-6);
  padding: var(--space-m);
  width: 25rem;
  max-width: 100%;
  border-radius: var(--border-radius)
}

.ho-quote blockquote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: var(--space-s);
  font-size: var(--font-size-0);
  background: var(--color-color-2);
  color: var(--color-neutral-1)
}

.ho-quote blockquote p {
  margin: 0 0 var(--space-3xs);
  display: flex;
  color: var(--color-light-neutral-9);
  max-width: fit-content;
  text-wrap: auto
}

.ho-quote blockquote p span {
  font-family: Georgia, serif;
  font-size: calc(2 * var(--font-size-6));
  line-height: .8;
  margin: 0 var(--space-xs) 0 0;
  height: 5rem;
  color: inherit
}

.ho-quote blockquote cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  margin: var(--space-3xs) auto auto var(--space-2xl)
}

.ho-cta-halves {
  background: var(--color-color-6);
  padding: var(--space-2xl) 0;
  align-items: center
}

.ho-cta-halves section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  row-gap: var(--space-xl);
  color: var(--color-neutral-1)
}

.ho-cta-halves section img {
  display: flex;
  flex: 1
}

.ho-cta-halves section div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 20rem;
  row-gap: var(--space-s)
}

.ho-cta-halves section div .primary {
  
}

);
  background-size: cover;
  background-position: bottom center;
  color: var(--color-light-neutral-10);
  padding: 12rem 0;
  row-gap: 2em; 
}

.ho-cta-left h1 {
  max-width: 16ch;
  text-shadow: 0 2px 2px var(--color-neutral-10);
  line-height: 1.3;
}

.ho-cta-left p {
  max-width: 35ch;
  text-shadow: 0 2px 2px var(--color-neutral-8);
  color: var(--color-neutral-3);
}

.ho-cta-left .wide {
  min-height: 15rem;
  object-fit: cover;
} %>

.ho-cta-center {
  justify-items: center;
  text-align: center;
  text-wrap: balance;
  row-gap: 2em;
  background: var(--color-color-7);
  padding: var(--space-l-2xl) 0;
  color: var(--color-neutral-1)
}

.ho-cta-center .wide {
  min-height: 15rem;
  object-fit: cover
}

.ho-cta-center p {
  max-width: 65ch
}

.ho-cta-center .primary {
  
}

.ho-cta-center-minimal {
  justify-items: center;
  text-align: center;
  text-wrap: balance;
  row-gap: 2em;
  background: var(--color-color-6);
  padding: var(--space-2xl) 0;
  color: var(--color-light-neutral-10)
}

.ho-cta-center-minimal h1 {
  max-width: 15ch
}

.ho-cta-center-minimal .primary {
  
}

.ho-cta-mobile {
  padding: var(--space-2xl) 0
}

.ho-cta-mobile section {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  justify-content: center
}

.ho-cta-mobile section div {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1;
  align-items: center
}

.ho-cta-mobile section div h1 {
  color: var(--color-color-3);
  text-align: center
}

.ho-cta-mobile section div footer {
  display: flex;
  gap: var(--space-s)
}

.ho-cta-mobile section div footer a {
  display: flex
}

.ho-cta-mobile section div footer a img {
  width: 10rem;
  height: auto;
  border-radius: 0
}

.ho-cta-mobile section div footer a {
  display: flex
}

.ho-cta-mobile section div footer a img {
  width: 10rem;
  height: auto;
  border-radius: 0
}

.ho-cta-mobile section img {
  height: auto;
  width: fit-content
}

.ho-article {
  background: var(--color-neutral-9);
  color: var(--color-neutral-1)
}

.ho-article span {
  color: var(--color-neutral-2);
  font-size: var(--font-size-1);
  margin: 1em auto auto 0
}

.ho-article h2 a {
  color: var(--color-neutral-1)
}

.ho-article p {
  margin: 1em auto auto 0
}

.ho-dialog {
  background: var(--color-neutral-8);
  border: 2px solid var(--color-neutral-6);
  border-radius: var(--border-radius);
  padding: 0;
  overflow: hidden;
  max-width: 30rem
}

.ho-dialog header {
  background: var(--color-neutral-9);
  color: var(--color-neutral-1);
  padding: var(--space-xs)
}

.ho-dialog main {
  color: var(--color-neutral-1);
  padding: var(--space-xs)
}

.ho-dialog footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--space-s);
  padding: var(--space-xs)
}

.ho-card {
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  max-width: 25rem;
  gap: 1em
}

.ho-card a img {
  width: 100%
}

.ho-card a p {
  color: var(--color-neutral-2)
}

.ho-product-card {
  display: flex;
  flex-direction: column;
  justify-items: center;
  min-width: 15rem;
  max-width: 25rem;
  text-align: center;
  row-gap: 1em;
  background: var(--color-color-4);
  padding: 1em;
  border-radius: var(--border-radius)
}

.ho-product-card a {
  align-self: center
}

.ho-product-card a img {
  width: 100%
}

.ho-product-card a p {
  color: var(--color-neutral-2)
}

.ho-product-card .primary {
  align-self: center
}

.ho-highlight ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  row-gap: var(--space-xl)
}

.ho-highlight ul li {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 15rem;
  gap: 1em
}

.ho-highlight ul li {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 15rem;
  gap: 1em
}

.ho-highlight ul li {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 15rem;
  gap: 1em
}

.ho-news ul {
  display: grid;
  grid-gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  list-style: none
}

.ho-news ul li {
  display: flex;
  flex-direction: column;
  gap: 1em
}

.ho-news ul li {
  display: flex;
  flex-direction: column;
  gap: 1em
}

.ho-news ul li {
  display: flex;
  flex-direction: column;
  gap: 1em
}

.ho-news ul li {
  display: flex;
  flex-direction: column;
  gap: 1em
}

.ho-news ul li {
  display: flex;
  flex-direction: column;
  gap: 1em
}

.ho-news ul li {
  display: flex;
  flex-direction: column;
  gap: 1em
}

.ho-article-detail {
  row-gap: 1em
}

.ho-article-detail h1 {
  max-width: 22ch
}

.ho-article-detail .summary-date {
  color: var(--color-neutral-2);
  font-size: var(--font-size-1)
}

.ho-article-detail p {
  margin: 0 auto
}

.ho-article-detail p {
  margin: 0 auto
}

.ho-article-detail p {
  margin: 0 auto
}

.ho-article-detail p {
  margin: 0 auto
}

.ho-product-detail {
  padding: var(--space-2xl) 0
}

.ho-product-detail section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-m);
  row-gap: var(--space-xl)
}

.ho-product-detail section img {
  display: flex;
  flex: 1
}

.ho-product-detail section div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 20rem;
  row-gap: var(--space-s)
}

.ho-product-detail section div .category {
  color: var(--color-neutral-4);
  border: 1px solid var(--color-neutral-4);
  border-radius: var(--border-radius);
  width: fit-content;
  padding: var(--space-3xs) var(--space-xs)
}

.ho-product-detail section div footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--space-s)
}

.ho-product-cart {
  padding: var(--space-m) 0
}

.ho-product-cart section {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m)
}

.ho-product-cart section ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-m);
  list-style: none;
  border-top: 1px solid var(--color-neutral-4);
  padding: var(--space-m) 0 0
}

.ho-product-cart section ul li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  row-gap: 0;
  padding: 0 0 var(--space-m);
  border-bottom: 1px solid var(--color-neutral-4)
}

.ho-product-cart section ul li img {
  max-width: 20rem
}

.ho-product-cart section ul li div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  row-gap: 0;
  flex: 1;
  justify-content: space-between
}

.ho-product-cart section ul li div div {
  display: flex;
  flex-direction: column
}

.ho-product-cart section ul li div footer ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-m);
  list-style: none
}

.ho-product-cart section ul li div footer ul li {
  display: flex;
  gap: var(--space-m)
}

.ho-product-cart section footer {
  display: flex;
  justify-content: flex-end
}

.ho-product-cart section footer ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-m);
  list-style: none
}

.ho-product-cart section footer ul li {
  display: flex;
  gap: var(--space-m)
}

.ho-horizontal-scroll ul::after {
  content: "";
  align-self: stretch;
  padding-inline-end: max(var(--space), (100vw - var(--content-max-width))/2 - var(--space))
}

.ho-horizontal-scroll {
  scrollbar-width: none;
  grid-template-columns: inherit;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none
}

.ho-horizontal-scroll ul {
  grid-column: standard;
  display: flex;
  align-items: center;
  gap: var(--space);
  list-style: none
}

.ho-horizontal-scroll ul li {
  flex: 0 0 auto;
  width: 30rem;
  aspect-ratio: 1/1;
  background: var(--color-color-1);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  scroll-snap-align: center
}

.ho-horizontal-scroll ul li {
  flex: 0 0 auto;
  width: 30rem;
  aspect-ratio: 1/1;
  background: var(--color-color-2);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  scroll-snap-align: center
}

.ho-horizontal-scroll ul li {
  flex: 0 0 auto;
  width: 30rem;
  aspect-ratio: 1/1;
  background: var(--color-color-3);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  scroll-snap-align: center
}

.ho-horizontal-scroll ul li {
  flex: 0 0 auto;
  width: 30rem;
  aspect-ratio: 1/1;
  background: var(--color-color-4);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  scroll-snap-align: center
}

.ho-horizontal-scroll ul li {
  flex: 0 0 auto;
  width: 30rem;
  aspect-ratio: 1/1;
  background: var(--color-color-5);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  scroll-snap-align: center
}

.ho-header-with-background {
  position: relative;
  overflow: hidden;
  min-height: 30em;
  margin: var(--space-l-2xl) 0
}

.ho-header-with-background div {
  position: relative;
  z-index: 1;
  position: absolute;
  bottom: var(--space-m)
}

.ho-header-with-background .full {
  position: absolute;
  object-fit: cover;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%
}

.ho-numbered-list {
  padding: var(--space-l-2xl) 0 var(--space-m)
}

.ho-numbered-list div {
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m)
}

.ho-numbered-list div ol {
  margin: 0 0 0 1rem;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  font-size: var(--font-size-2)
}

.ho-numbered-list div ol li p {
  font-size: var(--font-size-2)
}

.ho-numbered-list div ol li p {
  font-size: var(--font-size-2)
}

.ho-numbered-list div ol li p {
  font-size: var(--font-size-2)
}

.ho-numbered-list div ol li p {
  font-size: var(--font-size-2)
}

.ho-usp-element div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-l);
  color: var(--color-neutral-1);
  height: fit-content
}

.ho-usp-element div img {
  display: flex;
  min-width: 20rem;
  max-width: 25rem;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1
}

.ho-usp-element div aside {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: var(--space-s)
}

.ho-pricing {
  padding: var(--space-2xl) 0;
  background: var(--color-color-5)
}

.ho-pricing section {
  display: flex;
  flex-direction: column;
  gap: 2em
}

.ho-pricing section ul {
  list-style: none;
  display: flex;
  gap: 1em;
  border-radius: var(--border-radius);
  align-items: center;
  flex-wrap: wrap
}

.ho-pricing section ul .highlighted {
  background: var(--color-color-6);
  padding: var(--space-xl) var(--space-m);
  border-radius: var(--border-radius);
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  row-gap: .2em;
  column-gap: .2em;
  color: var(--color-light-neutral-10);
  min-width: 20rem
}

.ho-pricing section ul .highlighted h3 {
  margin: 0 0 .3em
}

.ho-pricing section ul .highlighted .primary {
  margin: 1em 0 0
}

.ho-pricing section ul li {
  background: var(--color-neutral-2);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  row-gap: .2em;
  column-gap: .2em;
  color: var(--color-light-neutral-1);
  min-width: 20rem
}

.ho-pricing section ul li h4 {
  margin: 0 0 .3em
}

.ho-pricing section ul li .secondary {
  margin: 1em 0 0
}

.ho-bubbles-row {
  color: var(--color-neutral-1);
  padding: var(--space-l-2xl) 0 var(--space-m)
}

.ho-bubbles-row div {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m-xl)
}

.ho-bubbles-row div h3 {
  color: var(--color-neutral-1);
  max-width: 30ch
}

.ho-bubbles-row div ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-m-xl);
  align-items: flex-start
}

.ho-bubbles-row div ul li {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m)
}

.ho-bubbles-row div ul li div {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center
}

.ho-bubbles-row div ul li div .icon {
  background: var(--color-color-7);
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  padding: .4em
}

.ho-bubbles-row div ul li p {
  color: var(--color-neutral-1)
}

.ho-bubbles-row div ul li {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m)
}

.ho-bubbles-row div ul li div {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center
}

.ho-bubbles-row div ul li div .icon {
  background: var(--color-color-7);
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  padding: .4em
}

.ho-bubbles-row div ul li p {
  color: var(--color-neutral-1)
}

.ho-bubbles-row div ul li {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m)
}

.ho-bubbles-row div ul li div {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center
}

.ho-bubbles-row div ul li div .icon {
  background: var(--color-color-7);
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  padding: .4em
}

.ho-bubbles-row div ul li p {
  color: var(--color-neutral-1)
}

.ho-email-button {
  display: flex
}

.ho-email-button input {
  border-right: none
}

.ho-email-button button {
  border-left: none;
  background: var(--color-color-1)
}

.n-footer-small {
  padding: var(--space-2xl) 0;
  box-shadow: 0 0 50px 40px var(--color-neutral-10);
}

.n-footer-small > section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.n-footer-small > span {
  color: var(--color-neutral-3);
  font-size: var(--font-size--2);
}

.n-footer-small aside.first {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.n-footer-small aside.second {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
}

.n-footer-small aside.second nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-width: 10rem;
}

.n-footer-small aside.second nav.social {
  min-width: fit-content;
}

.n-footer-small aside.second nav.social a {
  width: 2rem;
  height: 2rem;
  border-radius: 5rem;
}

.n-footer-small aside.second nav.social a.youtube {
  background: var(--color-neutral-1);
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xs);
}
html {
  background: var(--color-color-13);
  block-size: 100%;
  color: var(--color-neutral-1)
}

body {
  background: var(--color-color-13);
  color: var(--color-neutral-1);
  font-family: var(--font-family-1);
  font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1;
  font-variant-ligatures: normal;
  line-height: 1.5;
  print-color-adjust: exact
}

:focus-visible {
  outline: 3px solid var(--color-color-1)
}

::selection {
  background: var(--color-color-1);
  color: var(--color-light-neutral-1)
}

::marker {
  color: var(--color-color-1)
}

h1 {
  color: new property value;
  font-family: var(--font-family-1);
  font-size: var(--font-size-6);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance
}

h2 {
  font-family: var(--font-family-1);
  font-size: var(--font-size-5);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance
}

h3 {
  font-family: var(--font-family-1);
  font-size: var(--font-size-4);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance
}

h4 {
  font-family: var(--font-family-1);
  font-size: var(--font-size-3);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance
}

h5 {
  font-family: var(--font-family-1);
  font-size: var(--font-size-3);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance
}

h6 {
  font-family: var(--font-family-1);
  font-size: var(--font-size-1);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance
}

p {
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  text-wrap: ballance
}

a {
  color: var(--color-color-2);
  cursor: pointer;
  font-family: var(--font-family-1);
  text-decoration: none
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em
}

a:visited {}

.primary {
  background: var(--color-color-1);
  border: none;
  border-radius: 40px;
  color: var(--color-light-neutral-1);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  font-weight: 700;
  line-height: 1.4;
  padding: .4em 1.5em;
  text-decoration: none;
  width: fit-content
}

.primary:hover {
  text-decoration: none
}

.primary:active {}

.primary:disabled {
  cursor: not-allowed;
  opacity: .44
}

.secondary {
  background: var(--color-neutral-8);
  border: 2px solid var(--color-color-1);
  border-color: var(--color-color-1);
  border-radius: 40px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  justify-content: center;
  line-height: 1.1;
  padding: .4em 1.5em;
  text-decoration: none;
  transform: translateZ(0);
  transition: filter .2s ease-in-out;
  width: fit-content;
  color: var(--color-color-1);
}

.secondary:hover {
  filter: brightness(110%);
  text-decoration: none
}

.secondary:active {}

.secondary:disabled {
  cursor: not-allowed;
  opacity: .5
}

.tertiary {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  background: 0 0;
  border: none;
  color: var(--color-color-2);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-family-1);
  font-size: var(--font-size-1);
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transform: translateZ(0);
  transition: filter .2s ease-in-out;
  width: fit-content
}

.tertiary:hover {
  filter: brightness(110%);
  text-decoration: none
}

.tertiary:active {
  text-shadow: 2px 2px 2px var(--color-neutral-5)
}

.tertiary:disabled {
  cursor: not-allowed;
  opacity: .5
}

.delete {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  background: var(--color-color-15);
  border: none;
  border-radius: 40px;
  color: var(--color-light-neutral-9);
  cursor: pointer;
  flex-direction: column;
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  justify-content: center;
  line-height: 1.2;
  padding: var(--space-2xs) var(--space-s);
  transform: translateZ(0);
  transition: filter .2s ease-in-out;
  width: fit-content
}

.delete:hover {
  filter: brightness(110%)
}

.delete:active {}

.delete:disabled {
  cursor: not-allowed;
  opacity: .5
}

details {
  border: 2px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  color: var(--color-neutral-1);
  font-size: var(--font-size-0)
}

details summary {
  cursor: pointer;
  font-size: var(--font-size-0);
  font-weight: 700;
  padding: var(--space-2xs)
}

details div {
  padding: 0 var(--space-2xs) var(--space-2xs)
}

label {
  align-items: center;
  color: var(--color-neutral-1);
  display: flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  gap: var(--space-3xs);
  line-height: 1
}

input {
  accent-color: var(--color-color-1);
  background: var(--color-neutral-10);
  border: 2px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  color: var(--color-neutral-1);
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: 1;
  padding: .2em .8em
}

input[type=text] {
  border-radius: 40px
}

input[type=email] {
  border-radius: 40px
}

input[type=password] {
  border-radius: 40px
}

input[type=number] {
  width: 5rem
}

input[type=checkbox] {
  border: 1px solid var(--color-neutral-7);
  cursor: pointer;
  height: 20px;
  width: 20px
}

label.check {
  background: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: var(--space-s) var(--space-m);
  width: fit-content
}

label.check input[type=checkbox] {
  display: none
}

label.check:has(input[type=checkbox]:checked) {
  background: var(--color-color-1);
  color: var(--color-light-neutral-10)
}

input[type=radio] {
  appearance: none;
  border: 2px solid var(--color-neutral-7);
  border-radius: 50%;
  cursor: pointer;
  height: var(--space-s);
  width: var(--space-s)
}

input[type=radio]:hover {
  background: var(--color-color-1)
}

input[type=radio]:checked {
  background: var(--color-color-1);
  border: 2px solid var(--color-neutral-9);
  outline: 1px solid var(--color-color-1)
}

input[type=range] {
  cursor: pointer
}

textarea {
  accent-color: var(--color-color-1);
  background: var(--color-neutral-10);
  border: 2px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  color: var(--color-neutral-1);
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  line-height: initial;
  padding: .3em .6em
}

select {
  accent-color: var(--color-color-1);
  background: var(--color-neutral-10);
  border: 2px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  color: var(--color-neutral-1);
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  line-height: 1;
  padding: .3em .6em
}

img {
  border-radius: var(--border-radius);
  font-style: italic;
  height: auto;
  max-width: 100%;
  shape-margin: 1rem;
  vertical-align: middle
}

ul {
  list-style-type: initial;
  margin: 0;
  padding: 0
}

ul li {
  color: var(--color-neutral-1);
  margin: 0;
  padding: 0
}

ul li::marker {
  color: var(--color-color-1)
}

ol {
  list-style-type: decimal;
  margin: 0;
  padding: 0
}

ol li {
  color: var(--color-neutral-1);
  margin: 0;
  padding: 0
}

ol li::marker {
  color: var(--color-color-1)
}

.grid {
  --content-max-width: 60rem;
  --content-wider-2-width: 7rem;
  --content-wide-1-width: 2rem;
  
  --grid-gap: clamp(1rem, 6vw, 3rem);
  
  --standard: min(var(--content-max-width), 100% - var(--grid-gap) * 2);
  --wide-1: minmax(0, var(--content-wide-1-width));
  --wide-2: minmax(0, var(--content-wider-2-width));
  --full: minmax(var(--grid-gap), 1fr);
  
  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [wide-2-start] var(--wide-2)
    [wide-1-start] var(--wide-1)
    [standard-start] var(--standard) [standard-end]
    var(--wide-1) [wide-1-end]
    var(--wide-2) [wide-2-end]
    var(--full) [full-end];
  }
  
  .grid > * {
    grid-column: standard;
  }
  
  .grid .wide-1 {
    grid-column: wide-1;
  }
  
  .grid .wide-2 {
    grid-column: wide-2;
  }
  
  .grid .full {
    grid-column: full;
  }
  
  .hol-wrapping-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27ch, 1fr));
    gap: var(--space-m);
    justify-content: center;
    justify-items: center;
    align-items: start;
    padding: 0;
    width: 100%;
    direction: ltr;
  }
  
  .hol-scrolling-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(40ch, auto);
    gap: var(--space-xs);
    justify-content: start;
    align-items: center;
    padding: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  
  .hol-column {
    display: grid;
    grid-template-columns: minmax(auto, 1fr);
    gap: var(--space-xs);
    justify-items: center;
    width: 100%;
    padding: 0;
  }
  
  .hol-scrolling-column {
    display: grid;
    grid-template-columns: minmax(auto, 1fr);
    gap: var(--space-xs);
    justify-content: center;
    align-items: start;
    padding: 0;
    width: 100%;
    max-height: 20vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  
*,
*::before,
*::after {
  box-sizing: border-box
}

* {
  line-height: calc(1em + 0.5rem)
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0
}

ul[role=list],
ol[role=list] {
  list-style: none
}

body {
  min-height: 100vh
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance
}

img,
picture {
  max-width: 100%;
  display: block
}

img[alt=""],
img:not([alt]) {
  border: 5px solid red
}

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

textarea:not([rows]) {
  min-height: 10em
}

:target {
  scroll-margin-block: 5ex
}
:root {
  --shadow-drop-1: 0 2px 2px -0px var(--color-neutral-5);
  --shadow-drop-2: 0 2px 2px -1px var(--color-neutral-5), 0 4px 5px -1px var(--color-neutral-5);
  --shadow-drop-3: 0 2px 2px -2px var(--color-neutral-5), 0 4px 5px -2px var(--color-neutral-5), 0 8px 10px -2px var(--color-neutral-5);
  --shadow-drop-4: 0 2px 2px -3px var(--color-neutral-5), 0 4px 5px -3px var(--color-neutral-5), 0 8px 10px -3px var(--color-neutral-5), 0 16px 20px -3px var(--color-neutral-5);
  --shadow-drop-5: 0 2px 2px -4px var(--color-neutral-5), 0 4px 5px -4px var(--color-neutral-5), 0 8px 10px -4px var(--color-neutral-5), 0 16px 20px -4px var(--color-neutral-5), 0 32px 40px -4px var(--color-neutral-5);
  --shadow-drop-6: 0 2px 2px -5px var(--color-neutral-5), 0 4px 5px -5px var(--color-neutral-5), 0 8px 10px -5px var(--color-neutral-5), 0 16px 20px -5px var(--color-neutral-5), 0 32px 40px -5px var(--color-neutral-5), 0 64px 80px -5px var(--color-neutral-5);
  --shadow-inner-1: inset 0 0px 1px var(--color-neutral-5);
  --shadow-inner-2: inset 0 1px 2px var(--color-neutral-5);
  --shadow-inner-3: inset 0 2px 4px var(--color-neutral-5);
  --shadow-inner-4: inset 0 3px 8px var(--color-neutral-5);
  --shadow-inner-5: inset 0 4px 16px var(--color-neutral-5);
  --shadow-inner-6: inset 0 5px 32px var(--color-neutral-5)
}
:root {
  --space-3xs: clamp(0.25rem, calc(0.23102678rem + 0.094866075vw), 0.31640625rem);
  --space-2xs: clamp(0.5rem, calc(0.46205357rem + 0.18973215vw), 0.6328125rem);
  --space-xs: clamp(0.75rem, calc(0.69308037rem + 0.2845982vw), 0.94921875rem);
  --space-s: clamp(1rem, calc(0.92410713rem + 0.3794643vw), 1.265625rem);
  --space-m: clamp(1.5rem, calc(1.3861607rem + 0.5691964vw), 1.8984375rem);
  --space-l: clamp(2rem, calc(1.8482143rem + 0.7589286vw), 2.53125rem);
  --space-xl: clamp(3rem, calc(2.7723215rem + 1.1383928vw), 3.796875rem);
  --space-2xl: clamp(4rem, calc(3.6964285rem + 1.5178572vw), 5.0625rem);
  --space-3xl: clamp(6rem, calc(5.544643rem + 2.2767856vw), 7.59375rem);
  --space-3xs-2xs: clamp(0.25rem, calc(0.140625rem + 0.546875vw), 0.6328125rem);
  --space-2xs-xs: clamp(0.5rem, calc(0.37165177rem + 0.6417411vw), 0.94921875rem);
  --space-xs-s: clamp(0.75rem, calc(0.60267854rem + 0.73660713vw), 1.265625rem);
  --space-s-m: clamp(1rem, calc(0.74330354rem + 1.2834822vw), 1.8984375rem);
  --space-m-l: clamp(1.5rem, calc(1.2053571rem + 1.4732143vw), 2.53125rem);
  --space-l-xl: clamp(2rem, calc(1.4866071rem + 2.5669644vw), 3.796875rem);
  --space-xl-2xl: clamp(3rem, calc(2.4107141rem + 2.9464285vw), 5.0625rem);
  --space-2xl-3xl: clamp(4rem, calc(2.9732141rem + 5.133929vw), 7.59375rem);
  --space-s-l: clamp(1rem, calc(0.5625rem + 2.1875vw), 2.53125rem);
  --space-s-xl: clamp(1rem, calc(0.2008928rem + 3.9955359vw), 3.796875rem);
  --space-s-2xl: clamp(1rem, calc(-0.16071427rem + 5.803571vw), 5.0625rem);
  --space-s-3xl: clamp(1rem, calc(-0.88392866rem + 9.419643vw), 7.59375rem);
  --space-m-xl: clamp(1.5rem, calc(0.84375rem + 3.2812498vw), 3.796875rem);
  --space-m-2xl: clamp(1.5rem, calc(0.48214293rem + 5.0892854vw), 5.0625rem);
  --space-m-3xl: clamp(1.5rem, calc(-0.24107146rem + 8.705358vw), 7.59375rem);
  --space-l-xl: clamp(2rem, calc(1.4866071rem + 2.5669644vw), 3.796875rem);
  --space-l-2xl: clamp(2rem, calc(1.125rem + 4.375vw), 5.0625rem);
  --space-l-3xl: clamp(2rem, calc(0.4017856rem + 7.9910717vw), 7.59375rem)
}
:root {
  --font-family-1: 'Inter';
  --font-family-2: 'Monomaniac One';
  --font-size--2: clamp(0.69rem, calc(0.58rem + 0.60vw), 1.11rem);
  --font-size--1: clamp(0.83rem, calc(0.73rem + 0.50vw), 1.19rem);
  --font-size-0: clamp(1.00rem, calc(0.92rem + 0.38vw), 1.27rem);
  --font-size-1: clamp(1.20rem, calc(1.16rem + 0.21vw), 1.35rem);
  --font-size-2: clamp(1.44rem, calc(1.44rem + 0.00vw), 1.44rem);
  --font-size-3: clamp(1.73rem, calc(1.78rem + -0.27vw), 1.54rem);
  --font-size-4: clamp(2.07rem, calc(2.20rem + -0.62vw), 1.64rem);
  --font-size-5: clamp(2.49rem, calc(2.70rem + -1.05vw), 1.75rem);
  --font-size-6: clamp(2.99rem, calc(3.31rem + -1.60vw), 1.87rem);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 100;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 100;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dphiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 200;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 200;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdthiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 300;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 300;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTch9thiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 500;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 500;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc69thiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 600;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 600;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcB9xhiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 700;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcPtxhiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 800;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 800;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdxhiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 900;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZ1rib2Bg-4.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 900;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTccNxhiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-stretch: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dthiJ-Ek-7MeA.woff2") format("woff2");
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZ1rib2Bg-4.woff2") format("woff2");
}





@font-face {
  font-family: 'Monomaniac One';
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/monomaniacone/v12/4iC06K17YctZjx50EU-QlwPmcqRiqYkB5kwI.woff2") format("woff2");
}
:root {
  --border-radius: 0.2em
}
.calm {
  background-image: url( https://playleagues.app/assets/calm-logo-small-baddfe5385b24c1ffe7ff40b683978b663932aaf441076f77ffd2383bd80ff47.svg );
  background-repeat: no-repeat;
  color: transparent !important;
  background-size: cover;
  padding: 3px 16px;
  transform: translateY(0);
}

.calm:hover {
  background-image: url( https://playleagues.app/assets/calm-logo-4a46feefe3e37bb4b9095f2aa671051df59c630180d7b1e979b882da94d5ddda.svg );
  background-repeat: no-repeat;
  color: transparent !important;
  background-size: cover;
  background-position: center;
  padding: 13px 16px;
}

@media(prefers-color-scheme:dark) {
  .calm {
    filter: invert();
    -webkit-filter: invert();
  }
}
/* Arsenal */
.ARS {
  /* background-color: oklch(0.62 0.2 18); */
  /* background-image: url(https://playleagues.app/assets/clubs/ARS-b4336c755b79c093972873e958ac0e816d8f91e0f5967c38e19699752b3f07f1.png); */
}

/* Aston Villa */
.AVL {
  /* background-color: oklch(0.57 0.18 340); */
  /* background-image: url(https://playleagues.app/assets/clubs/AVL-576cc7dd117e9fd0739b899698583d9357c2c38427aafd93c42d5507edd909d5.png); */
}

/* Bournemouth */
.BOU {
  /* background-color: oklch(0.45 0.26 10); */
  /* background-image: url(https://playleagues.app/assets/clubs/BOU-7768486785988669ffcf251de89ebaf590976b00bdea1355aaf081e3345be9d6.png); */
}

/* Brentford */
.BRE {
  /* background-color: oklch(0.5 0.25 18); */
  /* background-image: url(https://playleagues.app/assets/clubs/BRE-62df3e901c45e4deb9cfb7a2fb801867b369a95c03dd54627fc84c832724f0e1.png); */
}

/* Brighton */
.BRI {
  /* background-color: oklch(0.65 0.23 250); */
  /* background-image: url(https://playleagues.app/assets/clubs/BRI-c791204c0d1698eb89a87dd21029129e2dd80a6d8d473abf75b19d9010d19df5.png); */
}

/* Burnley */
.BUR {
  /* background-color: oklch(0.45 0.18 340); */
  /* background-image: url(https://playleagues.app/assets/clubs/BUR-d00d516b2348cb78dfd534a74175eb42eca26d4759a6be2e0f932eed601efff4.png); */
}

/* Chelsea */
.CHE {
  /* background-color: oklch(0.55 0.23 250); */
  /* background-image: url(https://playleagues.app/assets/clubs/CHE-002d6faf771ee175a871ae8ec65f80c3bf7d59762785324c623335887a790999.png); */
}

/* Crystal Palace */
.CRY {
  /* background-color: oklch(0.62 0.2 260); */
  /* background-image: url(https://playleagues.app/assets/clubs/CRY-862cb379505b28921d0d22077b9d879edaa13c23b171a746acb296b950fbbecc.png); */
}

/* Everton */
.EVE {
  /* background-color: oklch(0.55 0.23 240); */
  /* background-image: url(https://playleagues.app/assets/clubs/EVE-662d3194cda12a15755241d5679286be2f91b713ee48854ed94c4300beb4a732.png); */
}

/* Fulham */
.FUL {
  /* background-color: oklch(0.6 0.02 0); */
  /* background-image: url(https://playleagues.app/assets/clubs/FUL-d8e707a00118aa367f4368042bcfa044a49672a3337bc7359cf7ed35731ac034.png); */
}

/* Liverpool */
.LIV {
  /* background-color: oklch(0.55 0.25 10); */
  /* background-image: url(https://playleagues.app/assets/clubs/LIV-265b04c4c0739506c7ef16192ab90e329c46ed828dac47c5ce05c5fa21b6a26f.png); */
}

/* Luton Town */
.LUT {
  /* background-color: oklch(0.6 0.2 40); */
  /* background-image: url(https://playleagues.app/assets/clubs/LUT-ead69290909480f091bdeee6d0ce55e649578e666b0698d15a699cc3d1f41e59.png); */
}

/* Manchester City */
.MCI {
  /* background-color: oklch(0.65 0.23 230); */
  /* background-image: url(https://playleagues.app/assets/clubs/MCI-57cfffa7328d5c330b37fdf606881aa144577b7835777784fe6438d43cc6fe96.png); */
}

/* Manchester United */
.MUN {
  /* background-color: oklch(0.55 0.25 10); */
  /* background-image: url(https://playleagues.app/assets/clubs/MUN-f9d93d62569280462b92ae5ab5573290e45eda72a8a752171cc115830051501c.png); */
}

/* Newcastle United */
.NEW {
  /* background-color: oklch(0.6 0.02 0); */
  /* background-image: url(https://playleagues.app/assets/clubs/NEW-60bb8753fd4e20d3dfa7df0540b80690cffcad082123c734af50a40d668551bb.png); */
}

/* Nottingham Forest */
.NFO {
  /* background-color: oklch(0.55 0.25 10); */
  /* background-image: url(https://playleagues.app/assets/clubs/NFO-135dc790578553537f905bc46275951836631d97e30e6c930f61a869478d3128.png); */
}

/* Sheffield United */
.SHU {
  /* background-color: oklch(0.55 0.25 10); */
  /* background-image: url(https://playleagues.app/assets/clubs/SHU-c028c68676cdd2fe0a74350eaa9f139f8c70721bdbe6eeb1e589ec2532ae4230.png); */
}

/* Tottenham Hotspur */
.TOT {
  /* background-color: oklch(0.7 0.02 0); */
  /* background-image: url(https://playleagues.app/assets/clubs/TOT-38ac47bb0d4fd688e21a8a39604dc09760d07ada84787f21657c40882233ce3e.png); */
}

/* West Ham United */
.WHU {
  /* background-color: oklch(0.55 0.18 340); */
  /* background-image: url(https://playleagues.app/assets/clubs/WHU-97b021ccf2b702ff88a5af476b1babd7b2f9583341ead9355f182a9d3b172eee.png); */
}

/* Wolverhampton Wanderers */
.WOL {
  /* background-color: oklch(0.65 0.2 40); */
  /* background-image: url(https://playleagues.app/assets/clubs/WOL-7edbbeb2b5cc49db46b3ab99bbdf85b8475467e12323ca0f48d07622ece5f113.png); */
}

/* Ipswitch */
.IPS {
  /* background-color: oklch(0.6 0.23 240); */
  /* background-image: url(https://playleagues.app/assets/clubs/IPS-d22d5b645d57dd56155d918c33d082eeb023fea321653f39d597e1b76b9e6de2.png); */
}

/* Southampton */
.SOU {
  /* background-color: oklch(0.55 0.25 10); */
  /* background-image: url(https://playleagues.app/assets/clubs/SOU-447350208a914c42b27490dee2c1c68d42f58dff04eb85c1cac3d4b6355ae945.png); */
}

/* Leicester City */
.LEI {
  /* background-color: oklch(0.55 0.25 240); */
  /* background-image: url(https://playleagues.app/assets/clubs/LEI-9dcdae25650d8e420e911fecce6f4b3a61a3a67e2e537a0f495a1ffffeb750ec.png); */
}

.c-logo {
  width: var(--space-xl);
  height: var(--space-xl);
  background-size: contain;
  background-color: transparent;
  display: none !important;
}

/* put this in to remove all club logos */
/* .c-logo {
  width: var(--space-xl);
  height: var(--space-xl);
  background-size: contain;
  background-image: none !important;
  border-radius: 50%;
} */
details div {
  padding: 0;
}

.btn-disabled {
  background: var(--color-neutral-8);
  cursor: not-allowed;
}

.ho-email-button input[type="email"] {
  padding: 0.5em 0 0.5em 2em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border: 2px solid var(--color-neutral-10);
  border-right: 0;
  z-index: 1;
}

.ho-email-button input[type="email"]:focus {
  outline: none;
}

.ho-email-button button {
  appearance: none;
  border: 2px solid var(--color-neutral-10);
  border-left: 0;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
  min-width: 4rem;
  display: flex;
  justify-content: center;
}

.ho-email-button button img {
  width: 2rem;
  margin: 0.3rem 0
}

p.highlight {
  background: var(--color-color-9);
  border-radius: 0.3em;
  width: fit-content;
  padding: 0.2em 2em;
  color: var(--color-light-neutral-1);
  font-weight: 600;
  font-size: var(--font-size-2);
  margin: var(--space-l) 0 0 0;
}

.ho-header {
  box-shadow: 0 0 50px 50px var(--color-neutral-10);
  z-index: 1;
}

.ho-header .hamburger {
  cursor: pointer;
  /* color: var(--color-color-14); */
}

.ho-header div nav a.profile-link {
  display: flex;
  flex-direction: row;
  gap: 0.7em;
  width: fit-content;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--color-light-neutral-9);
  border-radius: 2em;
  padding: 0 0.7em;
  margin: 0 1em 0 0;
  color: var(--color-light-neutral-9);
}

.ho-header div nav a.profile-link svg {
  height: 2.5rem;
  width: auto;
}

.ho-header div nav a.profile-link div {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
}

.ho-header div nav a.profile-link div span {
  font-size: var(--font-size--2);
  line-height: 1;
}

main.default,
main.profile,
main.rounds {
  background: linear-gradient(to bottom, var(--color-color-17), transparent);
  background-repeat: no-repeat;
  background-size: 100% 700px;
}

.logo {
  display: flex;
  gap: var(--space-3xs);
  color: var(--color-neutral-1);
  text-decoration: none;
  align-items: center;
}

.logo > svg {
  height: 1.8rem;
  width: auto;
}

.logo > h4 {
  font-family: var(--font-family-2);
  margin-bottom: var(--space-3xs);
  font-weight: 400;
}

footer .logo .name h4 {
  color: var(--color-light-neutral-10);
}

footer .logo .name span {
  color: var(--color-light-neutral-10);
}

aside.menu {
  position: fixed;
  background: var(--color-color-16);
  color: var(--color-light-neutral-10);
  z-index: 3;
  width: 100%;
  height: 100vh;
  transform: translate(0, -100%);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

aside.menu > div {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding: var(--space-m) 0 var(--space-xl) 0;
  align-items: flex-end;
}

aside.menu > div ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  list-style: none;
  text-align: right;
  margin: 0;
}

aside.menu > div ul li {
  color: var(--color-light-neutral-10);
  font-size: var(--font-size-2);
}

aside.menu > div ul li a {
  display: flex;
  justify-content: flex-end;
  gap: 0.2em;
  align-items: center;
}

aside.menu > div ul li a img {
  height: 2rem;
  width: 2rem;
}

aside.menu .close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

aside.menu.open {
  transform: none;
}

section {
  display: flex;
  flex-direction: column;
  gap: 1em;
  /* justify-content: center;  */
}

/* section h2 {
  margin: 1em 0 0 0;
  width: 100%;
} */

.home-rules ul {
  display: flex;
  flex-direction: column;
  /* gap: 2em; */
}

.home-rules ul li {
  display: flex;
  gap: 1em;
  align-items: center;
  border-bottom: 1px solid var(--color-neutral-7);
  padding: 2em 0;
}

.home-rules details {
  width: 100%;
}

.ruhome-rulesles details > p {
  margin-top: 1em;
}

.home-rules summary::-webkit-details-marker {
  display: none;
}

.home-rules summary {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  padding: 0;
}

.home-rules details > p {
  margin-top: 1em;
}

.home-rules summary p {
  display: flex;
  width: 100%;
  font-size: var(--font-size-3);
  font-weight: 600;
  justify-content: space-between;
  align-items: center;
}

.home-rules summary p svg {
  transform: rotate(-90deg);
  transition: all 0.1s;
}

.home-rules details[open] summary p svg {
  transform: rotate(0deg);
}

.home-rules summary > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background: var(--color-color-7);
  border-radius: 5em;
  padding: var(--space-s);
  aspect-ratio: 1;
}

.home-rules summary > div img {
  height: 100%;
  width: auto;
}

.group-header {
  display: flex;
  flex-direction: column;
  /* gap: var(--space-xs); */
  justify-content: flex-start;
}

.group-header h3 {
  width: 100%;
}

.group-header h2 {
  display: flex;
}

.group-header div {
  display: flex;
  align-items: center;
  font-size: var(--font-size-1);
  justify-content: space-between;
}

.group-header div .season {
  border: 1px solid var(--color-neutral-1);
  border-radius: var(--border-radius);
  padding: 0.2em 0.5em;
}

.dash-menu {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  list-style: none;
}

.dash-menu li {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: var(--space-m);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  min-width: 20rem;
  flex: 1;
  align-items: center;
}

.dash-menu li img {
  width: auto;
  height: 10rem;
}

.how > div {
  padding: 0 0 2em 0;
  border-bottom: 1px solid var(--color-neutral-7);
}

.how p {
  text-wrap: balance;
}

.ho-bubbles-row > div {
  border-bottom: 1px solid var(--color-neutral-7);
  padding: 0 0 var(--space-xl) 0;
}

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

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

.grid p>a {
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
  color: var(--color-color-1);
}

.post {
  padding: var(--space-l) 0;
}

.post .summary-date {
  margin: auto auto auto 0;
}

.post h1 {
  margin: auto auto auto 0;
}

.post h2 {
  margin: 1em auto auto 0;
}

.post h3 {
  margin: 1em auto auto 0;
}

.post p {
  font-size: var(--font-size-1);
  margin: 1em auto auto 0;
  /* max-width: 65ch; */
}

.post div {
  font-size: var(--font-size-1);
}

.post ul {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0 0 0 1em;
}

.post img {
  margin: 4em auto auto auto;
}

.notice,
.alert  {
  display: none;
}

details {
  border: transparent
}

details.full-season {
  margin-top: 2em;
}

details summary {
  font-size: var(--font-size-3);
  border: 1px solid var(--color-color-1);
  border-radius: var(--border-radius);
}

@media (prefers-color-scheme: dark) {
  .dash-menu img {
    filter: invert(1);
  }
}

.fixtures {
  margin: 2em 0 0 0
}

.ho-horizontal-scroll {
  margin: var(--space-m) 0;
}

.ho-horizontal-scroll ul li {
  width: 21rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}

.ho-horizontal-scroll ul li img {
  border-radius: 1em;
  background: var(--color-neutral-1);
}

.inside {
  padding: var(--space-l-2xl) 0 var(--space-m) 0;
}

.inside div {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.inside div .bold {
  margin-top: 2em;
}

.membership {
  padding: var(--space-l-2xl) 0 var(--space-m) 0;
}

.membership div {
  display: flex;
  flex-direction: column;
  gap: 1em;
  border-bottom: 1px solid var(--color-neutral-8);
  padding: 0 0 var(--space-m) 0;
}

.membership div ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.membership div ul li {
  display: flex;
  gap: 1em;
  align-items: center;
  padding: 1em 0;
  border-bottom: 1px solid var(--color-neutral-8);
  justify-content: space-between;
}

.membership div ul li .price {
  background: var(--color-neutral-9);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--border-radius);
}

.membership .primary {
  margin: 1em auto;
}

.ho-article-detail .primary {
  margin: 1em auto;
}

.andy {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.andy img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin: 0;
}

.andy div {
  display: flex;
  flex-direction: column;
}

.andy div p {
  margin: 0;
}

.edit-rules {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 1em 0;
  list-style: none;

  > li {
    display: flex;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-neutral-8);
    border-radius: var(--border-radius);
  }
}

.superadmin-form {
  display: flex;

  > .round {
    display: flex;
    flex-direction: row;
    padding: 0;

    &.end-dates {
        padding-bottom: var(--space-xs);
        border-bottom: var(--space-3xs) solid var(--color-neutral-7);
        justify-content: center;
        margin-left: -65px;
        > div.left {
            padding-right: var(--space-xs);
            border-right: var(--space-3xs) solid var(--color-neutral-7);
            > label {
                padding-right: var(--space-2xs);
            }
        }
        > div.right {
            > label {
                padding-left: var(--space-2xs);
            }
        }
    }

    > label {
        width: 10rem;

        &.right {
            text-align: right;
            display: flex;
            justify-content: end;
        }
    }
  }

  .primary {
    align-self: center;
  }
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;

  > li {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-s);
    background: var(--color-neutral-8);
    border-radius: var(--border-radius);
    justify-content: space-between;
    align-items: center;

    > div {
      display: flex;
      flex-direction: column;

      &.actions {
        display: flex;
        flex-direction: row;
        gap: var(--space-xs);
        align-items: center;
      }
    }
  }
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-s) 0 var(--space-xl) 0;

  > div {
    display: flex;
    flex-direction: row;
    gap: var(--space-xl);

    > div {
      display: flex;
      flex-direction: row;

      > label {
        width: 8rem;
      }

      > input {
        width: 15rem;
      }

      > select {
        width: 15rem;
      }
    }
  }
}

.join-details,
.join-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  
  > ol {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding: var(--space-m) var(--space-l);
    background: var(--color-color-17);
    border-radius: 1em;
    border: 1px solid var(--color-neutral-8);
    font-size: var(--font-size-0);

    > h4 {
      max-width: 65rem;
      text-wrap: balance;
      margin-bottom: var(--space-s);
    }

    > li {
      margin: 0 0 0 var(--space-s);
    }

    > li::marker {
      font-size: var(--font-size-1);
    }
  }

  > form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--color-neutral-9);
    /* background: linear-gradient(90deg, var(--color-color-12) 0%, var(--color-color-12) 90%); */
    border-radius: 1em;
    border: 1px solid var(--color-neutral-8);
    padding: var(--space-s) var(--space-l);

    >.field {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);

      > input {
        width: 100%;
        max-width: 30ch;
      }
    }
  }
}


.n-feature {
	padding: var(--space-l-2xl) 0;
  box-shadow: 0 0 100px 95px var(--color-neutral-10);
  z-index: 1;
}

.n-feature > section.hol-wrapping-row {
	align-items: center;
	padding: 0;
}

.n-feature > section.hol-wrapping-row > div.hol-column {
	justify-items: start;
  gap: var(--space-m);
}

.n-feature > section.hol-wrapping-row > div.hol-column > h6 {
	text-transform: uppercase;
}

.n-feature > section.hol-wrapping-row > div.hol-column > .primary {
	
}

.n-feature-columns {
	background: var(--color-neutral-9);
	color: var(--color-neutral-1);
	padding: var(--space-l-3xl) 0;
}

.n-feature-columns > div.hol-column {
	row-gap: var(--space-m-xl);
}

.n-feature-columns > div.hol-column > h2 {
	color: var(--color-neutral-1);
	max-width: 30ch;
  z-index: 2;
}

.n-feature-columns > div.hol-column > ul.hol-wrapping-row > li.hol-column > img {
  width: var(--space-3xl);
  height: auto;
  border: 1px solid var(--color-color-1);
  border-radius: 10em;
  aspect-ratio: 1/1;
  padding: 1em;
}

.n-feature-columns > div.hol-column > ul.hol-wrapping-row > li.hol-column > p {
  text-align: center;
}

.n-feature-columns > div.hol-column > ul.hol-wrapping-row > li.hol-column > h3 {
  text-align: center;
}

.bg-purple {
  background: var(--color-color-7) !important;
}

.home {
  .grid {
    --content-max-width: 80rem !important;
  }
}

.what-say {
  padding: var(--space-l-3xl) 0 var(--space-m) 0;
  background: url(https://playleagues.app/assets/waves-2999c7cf5f7da3ef21bbbc43f62ed0d0eed85bd572ed91426f8329641a144da5.png) no-repeat center center;
  background-size: cover;
  box-shadow: 
    0 0 100px 95px var(--color-neutral-10), 
    inset 0 100px 95px var(--color-neutral-10);
}

.what-say > section {
  gap: 2em;
}

.what-say > section > div {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0 0 var(--space-m) 0;
}

.what-say div ul {
  list-style: none;
  max-width: 100%;
}

.what-say div ul li {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  background-color: var(--color-neutral-1);
  color: var(--color-neutral-10);
  padding: var(--space-m);
  max-width: 30rem;
  box-sizing: border-box;
  border-radius: 0.3em;
}

.what-say div ul li img {
  width: fit-content;
  height: 1.5rem;
  object-fit: contain;
}

.what-say div span {
  display: flex;
}

.primary {
  z-index: 1;
}

.ho-footer {
  box-shadow: 0 0 100px 80px var(--color-neutral-10);
}

header.title {
  background: url( https://playleagues.app/assets/waves-2999c7cf5f7da3ef21bbbc43f62ed0d0eed85bd572ed91426f8329641a144da5.png ) no-repeat center center;
  background-size: cover;
  padding: var(--space-3xl) 0;  
}

header.title > h2 {
  z-index: 1;
}

.public {
  box-shadow: 0 0 50px 40px var(--color-neutral-10);
  z-index: 1;
  padding: var(--space-l) 0 30rem 0;
}

.public > section > ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: wrap;
}

.public > section > ul.prices > li {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-neutral-1);
  color: var(--color-neutral-10);
  border-radius: 0.3em;
}

.public > section > ul.prices > li > ul {
  margin: var(--space-xl) var(--space-s);
}

.public > section > ul.prices > li > ul > li {
  color: var(--color-neutral-10);
}

@media only screen and (max-device-width: 599px), only screen and (max-width: 599px) {
  .desktop {
    display: none !important;
  }

  .mobile {
    display: block !important;
  }
}

@media only screen and (min-device-width: 600px), only screen and (min-width: 600px) {
  .desktop {
    display: flex !important;
  }

  .mobile {
    display: none !important;
  }
}

.ho-header nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.splide__track {
  grid-column: full;
}


/* .carousel {
  
}

.carousel .splide__pagination {
  z-index: 2;
}

.carousel .splide__slide {
  background-size: cover;
  background-position: bottom center;
  color: var(--color-light-neutral-10);
  padding: 12rem 0;
  row-gap: 2em; 
  min-height: 50rem;
}
.carousel .splide__slide.ball {
  background-image: url(https://playleagues.app/images/ball.png);
}

.carousel .splide__slide.pitch {
  background-image: url(https://playleagues.app/assets/pitch-fec2a8d632eaef1226f37f1c22f665c79574b7845f1f3284567903313f5e7fb8.png);
}

.carousel .splide__slide.big-waves {
  background-image: url(https://playleagues.app/assets/big-waves-767cbe7c539df2e1a5a39d8d022959be13088b851d265980124fd21952dcb821.png);
}

.carousel .splide__slide.purple {
  background-color: var(--color-color-7);
}

.carousel .splide__slide > div {
  align-self: center;
  gap: 2em;
}

.carousel .splide__slide > div > h1 {
  max-width: 16ch;
  text-shadow: 0 2px 2px var(--color-neutral-10);
  line-height: 1.3;
}

.carousel .splide__slide > div > p {
  max-width: 35ch;
  text-shadow: 0 2px 2px var(--color-neutral-8);
  color: var(--color-neutral-3);
} */

.ball {
  background-image: url(https://playleagues.app/images/ball.png);
}

.pitch {
  background-image: url(https://playleagues.app/assets/pitch-fec2a8d632eaef1226f37f1c22f665c79574b7845f1f3284567903313f5e7fb8.png);
}

.big-waves {
  background-image: url(https://playleagues.app/assets/big-waves-767cbe7c539df2e1a5a39d8d022959be13088b851d265980124fd21952dcb821.png);
}

.purple {
  background-color: var(--color-color-7);
}

.slider {
  grid-column: full;
  text-align: center;
  overflow: hidden;
}

.slides {
  grid-column: full;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}

.slides::-webkit-scrollbar-track {
  background: transparent;
}

.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 40rem;
  background-size: cover;
  background-position: bottom center;
  color: var(--color-light-neutral-10);
  min-height: 50rem;
}

.slides > div > div {
  flex-direction: column;
  display: flex;
  gap: 2em;
}

.slides > div > div.align-left {
  justify-content: center;
  align-items: start;
  text-align: left;
}

.slides > div > div.align-center {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slides > div > div > h1 {
  max-width: 21ch;
  text-shadow: 0 2px 2px var(--color-neutral-10);
  text-align: inherit;
}

.slides > div > div > p {
  max-width: 35ch;
  text-shadow: 0 2px 2px var(--color-neutral-8);
  color: var(--color-neutral-2);
  text-align: inherit;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}

.slider > a:active {
  top: 1px;
}

.slider > a:focus {
  background: #000;
}

.n-horizontal-scroll {
	
}

.horizontal-scroll {
	--space: calc(var(--grid-gap) / 2);
	scrollbar-width: none;
	grid-template-columns: inherit;
	overflow-x: scroll;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	background: var(--color-neutral-10);
  min-height: 40rem;
  background-color: green;
}

.horizontal-scroll ul {
	display: flex;
	align-items: center;
	list-style: none;
  grid-column: full;
  background-color: gray;
  min-height: 40rem;
}

.horizontal-scroll ul::after {
	content: "";
	align-self: stretch;
	padding-inline-end: max(var(--space), (100vw - var(--content-max-width)) / 2 - var(--space));
}

.horizontal-scroll ul li {
	flex: 0 0 auto;
	width: 100%;
  height: 40rem;
	scroll-snap-align: start;
}
.season-fixtures {
  border: none;
}

.season-fixtures summary::-webkit-details-marker {
  display: none;
}

.season-fixtures summary {
  display: flex;
  border: none;
  padding: var(--space-s) 0;
  justify-content: space-between;
}

.season-fixtures summary svg {
  transform: rotate(-90deg);
  transition: all 0.1s;
}

.season-fixtures[open] summary svg {
  transform: rotate(0deg);
}

.season-fixtures div ul {
  list-style: none;
  padding: 0;
}

.season-fixtures div ul li header {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
}

.season-fixtures div ul li ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 var(--space-xs) 0;
  border-bottom: 1px solid var(--color-neutral-8);
  gap: var(--space-s);
}

.season-fixtures div ul li ul li {
  display: flex;
  width: 9rem;
  background: var(--color-neutral-9);
  padding: var(--space-2xs) var(--space-2xs);
  border-radius: var(--border-radius);
  justify-content: center;
}

.season-fixtures div nav {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  overflow: hidden;
  position: sticky;
  top: 0.5rem;
  z-index: 2;
  background: var(--color-color-17);
  border-radius: var(--space-s);
  outline: 1px solid var(--color-neutral-8);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
}

.season-fixtures div nav ul {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  overflow-x: scroll;
  padding: 0 var(--space-3xs);
}

.season-fixtures div nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  background: var(--color-neutral-9);
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  margin: var(--space-2xs) 0;
}

.season-fixtures div nav ul li a:hover {
  text-decoration: none;
}

.season-fixtures div nav ul li a.active {
  outline: 1px solid var(--color-neutral-8);
}
/* THEMES */

/********** Theme: dark **********/
/* Font styles */
.flipdown.flipdown__theme-dark {
  font-family: sans-serif;
  font-weight: bold;
}

/* Rotor group headings */
.flipdown.flipdown__theme-dark .rotor-group-heading:before {
  color: var(--color-neutral-2);
}

/* Delimeters */
.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,
.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after {
  background-color: #151515;
}

/* Rotor tops */
.flipdown.flipdown__theme-dark .rotor,
.flipdown.flipdown__theme-dark .rotor-top,
.flipdown.flipdown__theme-dark .rotor-leaf-front {
  color: #FFFFFF;
  background-color: var(--color-color-7);
}

/* Rotor bottoms */
.flipdown.flipdown__theme-dark .rotor-bottom,
.flipdown.flipdown__theme-dark .rotor-leaf-rear {
  color: #EFEFEF;
    background-color: var(--color-color-7);
}

/* Hinge */
.flipdown.flipdown__theme-dark .rotor:after {
  border-top: solid 1px #151515;
}

/********** Theme: light **********/
/* Font styles */
.flipdown.flipdown__theme-light {
  font-family: sans-serif;
  font-weight: bold;
}

/* Rotor group headings */
.flipdown.flipdown__theme-light .rotor-group-heading:before {
  color: var(--color-neutral-2);
}

/* Delimeters */
.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before,
.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):after {
  background-color: #DDDDDD;
}

/* Rotor tops */
.flipdown.flipdown__theme-light .rotor,
.flipdown.flipdown__theme-light .rotor-top,
.flipdown.flipdown__theme-light .rotor-leaf-front {
  color: #222222;
  background-color: #DDDDDD;
}

/* Rotor bottoms */
.flipdown.flipdown__theme-light .rotor-bottom,
.flipdown.flipdown__theme-light .rotor-leaf-rear {
  color: #333333;
  background-color: #EEEEEE;
}

/* Hinge */
.flipdown.flipdown__theme-light .rotor:after {
  border-top: solid 1px #222222;
}

/* END OF THEMES */

.flipdown {
  overflow: visible;
  width: 510px;
  height: 110px;
}

.flipdown .rotor-group {
  position: relative;
  float: left;
  padding-right: 30px;
}

.flipdown .rotor-group:last-child {
  padding-right: 0;
}

.flipdown .rotor-group-heading:before {
  display: block;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.flipdown .rotor-group:nth-child(1) .rotor-group-heading:before {
  content: attr(data-before);
}

.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before {
  content: attr(data-before);
}

.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before {
  content: attr(data-before);
}

.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before {
  content: attr(data-before);
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 115px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
  content: '';
  position: absolute;
  bottom: 50px;
  left: 115px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.flipdown .rotor {
  position: relative;
  float: left;
  width: 50px;
  height: 80px;
  margin: 0px 5px 0px 0px;
  border-radius: 4px;
  font-size: 4rem;
  text-align: center;
  perspective: 200px;
}

.flipdown .rotor:last-child {
  margin-right: 0;
}

.flipdown .rotor-top,
.flipdown .rotor-bottom {
  overflow: hidden;
  position: absolute;
  width: 50px;
  height: 40px;
}

.flipdown .rotor-leaf {
  z-index: 1;
  position: absolute;
  width: 50px;
  height: 80px;
  transform-style: preserve-3d;
  transition: transform 0s;
}

.flipdown .rotor-leaf.flipped {
  transform: rotateX(-180deg);
  transition: all 0.5s ease-in-out;
}

.flipdown .rotor-leaf-front,
.flipdown .rotor-leaf-rear {
  overflow: hidden;
  position: absolute;
  width: 50px;
  height: 40px;
  margin: 0;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flipdown .rotor-leaf-front {
  line-height: 80px;
  border-radius: 4px 4px 0px 0px;
}

.flipdown .rotor-leaf-rear {
  line-height: 0px;
  border-radius: 0px 0px 4px 4px;
  transform: rotateX(-180deg);
}

.flipdown .rotor-top {
  line-height: 80px;
  border-radius: 4px 4px 0px 0px;
}

.flipdown .rotor-bottom {
  bottom: 0;
  line-height: 0px;
  border-radius: 0px 0px 4px 4px;
}

.flipdown .rotor:after {
  content: '';
  z-index: 2;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 50px;
  height: 40px;
  border-radius: 0px 0px 4px 4px;
}

@media (max-width: 550px) {

  .flipdown {
    width: 312px;
    height: 70px;
  }

  .flipdown .rotor {
    font-size: 2.2rem;
    margin-right: 3px;
  }

  .flipdown .rotor,
  .flipdown .rotor-leaf,
  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear,
  .flipdown .rotor-top,
  .flipdown .rotor-bottom,
  .flipdown .rotor:after {
    width: 30px;
  }

  .flipdown .rotor-group {
    padding-right: 20px;
  }

  .flipdown .rotor-group:last-child {
    padding-right: 0px;
  }

  .flipdown .rotor-group-heading:before {
    font-size: 0.8rem;
    height: 20px;
    line-height: 20px;
  }

  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    left: 69px;
  }

  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
    bottom: 13px;
    height: 8px;
    width: 8px;
  }

  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    bottom: 29px;
    height: 8px;
    width: 8px;
  }

  .flipdown .rotor-leaf-front,
  .flipdown .rotor-top {
    line-height: 50px;
  }

  .flipdown .rotor-leaf,
  .flipdown .rotor {
    height: 50px;
  }

  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear,
  .flipdown .rotor-top,
  .flipdown .rotor-bottom,
  .flipdown .rotor:after {
    height: 25px;
  }
}
.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) 0;
}

.page form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.page .half-season {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.page .half-season h4 {
  margin: 1em 0 0 0;
}

.page .half-season .round-container {
  background: var(--color-neutral-10);
  display: flex;
  flex-direction: column;
  border-radius: 0.5em;
  outline: 1px solid var(--color-neutral-8);
}

.page .half-season .round-container.with-border,
.page .half-season .round-container:hover {
  outline: 1px solid var(--color-neutral-7);
  text-decoration: none;
}

.page .half-season .round-container header::marker {
  display: none;
}

.page .half-season .round-container header::-webkit-details-marker {
  display: none;
}

.page .half-season .round-container > a,
.page .half-season .round-container header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 0;
  padding: var(--space-xs) var(--space-s);
  width: 100%;
  min-height: 5.7rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  gap: var(--space-xs);
}

.page .half-season .round-container header .round-number {
  background-image: url( https://playleagues.app/assets/round-bg-purple-9d4190b9346df9389b76f39a3b23ef671c806eeb3ac0bca609f3bc0f648f4c75.png );
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--color-light-neutral-10);
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-1);
  font-weight: bold;
}

.page .half-season .round-container header .round-number.round-purple {
  background-image: url( https://playleagues.app/assets/round-bg-purple-9d4190b9346df9389b76f39a3b23ef671c806eeb3ac0bca609f3bc0f648f4c75.png );
}

.page .half-season .round-container header .round-number.round-green {
  background-image: url( https://playleagues.app/assets/round-bg-green-7e9edd6ec81df93a2966c54390f1d4bba8291a548e487a44816fc5991682e6e1.png );
  color: var(--color-light-neutral-1)
}

.page .half-season .round-container header .make-selection {
  font-weight: bold;
  font-size: var(--font-size-1);
  color: var(--color-color-1);
}

.page .half-season .round-container header span {
  font-weight: normal;
  font-size: var(--font-size-0);
}

.page .half-season .round-container header div.name-schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.page .half-season .round-container header div span.round-title {
  font-weight: bold;
  font-size: var(--font-size-1);
}

.page .half-season .round-container header div span.round-dates {
  font-weight: normal;
  font-size: var(--font-size--1);
}

.page .half-season .round-container header div {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  padding: 0;
}

.page .half-season .round-container header div img {
  height: 3rem;
  width: auto;
}

/* .page .half-season .round-container *, */
.page .half-season .round-container.prediction * {
  pointer-events: none;
}

.page .groups {
  display: flex;
  flex-direction: column;
  gap: 1em;
  list-style: none;
}

.page .members {
  display: flex;
  flex-direction: column;
  gap: 1em;
  list-style: none;
}

.page .members li {
  display: flex;
}

.page .members li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--color-neutral-7);
  border-radius: var(--border-radius);
  padding: var(--space-3xs) var(--space-2xs);
  width: 100%;
  font-size: var(--font-size-0);
}

.page .members li > div p {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xs) 0;
  font-size: var(--font-size--2);
  gap: 0;
  line-height: 1;
}

.page .members li > div p span {
  color: var(--color-neutral-5);
}

.page .members li > div span.paid {
  display: flex;
  background: var(--color-color-1);
  color: var(--color-light-neutral-1);
  padding: 0.2em 0.6em;
  margin: 0 var(--space-s);
  border-radius: 0.5em;
  font-size: var(--font-size--2);
  font-weight: bold;
  width: 7rem;
  justify-content: center;
}

.page .members li > div span.not-paid {
  display: flex;
  background: var(--color-color-15);
  color: var(--color-light-neutral-10);
  padding: 0.2em 0.6em;
  margin: 0 var(--space-s);
  border-radius: 0.5em;
  font-size: var(--font-size--2);
  font-weight: bold;
  width: 7rem;
  justify-content: center;
}

.page .members li > div span.not-paid:empty {
  padding: 0;
}

.page .members li > div > div {
  width: 16rem
}

.page > h2 {
  z-index: 1;
}

.page>p>a {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

.page>p>span.membership {
  border: 1px solid var(--color-neutral-7);
  border-radius: 0.5em;
  padding: 0.2em 0.4em;
}

.page>p>span.membership.paid {
  background: var(--color-color-1);
  color: var(--color-light-neutral-1);
  font-weight: bold;
}

.page>p>span.membership.not-paid {
  background: var(--color-color-15);
  color: var(--color-light-neutral-10);
}

div.round a.active:hover {
  outline: 1px solid var(--color-neutral-7);
  border-radius: 0.5em;
  text-decoration: none;
}

div.round a.prediction *,
div.round a.active * {
  pointer-events: none;
}

div.round div.inactive {
  background: var(--color-neutral-8);
  color: var(--color-neutral-4);
  border-radius: 0.5em;
  position: relative;
  flex-wrap: wrap;
}

div.round div.prediction,
div.round a.prediction {
  background: var(--color-color-1);
  color: var(--color-light-neutral-1);
  font-weight: bold;
  border-radius: 0.5em;
}

div.round a.prediction:hover {
  text-decoration: none;
}

div.round div.inactive span.ruletip {
  visibility: hidden;
  width: 120px;
  background: var(--color-neutral-5);
  color: var(--color-neutral-10);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border: 1px solid var(--color-neutral-1);
  /* Position the tooltip */
  position: absolute;
  z-index: 2;
  top: -4em;
}

div.round div.inactive:hover .ruletip {
  visibility: visible;
}

div.round {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: var(--space-xs) var(--space-s);
  transition: all 0.5s;
}

div.round>div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div.round>div>div,
div.round>div>a {
  display: flex;
  padding: 1em;
  /* justify-content: flex-start; */
  max-width: 40%;
  justify-content: center;
  text-align: center;
  flex: 1;
  align-items: center;
  gap: 0.5em;
  outline: 1px solid var(--color-neutral-8);
  border-radius: 0.5em;
  position: relative;
}

div.round>div>div img,
div.round>div>a img {
  width: 3rem;
  height: auto;
}

div.round>div>div span,
div.round>div>a span {
  width: 8rem;
  text-align: center;
  z-index: 2;
}

div.round>div>div.score {
  max-width: 10%;
  outline: none;
}

div.round>div>div.vs {
  outline: none;
  background-image: url( https://playleagues.app/assets/vs-7013aeffced8b28cac93c5c07ce1117b6db71a6f28f5fc43dfaeb16df0f5dcec.png );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
}

div.round .scratches .scratches- {
  display: none;
}

div.round .scratches {
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
  height: 100%;
  overflow: hidden;
  border-radius: 0.5em;
}

div.round .scratches .scratches-1 {
  position: absolute;
  height: 90px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--color-neutral-1) 3px,
    var(--color-neutral-1) 6px
  );
  z-index: 0;
  top: -10px;
  left: 20px;
  transform: rotate(15deg);
  width: 6px;
}

div.round .scratches .scratches-2 {
  position: absolute;
  height: 90px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--color-neutral-1) 3px,
    var(--color-neutral-1) 6px
  );
  z-index: 0;
  top: -10px;
  left: 20px;
  transform: rotate(15deg);
  width: 12px;
}

div.round .scratches .scratches-3 {
  position: absolute;
  height: 90px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--color-neutral-1) 3px,
    var(--color-neutral-1) 6px
  );
  z-index: 0;
  top: -10px;
  left: 20px;
  transform: rotate(15deg);
  width: 18px;
}

div.round .scratches .scratches-4 {
  position: absolute;
  height: 90px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--color-neutral-1) 3px,
    var(--color-neutral-1) 6px
  );
  z-index: 0;
  top: -10px;
  left: 20px;
  transform: rotate(15deg);
  width: 24px;
}

div.round .scratches .scratches-5 {
  position: absolute;
  height: 90px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--color-neutral-1) 3px,
    var(--color-neutral-1) 6px
  );
  z-index: 0;
  top: -10px;
  left: 20px;
  transform: rotate(15deg);
  width: 30px;
}

div.round .prediction .scratches-1,
div.round .prediction .scratches-2,
div.round .prediction .scratches-3,
div.round .prediction .scratches-4,
div.round .prediction .scratches-5 {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--color-light-neutral-1) 3px,
    var(--color-light-neutral-1) 6px
  ); 
}

.january {
  background: var(--color-neutral-9) !important;
}

.febuary {
  background: var(--color-neutral-10) !important;
}

.march {
  background: var(--color-neutral-9) !important;
}

.april {
  background: var(--color-neutral-10) !important;
}

.may {
  background: var(--color-neutral-9) !important;
}

.june {
  background: var(--color-neutral-10) !important;
}

.july {
  background: var(--color-neutral-9) !important;
}

.august {
  background: var(--color-neutral-10) !important;
}

.september {
  background: var(--color-neutral-9) !important;
}

.october {
  background: var(--color-neutral-10) !important;
}

.november {
  background: var(--color-neutral-9) !important;
}

.december {
  background: var(--color-neutral-10) !important;
}

.empty-state {
  position: relative;
  padding: 1em;
}

.empty-state aside {
  position: absolute;
  left: 0;
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state aside p {
  font-size: var(--font-size-1);
  max-width: 25rem;
}

br {
  display: none;
}

form.edit_player,
form.new_player {
  display: flex;
  flex-direction: column;
  gap: 2em;
  background: var(--color-neutral-9);
  padding: var(--space-s);
  margin: 1em 0;
  border-radius: var(--border-radius);
}

form.edit_player .field,
form.new_player .field,
form.new_player .form-group {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

form.edit_player .field input,
form.new_player .field input,
form.new_player .form-group input {
  max-width: 20rem;
}

form.edit_player h2,
form.new_player h2 {
  color: var(--color-color-15);
}

form.edit_player ul,
form.new_player ul {
  list-style: none;
  margin: 1em 0;
}

form.edit_player .field_with_errors,
form.new_player .field_with_errors {
  width: 100%;
}

form.edit_player .field_with_errors input,
form.new_player .field_with_errors input {
  outline: 1px solid var(--color-color-15);
  width: 100%;
}

.red {
  color: var(--color-color-15) !important;
}

.alert {
  position: absolute;
  background: var(--color-color-15);
  font-weight: bold;
  padding: 1em;
  margin-left: auto;
  left: 0;
  right: 0;
  width: fit-content;
  margin-right: auto;
  top: 1rem;
  color: var(--color-light-neutral-10);
  border-radius: 0.3em;
  font-size: var(--font-size-0);
  display: block;
}

.notice {
  position: absolute;
  background: var(--color-color-9);
  font-weight: bold;
  padding: 1em;
  margin-left: auto;
  left: 0;
  right: 0;
  width: fit-content;
  margin-right: auto;
  top: 1rem;
  color: var(--color-light-neutral-1);
  border-radius: 0.3em;
  font-size: var(--font-size-0);
  display: block;
}

[name="query"] {
  width: 20rem;
}

@media (min-width: 768px) {
  .page .half-season .round-container header div img,
  div.round>div>div img,
  div.round>div>a img {
    width: 4rem;
    height: auto;
  }
}

@media (max-width: 767px) {

  .page .members li div label .delete {
    display: initial;
  }

  div.round>div>div span,
  div.round>div>a span {
    width: fit-content;
  }

  div.round div.inactive span.ruletip {
    visibility: visible;
    position: unset;
    width: 100%;
    background: no-repeat;
    color: var(--color-neutral-4);
    border: none;
    padding: 0 1em;
    text-align: center;
    font-size: var(--font-size--2);
    line-height: 1;
  }

  div.round>div>div.vs {
    max-width: 20px;
  }

  div.round .scratches .scratches-1,
  div.round .scratches .scratches-2,
  div.round .scratches .scratches-3 {
    top: -20px;
    left: 5px;
    transform: rotate(35deg);
  }
}
td.recent-form {
    padding: 10px;
    text-align: center
}

.form-boxes {
    display: flex;
    justify-content: space-between;
}

.form-boxes span {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    margin: 2px;
    color: white;
}

span.win {
    border: 2px solid green;
    background-color: green;
}

span.draw {
    border: 2px solid grey;
    background-color: grey;
}

span.loss {
    border: 2px solid red;
    background-color: red;
}

span.loss:nth-child(4),
span.draw:nth-child(4),
span.win:nth-child(4)
{
    margin-right: 20px;
    position: relative;
}

span.loss:nth-child(4)::after,
span.draw:nth-child(4)::after,
span.win:nth-child(4)::after {
    content: '';
    position: absolute;
    right: -15px; /* Adjust the position of the vertical bar */
    top: -2px;
    bottom: -2px;
    width: 2px; /* Width of the vertical bar */
    background-color: grey; /* Color of the vertical bar */
}

.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}


/* .even {
  background-color: var(--color-dark-color-3);
}

.odd {
  background-color: var(--color-dark-color-1);
} */

.selected {
    background-color: var(--color-color-2);
}

table {
  border:none;
  border-collapse: collapse;
  margin: em 0 0 0
}

table caption {
  padding: 1em 0 1em 0;
  font-size: var(--font-size-0);
  text-align: left;
}

table tr td {
  padding: 1em;
  text-align: center;
  min-width: 5em;
  border-bottom: 1px solid var(--color-neutral-8);
  font-size: var(--font-size--2);
  text-wrap: nowrap;
}

table tr td:nth-child(9) {
    font-size: var(--font-size-1);
    font-weight: 450;
}

.charity-selections table tr td {
  text-align: left;
}

table tr th {
  font-size: var(--font-size--2);
  font-weight: normal;
  padding: 1em 0;
  text-align: center;
}

.table {
  overflow-x: scroll;
  margin: 0 0 3em 0;
}

.table table {
  width: 100%;
}

.table table tr td:first-child,
.table table tr th:first-child {
  font-weight: bold;
  position: sticky;
  left: 0;
  background: var(--color-neutral-10);
  text-align: left;
  padding: 1em;
  font-size: var(--font-size--2);
}

.table table tr td .primary {
  font-size: var(--font-size--2);
}

.table .round-label {
  color: var(--color-light-neutral-6)
}

.table .column-header {
  position: sticky;
  position: sticky;
  left: 9rem;
  right: 0;
  font-weight: bold;
}

.table .prediction {
  font-weight: bold;
  color: var(--color-color-14);
  font-size: var(--font-size-0);
}

tr.highlight-charity td {
  background: var(--color-color-10) !important;
  color: var(--color-light-neutral-1) !important;
}

tr.highlight-player td {
  background: var(--color-color-11) !important;
  color: var(--color-light-neutral-1)  !important;
}

.grid .table:has(.small-table) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--space-xs);
}

.grid .table:has(.small-table) table {
  flex: 1;
  min-width: 20rem;
}

.grid .table:has(.small-table) .round:last-child {
  flex: unset;
}

.vidiprinter {
  display: flex;
  flex-direction: column;
}

.vidiprinter header div {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.vidiprinter header div h1 {
  font-weight: bold;
}

.vidiprinter header div p.welcome {
  width: 7rem;
  background-image: url(https://playleagues.app/assets/hi-20637c990af33718735a5301ab2c3e94f4efef1ec84e718fdd70b34d6d8b0995.png );
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.vidiprinter .card {
  background: linear-gradient(to bottom, var(--color-color-17), transparent);
  background-repeat: no-repeat;
  background-size: 100% 700px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* background: var(--color-neutral-10); */
  color: var(--color-neutral-1);
  border-radius: var(--space-s);
  padding: var(--space-s);
  outline: 1px solid var(--color-neutral-8);
  margin: 1em 0 0 0;
}

.vidiprinter .card.green {
  background: var(--color-color-1);
  color: var(--color-light-neutral-1);
  flex-direction: row;
  align-items: center;
}

.vidiprinter .card .icon img {
  width: var(--space-xl);
  height: auto;
  /* transition: all 0.05s ease-in-out; */
}

.vidiprinter .card:hover {
  text-decoration: none;
  outline: 1px solid var(--color-neutral-7);
}

.vidiprinter .card > h4 {
  margin-top: var(--space-xs);
}

.vidiprinter .card > h3 > strong,
.vidiprinter .card > h4 > strong {
  border-radius: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  outline: 1px solid var(--color-neutral-8);
  background: var(--color-neutral-9);
}

.vidiprinter .card > ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-3xs);
}

.vidiprinter .card > ul > li {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-1);
  align-items: center;
  border-radius: var(--space-2xs);
  padding: var(--space-xs) 0;
  outline: 1px solid var(--color-neutral-8);
  background: var(--color-neutral-9);
  flex: 1;
}

.vidiprinter .card > ul.teams-to-watch > li,
.vidiprinter .card > ul.remaining-players > li {
  flex-direction: row;
  gap: var(--space-3xs);
  flex: 0;
  min-width: fit-content;
  padding: var(--space-xs);
}

.vidiprinter .card > ul.fixtures > li {
  font-size: var(--font-size-0);
  min-width: 7rem;
}

.vidiprinter .card > ul.fixtures > li.highlight-match {
  background: var(--color-color-1);
  color: var(--color-light-neutral-1);
  font-weight: bold;
}

.vidiprinter .card > ul > li.highlight-player {
  background: var(--color-color-11);
  color: var(--color-light-neutral-1);
  font-weight: bold;
}

.vidiprinter .card > ul > li.highlight-charity {
  background: var(--color-color-10);
  color: var(--color-light-neutral-1);
  font-weight: bold;
}

.vidiprinter .card > div > div > ul > li > ul > li.highlight-match {
  background: var(--color-color-11);
  color: var(--color-light-neutral-1);
  font-weight: bold;
}

aside.menu > div ul li a.viditype,
.vidiprinter .group-header h2 {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 500;
  text-transform: uppercase;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* RESET */

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  /* min-height: 100vh; */
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
  cursor: pointer;
}

/* Make images easier to work with */
img,
picture {
  width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 20em;
  width: 100%;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}