:root {
  --color: rgba(255, 255, 255, 0.952);
  --color-red: rgb(255, 0, 0);
  --color-dark: rgb(146, 146, 146);
  --background-color-code: #1e1e1e;
  --background-color: #222222;
  --background-color-card: #333333;
  --scrollbar-background: #333333;
  --scrollbar-item: #222222;

  --solved-two: green;
  --solved-two-dark: rgb(0, 88, 0);
  --solved-one: rgb(31, 61, 31);
  --solved-one-dark: rgb(26, 48, 26);
  
  --body-padding: 1em;

  --day-width: 12em;
  --day-padding: 1em;
  --days-gap: 1em;
  --max-days-in-row: 5;
}

* {
  scrollbar-color: var(--scrollbar-item) var(--scrollbar-background) ;
}

body {
  color: var(--color);
  background-color: var(--background-color);
  font-family: monospace;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: calc(
    (var(--day-width) + 2 * var(--day-padding))
    *
    var(--max-days-in-row)
    +
    (var(--days-gap) * (var(--max-days-in-row) - 1))
    +
    2 * var(--body-padding)
  );
  margin: 0 auto;
  padding: var(--body-padding);
  box-sizing: border-box;
  overflow-y: scroll;
}

footer {
  margin-top: auto;
  padding-top: 3em;
}

a {
  color: unset;
}

footer {
  text-align: left;
}

footer>.sources>ul>li {
  color: var(--color-dark);
}

footer>.sources>ul>li>a {
  color: var(--color);
}

.icon {
  height: 1em;
  vertical-align: middle;
}

.comment {
  color: var(--color-dark);
  font-style: italic;
}

.years, .days, .puzzle {
  padding: 0;
}

.years>li, .days>li, .puzzle>li {
  list-style-type: none;
}

.prevent-newline {
  white-space: nowrap;
}

.hidden {
  display: none;
}

.grey {
  color: var(--color-dark);
}

.red {
  color: var(--color-red);
}

/* ######### */
/* # Years # */
/* ######### */

.years>li>h2 {
  margin-top: 3em;
}

/* ######## */
/* # Days # */
/* ######## */

.days {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, calc(var(--day-width) + 2 * var(--day-padding)));
  gap: var(--days-gap);
  flex-wrap: wrap;
  margin: auto;
}

.days>li {
  min-width: var(--day-width);
  max-width: var(--day-width);
  background-color: var(--background-color-card);
  padding: var(--day-padding);
  border-radius: 0.5em;
  margin-right: auto;
}

.days>li>h3 {
  margin-top: 0;
}

.puzzle-1-solved:not(.puzzle-2-solved),
.puzzle-2-solved:not(.puzzle-1-solved) {
  background-color: var(--solved-one);
}

.puzzle-1-solved.puzzle-2-solved {
  background-color: var(--solved-two);
}

/* ########## */
/* # puzzle # */
/* ########## */

.puzzle>li {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background-color);
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
  margin-top: 0.25em;
}

.puzzle>li>.result {
  margin-left: auto;
}

.puzzle>li:not(.solved) {
  color: var(--color-dark);
}

.puzzle-1-solved:not(.puzzle-2-solved)>.puzzle>li,
.puzzle-2-solved:not(.puzzle-1-solved)>.puzzle>li {
  background-color: var(--solved-one-dark);
}

.puzzle-1-solved.puzzle-2-solved>.puzzle>li {
  background-color: var(--solved-two-dark);
}

.shiki{
  text-align: left;
  border-radius: 1em;
  padding: 1em;
  background-color: var(--background-color-code) !important;
  overflow-x: scroll;
  counter-reset: step;
  counter-increment: step 0;
}

.shiki .line::before {
  content: counter(step);
  counter-increment: step;
  width: 1.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  text-align: right;
  color: rgba(115,138,148,.4)
}

details summary {
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
}