#water-problem-container {
  padding-top: 2rem;
  width: 100%;
}

#water-container {
  height: 30rem;
  border: 2px black solid;
  display: flex;

  overflow: hidden;
}

#water-container-inputs {
  height: 20%;
  display: flex;
  align-items: center;

  text-align: center;
}

#water-container-inputs > * {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

#water-elements.invalid {
  border: 2px solid red;
}

#water-elements.invalid:focus {
  outline: 2px solid red;
}

.land-component {
  background-color: black;

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.water-component {
  background-color: lightblue;
}

.show-grid {
  outline: 0.5px solid white;
  outline-offset: -0.5px;
}