style.css

html {
  background-color: #222;
  color: white;
  font-family: "Courier New", Courier, monospace;
}
.title {
  font-size: x-large;
  color: #f9c74f;
}
.subtitle {
  color: #43aa8b;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.navv {
  display: flex;
  height: 50px;
  flex: 1;
  /* height: 100px; */
  /* align-items: stretch; */
  border: solid #577590 6px;
  justify-content: space-between;
}
button {
  height: 50px;
  background-color: #43aa8b;
  font-size: medium;
  align-self: flex-start;
}
select {
  height: 50px;
  font-size: medium;
  align-self: flex-end;
  justify-self: center;
}
td {
  height: 50px;
  width: 50px;
  background-color: grey;
  transition: background-color 0.5s ease;
}
.red {
  background-color: #f94144;
}
.orange {
  background-color: #f3722c;
}
.yelloworange {
  background-color: #f8961e;
}
.maize {
  background-color: #f9c74f;
}
.pistachio {
  background-color: #90be6d;
}
.zomp {
  background-color: #43aa8b;
}
.blue {
  background-color: #577590;
}