body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2rem;
  background: #eee;
}
body,
body section {
  gap: 2rem;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: "Annapurna SIL", serif;
  font-weight: 700;
  font-style: normal;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body ul {
  padding: 0;
  margin: 0;
}
body ul {
  flex-wrap: wrap;
}
body ul li {
  list-style: none;
  white-space: pre;
}
body span.placeholder {
  display: inline-block;
  height: 1lh;
  border-radius: 2lh;
  width: 12ch;
  background: #ccc;
}
body >header,
body main {
  grid-column: span 2;
}
body >header {
  font-size: 1.5rem;
  margin-bottom: -0.75em;
}
body main,
body article,
body section.weather {
  border-radius: 1.5rem;
  background: var(--background, #fff);
  box-shadow: 0 0 0 4px var(--accent, #ccc);
}
body main ul,
body article ul,
body section.weather ul {
  display: flex;
}
body main ul li,
body article ul li,
body section.weather ul li {
  background: #eee;
  padding: 0.25em 0.75em;
  border-radius: 2em;
}
body section.weather {
  grid-column: span 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  padding: 2rem;
}
body section.weather >i,
body section.weather .temperature {
  grid-row: span 2;
}
body section.weather >i {
  height: 7.5rem;
  min-width: 7.5rem;
  font-size: 7.5rem;
}
body section.weather h1 {
  font-size: 3rem;
}
body section.weather .wind {
  display: flex;
  gap: 0.5ch;
  font-size: 2rem;
}
body section.weather .wind i {
  position: relative;
  top: 0.1em;
}
body section.weather .temperature {
  place-self: center;
  font-size: 2.5rem;
  text-align: right;
}
body section.weather .temperature h3 {
  font-size: 1.5rem;
}
body section.weather .temperature span {
  font-size: 0.5em;
  vertical-align: super;
}
body main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% - 4rem);
  padding: 2rem;
  font-size: 1.5rem;
}
body main.empty {
  opacity: 0.5;
  background: none;
}
body main.empty h1 {
  color: #999;
  margin-bottom: -0.15em;
}
body main h1 {
  grid-row: span 2;
  font-size: 5em;
}
body main h2,
body main h3 {
  text-align: right;
}
body main h2 {
  font-size: 3em;
}
body main h3 {
  font-size: 2em;
}
body main ul,
body main section {
  grid-column: span 2;
}
body main ul {
  gap: 2rem;
}
body main ul li {
  font-size: 1.5em;
  padding: 0.25em 0.75em;
}
body main section {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5lh;
  margin-top: 1rem;
}
body main section p.remaining {
  height: 1lh;
  position: relative;
  grid-column: span 3;
}
body main section p.remaining span {
  position: absolute;
  left: var(--progress);
  transform: translateX(calc(var(--progress) * -1));
  white-space: pre;
}
body main section p.from,
body main section p.to {
  font-size: 1.5em;
}
body main section p.from {
  grid-column: 1;
}
body main section p.to {
  grid-column: 3;
}
body main section .bar {
  overflow: hidden;
  position: relative;
  grid-column: span 3;
  height: 2rem;
  background: rgba(204,204,204,0.251);
}
body main section .bar,
body main section .bar:before {
  border-radius: 1rem;
}
body main section .bar:before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(calc((100% - var(--progress)) * -1));
}
body section {
  display: flex;
  flex-direction: column;
}
body section.completed {
  grid-column: 1;
  opacity: 0.75;
}
body section.upcoming {
  grid-column: 2;
}
body section >header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-bottom: -0.5em;
  font-size: 1.5rem;
}
body section >header i {
  font-size: 1.5em;
}
body section article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 1.5rem;
  font-size: 1.15rem;
}
body section article .badge {
  position: absolute;
  top: -0.9em;
  left: 1em;
  padding: 0.25em 0.5em;
  background: var(--accent, #ccc);
  border-radius: 0.5em;
}
body section article .badge .placeholder {
  opacity: 0;
}
body section article h1 {
  grid-row: span 2;
  font-size: 3em;
  margin-right: 1ch;
}
body section article p {
  margin-top: 0.5em;
  white-space: pre;
}
body section article h2,
body section article h3,
body section article p.to {
  text-align: right;
}
body section article h2 {
  font-size: 2em;
}
body section article h3 {
  font-size: 1.5em;
}
body section article ul {
  grid-column: span 2;
  gap: 1rem;
}