@media (prefers-color-scheme: dark) {
  :root {
    --color-content-background: #202931;
    --color-content-text: #bac9c9;
    --c1: #13191c;
    --c2: #1d2026;
    --c3: #10151a;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-content-background: #ececec;
    --color-content-text: #1e1e1e;
    --c1: #acc8da;
    --c2: #b1b7c7;
    --c3: #dde1e3;
  }
}

:root {
  --color-accent-text: #00d1b2;
  --u: 20px;
  --gp: 50% / calc(var(--u) * 10) calc(var(--u) * 7.8);
  --dg: 0 25%, #fff0 0 100%;
  --dr: from 45deg at;
  --dl: from -135deg at;
  --du: from -45deg at 50%;
  --dd: from 135deg at 50%;
  --mw: 1010px;
}

html {
  height: 100dvh;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: conic-gradient(var(--dr) 86% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dr) 76% 62%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--dr) 74.5% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dr) 65% 62%, var(--c2) var(--dg)) var(--gp), conic-gradient(var(--dr) 63.5% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dr) 56% 62%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--dr) 54.5% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dr) 50% 62%, var(--c2) var(--dg)) var(--gp), conic-gradient(var(--dl) 14% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dl) 24% 62%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--dl) 25.5% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dl) 35% 62%, var(--c2) var(--dg)) var(--gp), conic-gradient(var(--dl) 36.5% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dl) 44% 62%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--dl) 45.5% 62%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dl) 50% 62%, var(--c2) var(--dg)) var(--gp), conic-gradient(var(--du) 19%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--du) 31%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--du) 33%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--du) 43.5%, var(--c2) var(--dg)) var(--gp), conic-gradient(var(--du) 45.5%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--du) 55%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--du) 57%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--du) 66%, var(--c2) var(--dg)) var(--gp), conic-gradient(var(--dd) 81%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dd) 69%, var(--c3) var(--dg)) var(--gp), conic-gradient(var(--dd) 67%, var(--c1) var(--dg)) var(--gp), conic-gradient(var(--dd) 58%, var(--c2) var(--dg)) var(--gp);
}

body {
  padding: 0;
  border: 0;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  /*grid-template-rows: minmax(50px, 1fr) 25fr minmax(50px, 1fr);*/
  grid-template-rows: minmax(50px, 1fr) 25fr;
  /*grid-template-areas: "header" "main" "footer";*/
  grid-template-areas: "header" "main";
  color: var(--color-content-text);
}

main {
  grid-area: main;
  display: grid;
  gap: 1em 1em;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "aside content automated";
  justify-items: stretch;
}

main article {
  grid-area: automated;
  justify-self: center;
  width: 100%;
  background-color: var(--color-content-background);
}

main section {
  grid-area: content;
  justify-self: center;
  max-width: var(--mw);
  width: 100%;
  background-color: var(--color-content-background);
}

aside {
  grid-area: aside;
  background-color: var(--color-content-background);
}

header {
  grid-area: header;
  background-color: var(--color-content-background);
}

footer {
  grid-area: footer;
  display: grid;
}

footer section {
  justify-self: center;
  width: 100%;
  background-color: var(--color-content-background);
}

.wee-meme-image {
  width: 25rem;
}

.enactment {
  display: grid;
  gap: 1em 1em;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "form details" "artifacts artifacts";
  justify-items: stretch;
}

.form {
  grid-area: form;
  width: 100%;
}

.details {
  grid-area: details;
  width: 100%;
}

.artifacts {
  grid-area: artifacts;
  width: 100%;
}

.accent {
  color: var(--color-accent-text);
}

strong {
  color: var(--color-content-text);
}

.automated-activity {
  display: grid;
  gap: 1em 1em;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr;
  grid-template-areas: "progress name";
  justify-items: stretch;
}

.automated-activity > progress {
  grid-area: progress;
  justify-self: center;
  align-self: center;
  width: 100%;
}

progress.activity {
  margin-bottom: 0 !important;
}

.automated-activity > span {
  grid-area: name;
  justify-self: start;
  align-self: center;
  width: 100%;
}
