:root {
  --vowel-color: #000;
  --consonant-color: #000;
  --vowel-consonant-blend-color: #000;
  --schwa-color: #000;

  --schwa-background-color: transparent;
  --vowel-short-background-color: transparent;
  --vowel-long-background-color: transparent;
  --vowel-digraph-background-color: transparent;
  --consonant-background-color: transparent;
  --vowel-consonant-blend-background-color: transparent;
  
}

.graphemes-colorscheme-0 {
  --vowel-color: #d00;
  --consonant-color: #00d;
  --schwa-color: #999999;
  --vowel-consonant-blend-color: #b500ff;
}
.graphemes-colorscheme-1 {
  --vowel-color: #00d;
  --consonant-color: #d00;
  --schwa-color: #999999;
  --vowel-consonant-blend-color: #b500ff;
}
.graphemes-colorscheme-2 {
  --vowel-color: #ff01bc;
  --consonant-color: #01b6ff;
  --vowel-consonant-blend-color: #c73fff;
  --schwa-color: #aaaaaa;
}
.graphemes-colorscheme-3 {
  --vowel-color: #d00;
  --consonant-color: #000;
  --vowel-consonant-blend-color: #d00;
  --schwa-color: #999999;
}
.graphemes-colorscheme-4 {
  --vowel-color: #1FB3E6;
  --consonant-color: #8a5bbb;
  --vowel-consonant-blend-color: #DF912C;
  --schwa-color: #aaaaaa;
}
.graphemes-background-colorscheme-1 {
  --schwa-background-color: #ffd65d;
  --vowel-short-background-color: #00ff0040;
  --vowel-long-background-color: #fff00082;
  --vowel-digraph-background-color: #ff000063;
  --consonant-background-color: #00baff70;
  --vowel-consonant-blend-background-color: #FFFFFF;
}
.graphemes-background-colorscheme-2 {
  --schwa-background-color: #ffd65d;
  --vowel-short-background-color: #00ff0040;
  --vowel-long-background-color: #fff00082;
  --vowel-digraph-background-color: #ff000063;
  --consonant-background-color: #FFFFFF;
  --vowel-consonant-blend-background-color: #FFFFFF;
}


body {
  font-family: Lexend, sans-serif;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.jSlots-wrapper {
  overflow: hidden;
  height: 1.5em;
  display: inline-block;
  /* to size correctly, can use float too, or width*/
  border: 2px solid #000;
  border-radius: 10px;
  background: linear-gradient(180deg,rgba(189, 189, 189, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(189, 189, 189, 1) 100%);
}
.slots {
  font-size: clamp(6vw, 25vw, 14vw); /* replaces 140px */
  display: flex;
  gap: .2em;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.slots div {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  align-items: center;
}
.slots div input {
  font-size: 30%;
}
.slot li {
  height: 1.5em;
  width: 1.3em;
  text-align: center;
  color: var(--color);
}
.wide2plus li { /* Just enough for 'cht' but not enough for 'sch' */
  width: 1.6em;
}
.coda_wide2plus .part3 li {
  width: 1.6em;
}
.nucleus_wide2plus .part2 li {
  width: 1.6em;
}
.onset_wide2plus .part1 li {
  width: 1.6em;
}


.wide3 li { /* Wide enough for most 3 letter combination */
  width: 1.95em;
}
.coda_wide3 .part3 li {
  width: 1.95em;
}
.nucleus_wide3 .part2 li {
  width: 1.95em;
}
.onset_wide3 .part1 li {
  width: 1.95em;
}
.wide3plus li { /* Wide enough for any 3 letter combination = 'aam' */
  width: 2.2em;
}
.coda_wide3plus .part3 li {
  width: 2.2em;
}
.nucleus_wide3plus .part2 li {
  width: 2.2em;
}
.onset_wide3plus .part1 li {
  width: 2.2em;
}


.wide4 li { /* Wide enough for any 4 letter combination (eeuw) */
  width: 2.6em;
}
.coda_wide4 .part3 li {
  width: 2.6em;
}
.nucleus_wide4 .part2 li {
  width: 2.6em;
}
.onset_widewide4 .part1 li {
  width: 2.6em;
}

.spin_center .part1 li {
  text-align: right;
}
.spin_center .part2 li {
  text-align: left;
}
.spin_center3 .part1 li {
  text-align: right;
}
.spin_center3 .part3 li {
  text-align: left;;
}

.onset .slot {
  --color: var(--onset-color);
}
.nucleus .slot {
  --color: var(--nucleus-color);
}
.coda .slot {
  --color: var(--coda-color);
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
.topbar {
  display: flex;
  gap: 1em;
  justify-content: space-between;
}
.fullspin input {
  font-size: 24px;
}
.fullspin {
  height: 3em;
  min-height: 3em;
  min-width: 10em;
  
}
.spinButtonWrapper {
  height: .5em;
  min-height: .5em;
  
}

/* pretty pill button for the spin buttons */
.spinButton{
  display:inline-block;
  padding: .5vw .6vw .5vw .8vw;
  border-radius:1vw;
  background:#111;
  color:#fff;
  font-weight:400;
  border:1px solid transparent;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.spinButton:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.2);
}
 .spinButton:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* pretty pill button for the global spin */
.fullspin .spinButton{
  display:inline-block;
  padding: .2em .8em .2em .6em;
  border-radius:9999px;
  background:#111;
  color:#fff;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.fullspin .spinButton:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.2);
}
.fullspin .spinButton:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

li.vowel-schwa {
  background-color: var(--schwa-background-color);
  color: var(--schwa-color);
}
li.vowel-short {
  background-color: var(--vowel-short-background-color);
  color: var(--vowel-color);
}
li.vowel-long {
  background-color: var(--vowel-long-background-color);
  color: var(--vowel-color);
}
li.vowel-digraph {
  background-color: var(--vowel-digraph-background-color);
  color: var(--vowel-color);
}
li.consonant {
  background-color: var(--consonant-background-color);
  color: var(--consonant-color);
}
li.vowel-consonant-blend {
  background-color: var(--vowel-consonant-blend-background-color);
  color: var(--vowel-consonant-blend-color);
}


.colorscheme {
  font-family: "Lexend", sans-serif;
}
.colorscheme select {
  max-width: 10em;
  
}