style_desktop.css

main { background-color: var(--background); }
main section {
  background-color: var(--main);
  padding: 1rem;
}

fc-trip {
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: auto 58% 38% auto;
  grid-template-areas:
    ". menu menu ."
    ". expenses balance ."
    ". add_expense add_expense .";
}

fc-trip menu { grid-area: menu; }
[path=expenses] {
  grid-area: expenses;
  height: 70vh;
  overflow-y: scroll;
}
[path=expenses]:not(.active) { display: block; }
[path=balance] { grid-area: balance; }
[path=balance]:not(.active) { display: block; }
[path=add_expense] { grid-area: add_expense; }

fc-trip menu .active {
  border-bottom: 0;
  padding-bottom: 1rem;
}

fc-trip [path="add_expense"] {
  background-color: var(--background);
  border: 2px solid var(--secondary);
  box-shadow: 0 0 150px 1rem black;
  margin: 5vh 20vw;
  padding: 1rem;
  position: absolute;
  top: 0;
  width: 60vw;
}

fc-home {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 2rem;
  grid-template-areas:
    "left title known right"
    "left form known right"
    "footer footer footer footer";
  grid-template-columns: 10% 1fr 1fr 10%;
  grid-template-rows: auto;
}
fc-home h2 { grid-area: title; }
fc-home .init-trip { grid-area: form; }
fc-home .known-trips { grid-area: known; }
.known-trips a:hover { color: var(--headline); }
fc-home footer { grid-area: footer; padding: 1rem 0; }
.sunset-warning { grid-area: known; }