:root {
  --fg-default:#C5C6C7;
  --bg-default:#0B0C10;

  --header-font: ;
  --fg-header:#ffffff;
  --bg-header:linear-gradient(to top, #1d2675 0%,#2a3698 100%);

  --fail: red;
  --darkfail: #B31B1B;
  --good: #40BF77;
  --darkgood: #114728;

  --disabled: #c5c6d0;
}

* {
  padding:0;
  margin:0;
  word-wrap: break-word;
}

html {
  color-scheme: light dark;
  background: var(--bg-default);
  height:95vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.22;
  height:100vh;
  white-space: nowrap;
  background: var(--bg-default);
}

h1 {
  color:var(--fg-default);
  text-align:center;
}

.entry {
  margin: 2em auto;
  text-align: center;
}

textarea {
  text-align: left;
  font-size: 1.5em;
}
.entry.fail textarea,
.entry.fail textarea:focus-visible {
/*  border: 2px solid var(--fail);*/
  outline: 2px solid var(--darkfail);
}
.entry.good textarea,
.entry.good textarea:focus-visible {
  border: 2px solid var(--good);
  outline: 2px solid var(--darkgood);
}

.cards-contain {
  margin: 0.5em auto;
  text-align: center;
  display: block;
  font-size: 1.5em;
}
input[type=number].cards,
input[type=text].cards {
  font-size: 1em;
  width: 3em;
}
input[type=text].cards {width: 8em;}

button:disabled {
  color: var(--disabled);
  font-style: italic;
}

#item-count {
  margin: 0.5em auto;
  font-size: 1.5em;
  text-align: center;
  display: block;
  padding: 5px;
  border-radius: 15px;  
  cursor: pointer;
}

.entry.fail #item-count {
  background: var(--fail);
  border: 1px solid var(--darkfail);
}    
.entry.good #item-count {
  background: var(--good);
  border: 1px solid var(--darkgood);
}