#colorPalette {
  color: #080705;
  color: #40434E;
  color: #702632;
  color: #912F40;
  color: #FFFFFA;
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  background-color: #FFFFFA;
  color: #080705;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    'date optionsButton'
    'graph graph'
    'breakdown breakdown';
}

#date {
  grid-area: date;
  text-align: center;
}

button {
  border: none;
  background: none;
}

#optionsButton {
  grid-area: optionsButton;
}

#optionsIcon {
  width: 60px;
}

#graphWrapper {
  grid-area: graph;
}

#breakdown {
  grid-area: breakdown;
}

#breakdown table,
#breakdown th,
#breakdown td {
  border: 1px solid #40434E;
}

#optionsWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 250, 0.8); /* Opaque version of #FFFFFA */
}

.isHidden {
  display: none;
}

#optionsField {
  position: relative;
  width: min(80%, 40rem);
  margin: 3rem auto 0;
  padding: 1rem 2rem 2rem;
  background-color: #FFFFFA;
  border: 2px solid #080705;
  border-radius: 4px;
}

#optionsExit {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

#optionsExit img {
  width: 2rem;
}

#optionsField h1 {
  margin-bottom: 2rem;
  text-align: center;
}

@media screen and (min-width: 64rem) {
  #wrapper {
    grid-template-areas:
      'date optionsButton'
      'graph breakdown';
  }
}