main {
  /* display: flex;
  justify-content: space-evenly; */
  margin-top: -80px;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
  margin-left: 100px;
}

@media (max-width: 1190px) {
  /* .buttons-container {
    margin-top: 10vh;
  } */
  .fizzcenter {
    margin-top: 12vh;
  }
}

svg {
  width: 100%;
  height: auto;
}

.buttons-container {
  display: grid;
  justify-content: center;
  grid-template-columns: auto auto;
  margin: 1em;
}

.buttons-container button {
  /* flex-direction: column; */
  border: 2px solid grey;
}

.grid-container {
  display: grid;
  justify-content: start;
  width: auto;
  /* grid-template-columns: [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px [col] 70px; */
  /* grid-template-columns: repeat(11, 70px); */
  grid-template-columns: repeat(11, minmax(40px, 100px));
  grid-template-rows: repeat(auto-fit);
  grid-template-rows: [row] auto [row]auto [row];
  background-color: #2196f3;
  padding: 1em;
  margin-left: 2em;
}
.grid-item {
  background-color: burlywood;
  border: 1px solid gold;
  display: grid;
  place-items: center;
  /* padding: 20px; */
  padding: 1rem;
  font-size: 20px;
  /* text-align: center; */
  height: 30px;
  /* color: maroon; */
}

.grid-item-current {
  border: 1px solid darkgoldenrod;
  display: grid;
  justify-content: center;
  padding: 1rem;
  font-size: 20px;
  height: 30px;
}

.codeblock {
  display: flex;
  justify-content: start;
  align-self: flex-start;
  padding: 2em;
}

.code {
  font-size: 20px;
  margin-top: 10vh;
}

.control {
  color: purple;
}

.variable {
  color: purple;
  font-style: italic;
}

.values {
  color: orange;
}

.structure {
  color: blue;
}

.string {
  color: green;
}

.fizzBuzzStatus {
  background-color: rgb(165, 42, 42, 0.5);
}

.fizzStatus {
  background-color: rgba(128, 0, 128, 0.5);
}

.currentNum {
  color: crimson;
  font: 700;
  font-size: 40px;
}

.buzzStatus {
  background-color: chocolate;
}

.numberStatus {
  background-color: rgba(1, 11, 19, 0.5);
}

/*# sourceMappingURL=style.a6367498.css.map */