* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#background {
  min-height: 100vh;
  padding: 24px;
  background-color: DeepSkyBlue;
  color: #222;
}

h1,
h2 {
  margin-top: 0;
}

h1 {
  color: #ffffff;
}

.container {
  max-width: 760px;
  margin: 16px 0;
  padding: 20px;
  border: 2px solid #555;
}

#top_container {
  background-color: AliceBlue;
}

#second_container.inactive {
  background-color: Ivory;
}

#second_container.active {
  background-color: AliceBlue;
}

button,
select {
  font: inherit;
  padding: 10px 14px;
  border: 2px solid #555;
}

button {
  cursor: pointer;
}

#resetButton {
  margin-bottom: 8px;
  background-color: LightSalmon;
  color: LightCoral;
}

.choice-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.choice.active,
label.active {
  color: Red;
}

.choice.inactive,
label.inactive,
.dropdown.inactive {
  color: DarkGray;
}

.slider {
  padding: 12px;
  background-color: Yellow;
  opacity: 0.5;
}

.slider.disabled {
  background-color: DarkGray;
}

.selections {
  display: grid;
  max-width: 760px;
  grid-template-columns: 160px minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}

.dropdown.active {
  background-color: #ffffff;
  color: Red;
}

.dropdown:disabled {
  cursor: not-allowed;
}

#goButton {
  background-color: LightGreen;
  color: DarkSeaGreen;
}

#goButton.disabled {
  background-color: Beige;
  color: DarkGray;
  cursor: not-allowed;
}

.result-area {
  max-width: 760px;
  margin-top: 24px;
  padding: 20px;
  background-color: #ffffff;
}

.result-area ul {
  padding-left: 24px;
}

.result-area table {
  border-collapse: collapse;
}

.result-area th,
.result-area td {
  padding: 8px 16px;
  border: 1px solid #777;
  text-align: left;
}

.hidden {
  display: none;
}