/* Boiler Plate */

#app {
  flex-direction: column;
  align-items: center;
}

.Row {
  width: 30%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  color: hsla(0, 0%, 60%, 1);
}

.Row:hover {
  color: hsla(0, 0%, 20%, 1);
}

/* Menu/Toolbar */

.controls {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 20%;
  margin: 7% 0 4% 10%;
}

.control {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  margin-bottom: 0.5rem;
  cursor: default;
  background: white;
  color: hsla(0, 0%, 0%, 0.3);
  transition: background-color 0.05s;
}

.control:last-child {
  margin-bottom: none;
}

.control:hover {
  color: hsla(0, 0%, 0%, 0.5);
  background-color: hsla(0, 0%, 100%, 0.4);
}

/* Main View */

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}