@media (prefers-color-scheme:light) {
  :root {
    --containerbackground: #c3eae8;
    --containerborderdark: #accbc9;
    --containerborderlight: #e4f6f5;
    --textglow: #022f2d;
    --textshadow: #59827f;
    --metalcolor: #b9c0be;
    --metalborderlight: #e8eceb;
    --metalborderdark: #7b7f81;
    --metalImage: url(/img/texture/metalLight.webp);
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --containerbackground: #1d2d17;
    --containerborderdark: #2a4c33;
    --containerborderlight: #2a693a;
    --textglow: #9ce19c;
    --textshadow: #5fe75f;
    --metalcolor: #4e5254;
    --metalborderlight: #aab1b1;
    --metalborderdark: #06080a;
    --metalImage: url(/img/texture/metalDark.webp);
  }
}
label {
  font-family: 'BlenderPro', monospace;
  margin-left: 1em;
}
#maindisplay {
  min-height: 70vh;
}
.datemaincontainer {
  display: flex;
  flex-wrap: wrap;
  margin: 0 var(--sidemargin) 1em var(--sidemargin);
  background-color: var(--metalcolor);
  background-image: var(--metalImage);
  background-size: 60%;
  background-position: center;
  border: 0.25em solid var(--metalborderlight);
  border-bottom: 0.25em solid var(--metalborderdark);
  border-right: 0.25em solid var(--metalborderdark);
  box-shadow: 0 0 0.5em var(--shadowcolor);
}
.datesubcontainer p {
  font-family: 'SevenSegment', monospace;
  margin: 0 2em;
  color: var(--textglow);
  text-shadow: 0 0 0.25em var(--textshadow);
}
.datesubcontainer h1 {
  font-family: monospace;
  font-size: 0.5em;
  margin: 0;
  color: var(--textglow);
  text-shadow: 0 0 0.25em var(--textshadow);
}
.datesubcontainer h2 {
  font-family: monospace;
  font-size: 1em;
  margin: 0;
  color: var(--textglow);
  text-shadow: 0 0 0.25em var(--textshadow);
}
.datesubcontainer {
  display: flex;
  flex-direction: column;
  background-color: var(--containerbackground);
  border: 2px solid var(--containerborderdark);
  border-bottom: 2px solid var(--containerborderlight);
  border-right: 2px solid var(--containerborderlight);
  box-shadow: 0 0 2px #000000;
  padding: 0.5em;
  margin: 1em 2em;
}
.daysButton {
  width: auto;
  height: 2rem;
  padding: 0 1em;
  margin: 1em 0 1em 1em;
  font-size: 1em;
  background-image: none;
  background-color: var(--metalcolor);
  border-radius: 0;
  border: 2px solid var(--metalborderlight);
  border-bottom: 2px solid var(--metalborderdark);
  border-right: 2px solid var(--metalborderdark);
  box-shadow: none;
}
button:hover.daysButton {
  background-color: var(--metalborderlight);
  background-image: none;
}
input.dateInput {
  height: 2rem;
  padding: 0 1em;
  margin: 1em 0;
  color: var(--textcolor);
  font-family: 'BlenderPro', monospace;
  font-size: 1em;
  box-shadow: none;
  background-color: var(--metalcolor);
  border-radius: 0;
  border: 2px solid var(--metalborderlight);
  border-bottom: 2px solid var(--metalborderdark);
  border-right: 2px solid var(--metalborderdark);
}
.chartcontainer {
  height: 9em;
  min-width: 18em;
  width: min-content;
  padding: 0;
}
#randomGraph {
  height: 100%;
  width: 100%;
  z-index: 10;
  margin: 0;
}
.progressBlocks {
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
  gap: 0.11em;
  width: 15em;
  height: 15em;
}
.progressBox {
  width: 1.4em;
  height: 1.4em;
  background-color: var(--textglow);
  box-shadow: 0 0 0.25em var(--textshadow);;
}
.inputs {
  flex-wrap: wrap;
}