.table{
  padding: 3px 5px 3px 5px;
}

.row{
  display: flex;
  flex-wrap: wrap;
  padding: 2px 0px 2px 0px; 
}

.section-title{
  background-color: black;
  color: white;
  text-align: center;
}

.q-mark{
  border: 1px solid black;
  border-radius: 100%;
  background-color: white;
  padding: 2px;
  color: black;
  font-size: 50%;
}

.msg{
  border: 2px solid black;
  background-color: white;
  color: black;
  /* left:20px; */
  position: absolute;
}

.spot{
  display: flex;
  justify-content: center;
  border: 1px solid black;
  min-width: 100px;
  min-height: 30px;
}


.letters .spot{
  background-color: rgb(255, 0, 0);
}

.letters .spot-1{
  background-color: rgb(170, 0, 0);
}

.numbers .spot{
  background-color: rgb(0, 0, 255);
}

.numbers .spot-1{
  background-color: rgb(0, 0, 170);
}

.prefix .spot{
  background-color: rgb(255, 150, 0);
}

.prefix .spot-1{
  background-color: rgb(170, 70, 0);
}

.suffix .spot{
  background-color: rgb(255, 255, 0);
  color: black;
}

.suffix .spot-1{
  background-color: rgb(170, 170, 0);
}

.punctuation .spot{
  background-color: rgb(0, 255, 255);
  color: black;
}

.punctuation .spot-1{
  background-color: rgb(0, 170, 170);
}

.math .spot{
  background-color: rgb(0, 255, 0);
  color: black;
}

.math .spot-1{
  background-color: rgb(0, 170, 0);
}

.pronoun .spot{
  background-color: rgb(120, 120, 120);
  /* color: black; */
}

.pronoun .spot-1{
  background-color: rgb(100, 100, 100);
}

.noun .spot{
  background-color: rgb(255, 0, 255);
  color: black;
}

.noun .spot-1{
  background-color: rgb(170, 0, 170);
}

.verb .spot{
  background-color: rgb(255, 0, 255);
  color: black;
}

.verb .spot-1{
  background-color: rgb(170, 0, 170);
}

.adjective .spot{
  background-color: rgb(255, 0, 255);
  color: black;
}

.adjective .spot-1{
  background-color: rgb(170, 0, 170);
}

.scale_words .spot{
  background-color: rgb(255, 0, 255);
  color: black;
}

.scale_words .spot-1{
  background-color: rgb(170, 0, 170);
}

.preposition .spot{
  background-color: rgb(255, 0, 255);
  color: black;
}

.preposition .spot-1{
  background-color: rgb(170, 0, 170);
}


/* #generation-output {
  display: flex;
} */
#generate-button {
  margin: 2px;
}
.generated {
  display: flex;
}
.generated-letters {
  background-color: white;
  border: 2px solid black;
  color: black;
  margin: 2px;
  min-width: 200px;
  min-height: 30px;
  text-align: center;
}
.sounds {
  background-color: white;
  border: 2px solid black;
  color: black;
  margin: 2px;
  min-width: 200px;
  min-height: 30px;
  text-align: center;
}