/* Uses everforest palette: https://github.com/sainnhe/everforest */
/* Light mode (default) */
:root {
  --color-bg-dim: #fef9ed;
  --color-bg0: #fdf6e3;
  --color-bg1: #f4f0d9;
  --color-bg2: #efebd4;
  --color-bg3: #e6e2cc;
  --color-bg4: #e0dcc7;
  --color-bg5: #bdc3af;
  --color-bg-visual: #eaedc8;
  --color-bg-red: #fde3da;
  --color-bg-yellow: #faedcd;
  --color-bg-green: #f0f1d2;
  --color-bg-blue: #e9f0e9;
  --color-bg-purple: #fae8e2;
  --color-fg: #5c6a72;
  --color-red: #f85552;
  --color-orange: #f57d26;
  --color-yellow: #dfa000;
  --color-green: #8da101;
  --color-aqua: #35a77c;
  --color-blue: #3a94c5;
  --color-purple: #df69ba;
  --color-grey0: #a6b0a0;
  --color-grey1: #939f91;
  --color-grey2: #829181;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-dim: #232a2e;
    --color-bg0: #2d353b;
    --color-bg1: #343f44;
    --color-bg2: #3d484d;
    --color-bg3: #475258;
    --color-bg4: #4f585e;
    --color-bg5: #56635f;
    --color-bg-visual: #543a48;
    --color-bg-red: #514045;
    --color-bg-yellow: #4d4c43;
    --color-bg-green: #425047;
    --color-bg-blue: #3a515d;
    --color-bg-purple: #4a444e;
    --color-fg: #d3c6aa;
    --color-red: #e67e80;
    --color-orange: #e69875;
    --color-yellow: #dbbc7f;
    --color-green: #a7c080;
    --color-aqua: #83c092;
    --color-blue: #7fbbb3;
    --color-purple: #d699b6;
    --color-grey0: #7a8478;
    --color-grey1: #859289;
    --color-grey2: #9da9a0;
  }
}

/* fallbacks, provided from outside */
:root {
  --image-aspect-ratio: 1 / 1;
  --image-cols: 5;
}

/* general */
html {
  background: var(--color-bg0);
  color: var(--color-fg);
  font-size: 2vh;
  font-style: normal;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0vh;
  margin: 0vh;
}

h1 {
  font-size: 4vh;
  font-weight: 700;
  margin: 0vh;
  padding: 2vh;
}
h2 {
  font-size: 3vh;
  font-weight: 400;
  margin: 0vh;
  padding: 1vh;
}

img {
  width: 20vmin;
  border-radius: 1vmin;
  aspect-ratio: var(--image-aspect-ratio);
  object-fit: cover;
}
.favicon {
  object-fit: contain;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3vmin;
  gap: 2vmin;
}

form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
input[type="number"] {
  background-color: var(--color-bg5);
  width: 8ch;
  color: var(--color-fg);
  border: 1px solid var(--color-bg-green);
  font-size: 2vh;

  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]:focus {
  outline: none;
  border-color: var(--color-green);
}

button {
  font-size: 2vh;
  background-color: var(--color-bg-green);
  color: var(--color-text);
  border: 1px solid var(--color-green);
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;
}
button:hover {
  background-color: var(--color-green);
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-green);
  text-decoration: underline;
}

code {
  user-select: all;
  padding: 0.5vmin;
  background-color: var(--color-bg-yellow);
  color: var(--color-yellow);
}

/* image grids */
.images {
  height: 90vh;
  width: 90vw;
  margin-top: 1vmin;
  display: grid;
  grid-template-columns: repeat(var(--image-cols), 1fr);
  grid-gap: 1vmin;
  justify-content: center;
  align-items: center;
}
.images img {
  width: 100%;
}

/* progress bar */
#progress-box {
  box-sizing: border-box; /* include margin in width */
  height: 4vh;
  width: 90vw;
  padding: 0.5vh 0.5vw;
  background-color: var(--color-bg2);
  border-radius: 1vmin;
}
#progress-text {
  position: absolute;
  text-align: center;
  width: 89vw;
  font-size: 2vh;
  padding: 0.5vmin;
}
#progress-bar {
  position: absolute;
  background-color: var(--color-bg-green);
  width: 89vw;
  height: 3vh;
  border-radius: 0.5vmin;
}