* {
  --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-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-dark: oklch(0.3 0.03 136);
}

: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%;
}










/* * {
  --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-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-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-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: bold;
  line-height: 1;
  text-wrap: balance
}

h2 {
  font-family: var(--font-family-1);
  font-size: var(--font-size-5);
  font-weight: bold;
  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: balance; */
  /* max-width: 70ch; */
}

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-neutral-10);
  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 {
  background: transparent;
  border: none;
  color: var(--color-color-1);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: 1;
  padding: 0.5em 1.2em;
  width: fit-content;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
}

.tertiary:visited {
  color: var(--color-color-1);
}

.tertiary:hover {
  color: var(--color-color-1);
}

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

.tertiary:active {
  color: var(--color-color-11);
  transform: scale(0.99) translateY(1px);
}

.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],
input[type=email],
input[type=password] {
  border-radius: 0.3em;
}

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: 1rem;
  --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.79rem, calc(0.76rem + 0.13vw), 0.88rem);
  --font-size--1: clamp(0.89rem, calc(0.84rem + 0.24vw), 1.05rem);
  --font-size-0: clamp(1.00rem, calc(0.92rem + 0.38vw), 1.27rem);
  --font-size-1: clamp(1.12rem, calc(1.01rem + 0.56vw), 1.52rem);
  --font-size-2: clamp(1.27rem, calc(1.11rem + 0.80vw), 1.82rem);
  --font-size-3: clamp(1.42rem, calc(1.21rem + 1.09vw), 2.19rem);
  --font-size-4: clamp(1.60rem, calc(1.31rem + 1.46vw), 2.62rem);
  --font-size-5: clamp(1.80rem, calc(1.42rem + 1.92vw), 3.15rem);
  --font-size-6: clamp(2.03rem, calc(1.53rem + 2.50vw), 3.78rem);
}




@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;
}

.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;
}

.home-rules ul {
  display: flex;
  flex-direction: column;
}

.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;
  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;
}

.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);
    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-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;
  }
}

.primary {
  z-index: 2;
}

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

header.title {
  background: url(https://playleagues.app/assets/waves-1029349ac4856295e6ae5c02f8ba0fca7c90d6ded3bc4450ec738f8bb8f5d645.webp) 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;
}

header.title > h1 {
  text-shadow: 0 2px 2px var(--color-neutral-10);
}

.public > section {
  display: flex;
  flex-direction: column;
}

.public>section>span {
  text-wrap: balance;
  color: var(--color-neutral-4);
}

.public > section > h2 {
  text-wrap: auto;
  line-height: 1.4;
}

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

.flow > *+* {
  margin-block-start: var(--flow-space, 1em);
}

.public > section.about-us {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.public > section.about-us > img {
  max-width: 15rem;
  max-height: 15rem;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  filter: grayscale(100%);
}

.public > section.about-us > div {
  flex: 1;
}

.public > section.about-us > div > blockquote > p {
  display:inline;
  line-height: 1.9;
}

.public > section.about-us > div > blockquote.start:before {
  content: '“';
  font-size: 45px;
  font-family: serif;
  line-height: 1;
}

.public > section.about-us > div > blockquote.end:after {
  content: '”';
  font-size: 45px;
  font-family: serif;
  line-height: 1;
}

.public>section>ul.styled {
  padding: 0 0 0 var(--space-xs);
}

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

.public>section>ul.prices>li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-neutral-1);
  color: var(--color-neutral-10);
  border-radius: 0.3em;
  inline-size: 100%;
  max-inline-size: 28rem;
  height: 28rem;
}

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

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

.public > ul,
.public > section > .season > .flow > ul {
  margin: 0 0 0 var(--space-s);
  margin-block-start: var(--flow-space, 1em);
}

@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;
}

.ball {
  background-image: url(https://playleagues.app/assets/ball-8aa48362a9c50871c18995f01ac6c5bd5b8792df6108ac433934480c1f6157be.webp);
  background-position: center 84% !important;
}

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

.big-waves {
  background-image: url(https://playleagues.app/assets/big-waves-befd09ebba87cf698e7205acac4cc3cfd97cf7e4e19ee5559f48c1ccb4f63454.webp);
}

.baller {
  background-image: url(https://playleagues.app/assets/baller-fcda71ebf516a664bea42defdfd152dbef34c4ddcc3f1b057f25b414068c14f5.webp);
  text-align: left !important;
  background-repeat: no-repeat !important;
}

.pitch-up {
  background-image: url(https://playleagues.app/assets/pitch-up-2db2c32d4524d18b65c37101c697ca71891f6df3cca4d598853900bea0572573.webp) !important;
  background-position: center 40% !important;
  background-size: 120% auto !important;
}

.ball-pitch {
  background-image: url(https://playleagues.app/assets/pitch-up-2db2c32d4524d18b65c37101c697ca71891f6df3cca4d598853900bea0572573.webp) !important;
  background-position: center 50% !important;
  background-size: 120% auto !important;
}

.ball-grass {
  background-image: url(https://playleagues.app/assets/pitch-up-2db2c32d4524d18b65c37101c697ca71891f6df3cca4d598853900bea0572573.webp) !important;
  background-position: center 60% !important;
  background-size: 120% auto !important;
}

.welcome {
  background-image: url(https://playleagues.app/assets/pitch-up-2db2c32d4524d18b65c37101c697ca71891f6df3cca4d598853900bea0572573.webp) !important;
  background-position: center 70% !important;
  background-size: 120% auto !important;
}

.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 {
  display: none;
}

.slides::scrollbar {
  display: none;
}

.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%;
  background-size: cover;
  background-position: bottom center;
  color: var(--color-light-neutral-10);
  padding: calc(2*var(--space-l-3xl)) 0;
}

.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: 65ch;
  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;
}

.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;
}

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

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

.n-feature-scroll {
  /* must be row-gap, aotherwise fucks up the padding */
  row-gap: var(--space-xl); 
  padding: var(--space-l-3xl) 0 calc(2*var(--space-l-xl)) 0;
  background: url(https://playleagues.app/assets/waves-1029349ac4856295e6ae5c02f8ba0fca7c90d6ded3bc4450ec738f8bb8f5d645.webp) 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);
  overflow: clip;
}

.n-feature-scroll > h2 {
  text-align: center;
}

.n-feature-scroll > .feature-container {
  grid-template-columns: inherit;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.n-feature-scroll > .feature-container::-webkit-scrollbar {
  inline-size: 0 !important;
  display: none;
}

.n-feature-scroll > .feature-container > .wrapper {
  grid-column: standard;
  display: flex;
  align-items: center;
  gap: var(--space);
}

.n-feature-scroll > .feature-container > .wrapper::after {
  content: "";
  align-self: stretch;
  padding-inline-end: max(
    var(--space),
    (100vw - var(--content-max-width)) / 2 - var(--space)
  );
}

.n-feature-scroll > .feature-container > .wrapper > .item {
  display: flex;
  scroll-snap-align: center;
  inline-size: 100%;
  max-inline-size: 25rem;
  aspect-ratio: 16 / 9;
  font-size: 2rem;
  overflow: hidden;
  flex: 0 0 auto;
  flex-direction: column;
  background: var(--color-neutral-1);
  color: var(--color-neutral-10);
  padding: var(--space-s);
  box-sizing: border-box;
  border-radius: 0.3em;
}

.n-feature-scroll > .feature-container > .wrapper > .item > img {
  width: fit-content;
  height: 1.5rem;
  object-fit: contain;
}

.n-feature-scroll > .feature-container > .wrapper > .item > span {
  display: flex;
  flex-direction: row;
}

.n-feature-scroll > .feature-container > .wrapper > .item > span > p {
  width: fit-content;
}

.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: var(--color-neutral-1) !important;
}


/* Ensure horizontal scroll containers also hide scrollbars */
.horizontal-scroll,
.n-feature-scroll > .feature-container,
.slides {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.horizontal-scroll::-webkit-scrollbar,
.n-feature-scroll > .feature-container::-webkit-scrollbar,
.slides::-webkit-scrollbar {
  display: none;
}

.founder {
  display: flex;
  flex-direction: row;
  gap: var(--space-2xs);
}

.founder > img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(100%);
}

.founder > p {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.onboarding-header {
  padding: calc(1.5*var(--space-l-3xl)) 0 calc(2.5*var(--space-l-3xl)) 0;
  background-image: url(https://playleagues.app/assets/onboarding-95870f51874c1cba2d8497b06dd5d3bf5d990a803215a71991829d44f9e68f6e.webp);
  background-position: right bottom;
  background-size: cover;
}

.onboarding-header > section {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.onboarding-header > section > p {
  max-width: 80ch;
  text-wrap: balance;
}

.onboarding-header > section > .onboarding-form > form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onboarding-header > section > .onboarding-form > form > .field > input[type=text] {
  text-align: center;
}

.onboarding-header > section > .onboarding-form > form > p {
  max-width: 44ch;
  text-align: center;
  color: var(--color-color-1);
  backdrop-filter: blur(15px);
  padding: var(--space-s);  
  border-radius: 0.3em;
  border: 1px solid var(--color-color-1);
  font-size: var(--font-size--2);
  font-weight: 200;
}

.onboarding-header .field {
  text-align: left;
}
.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-neutral-10);
  font-weight: bold;
}

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

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;
  padding: var(--space-s);
  border-radius: var(--border-radius);
}


form.edit_player > * + *,
form.new_player > * + * {
  margin-block-start: var(--flow-space, 1em);
}

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

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: 0.4em 1.5em;
  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;
  z-index: 2;
}

.notice {
  position: absolute;
  background: var(--color-color-9);
  font-weight: bold;
  padding: 0.4em 1.5em;
  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;
  z-index: 2;
}

[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 */
}



/* .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: 9rem;
}

.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;
}
/*
 * 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;
}