@font-face {
  font-family: SpecialMayo;
  font-weight: 900;
  src: url("https://files.openlab.dev/22fc8d93-09db-47fc-960a-ffd83e95dc1f?v=001") format("woff2"),
    url("https://files.openlab.dev/d428430c-a6d8-42de-b840-357a8f20388f?v=001") format("woff");
}

body {
  /* background: white; */
  --fillable: var(--color);
}

h1 {
  /* color: white; */
  font-family: SpecialMayo;
  text-transform: uppercase;
  font-palette: --mayo-base;
  font-size: 6vw;
  /* word-break: break-all; */
  text-align: center;
  font-weight: 900;
}

select {
  max-width: 14em;
  color: currentcolor;
}

@font-palette-values --mayo-base {
  font-family: SpecialMayo;
  base-palette: 0;
  override-colors: 2 #ffffff;
}

@font-palette-values --mayo-clean {
  font-family: SpecialMayo;
  base-palette: 1;
  override-colors: 2 #ffffff;
}

@font-palette-values --mayo-green {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors: 1 #9FFAB6, 2 #49E055;
}

@font-palette-values --mayo-brown {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    0 black,
    1 #EDAB66,
    2 #B67533;
}

@font-palette-values --mayo-indigo {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #C4C0FF,
    2 #755AFF;
}

@font-palette-values --mayo-magenta {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #E9A3B7,
    2 #D34470;
}

@font-palette-values --mayo-mint {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #A3FFDC,
    2 #39EFA8;
}

@font-palette-values --mayo-orange {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #F7CBAE,
    2 #F39C62;
}

@font-palette-values --mayo-pink {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #FFB7FA,
    2 #E45BDA;
}

@font-palette-values --mayo-purple {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #CFA7F5,
    2 #9A51DC;
}

@font-palette-values --mayo-red {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #F1B5B4,
    2 #EA4A49;
}

@font-palette-values --mayo-salmon {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #F7B6CC,
    2 #EC6792;
}


@font-palette-values --mayo-sky {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #B6E6FA,
    2 #48C6FC;
}

@font-palette-values --mayo-yellow {
  font-family: SpecialMayo;
  base-palette: 2;
  override-colors:
    1 #FFFCD8,
    2 #FBEE49;
}