html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #222;
  color: white;
}

article>p {
  max-width: 100ch;
}

article>ul>li {
  max-width: 80ch;
}

a {
  color: lightblue;
}

button {
  background-color: darkslategray;
  padding: 0.4em;
  border: 1px solid darkgray;
  color: white;
  border-radius: 8px;
  font-size: 1.2em;
}

fieldset {
  color: silver;
}

fieldset>label, fieldset>ul {
  color: white;	
}



figure {
  margin: 1em 0;
}

canvas {
  border: 1px solid #666;
}

label.sliderLbl, label.checkLbl {
  display: inline-block;
  width: 10em;
}

label.numberLbl {
  display: inline-block;
  width: 16em;
}

input.numberInp {
  width: 3em;
}

ul.colors, ul.radiochoices, ul.edichoices, ul.batchchoices {
  list-style: none;
  padding-left: 0;
  margin: 0.5em 0;
}

ul.radiochoices>li {
  list-style-type: none;
  display: inline-block;
  margin-right: 1em;
}

ul.radiochoices>li>input {
  margin-left: 0;
}

#intro, .explain {
  padding: 1em;
}

#labo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
}

#control {
  width: 23em;
  padding: 1em;
}

#control>fieldset {
  width: 21em;
  margin-bottom: 0.8em;
}

#experience {
  padding: 1em 0;
}

#experience>fieldset {
  width: 21em;
  margin: 0 1em;
}

#player {
  padding: 0 1em;
}

span.playerOption {
  display: inline-block;
  width: 7em;
}

#watcher {
  padding: 0 1em;
}

#prompter {
  padding: 1em 0.5em;
}

#batchResult>h2 {
  margin-left: 1em;
}

#tableOutput {
  border-collapse: collapse;
  margin: 0.5em 1em;
}

#tableOutput>thead {
  color: darkgray;
}

td {
  padding: 0.2em;
  border: 1px solid dimgray;
}

#csvLinesOutput {
  /*display: none;*/
  margin-left: 1em;
}

#csvSaveBtn {
  margin-left: 1em;
}

footer {
	margin-top: 2em;
	font-size: 0.8em;
	color: silver;
	text-align: center;
}

footer>hr {
	margin: 0 5em;
}

#notes {
	margin: 0.5em 1em;
}

@media screen and (width <= 360px) {

  .xlPoPrompt, .xlLaPrompt, .lPoPrompt, .lLaPrompt, .mPoPrompt, .mLaPrompt, .sPoPrompt, .sLaPrompt, .xsLaPrompt, .xsPoPrompt {
    width: 90vw;
  }

}

@media screen and (360px < width <= 480px) {

  .xlPoPrompt, .xlLaPrompt, .lPoPrompt, .lLaPrompt, .mPoPrompt, .mLaPrompt, .sPoPrompt, .xsLaPrompt {
    width: 95vw;
  }

}

@media screen and (480px < width <= 640px) {

  .xlPoPrompt, .xlLaPrompt, .lPoPrompt, .lLaPrompt, .mPoPrompt. sLaPrompt {
    width: 95vw;
  }

}

@media screen and (640px < width <= 960px) {

  .xlPoPrompt, .xlLaPrompt, .lPoPrompt. mLaPrompt {
    width: 95vw;
  }

  .sPoPrompt, .xsLaPrompt {
    width: 480px;
  }

  .xsPoPrompt {
    width: 340px;
  }

}

@media screen and (width > 960px) {

  .xlPoPrompt, .xlLaPrompt, .lPoPrompt, .lLaPrompt, .mLaPrompt {
    max-width: 80ch;
  }

  .mPoPrompt, .sLaPrompt {
    width: 640px;
  }

  .sPoPrompt, .xsLaPrompt {
    width: 480px;
  }

  .xsPoPrompt {
    width: 340px;
  }

}