:root {
  --bg-color: rgb(255, 253, 247);
  --color: rgb(16, 15, 15);
  --foot-color: rgb(111, 110, 105);
  --btn-bg: rgb(242, 240, 229);
  --btn-border: rgb(230, 228, 217);
  --btn-border-hover: rgb(218, 216, 206);
  --btn-paused: rgb(32, 94, 166);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: rgb(28, 27, 26);
    --color: rgb(206, 205, 195);
    --foot-color: rgb(135, 133, 128);
    --btn-bg: rgb(16, 15, 15);
    --btn-border: rgb(40, 39, 38);
    --btn-border-hover: rgb(52, 51, 49);
    --btn-paused: rgb(67, 133, 190);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

body {
  background: var(--bg-color);
  color: var(--color);
  overflow: hidden;
}

#gallery {
  position: fixed;
  inset: 0 0 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#photo {
  max-width: min(100%, 3000px);
  max-height: 100%;
  object-fit: contain;
  background: #F6EFEF;
  padding: clamp(20px, 2vw, 40px);
  border: calc(clamp(20px, 2vw, 40px) / 3) solid #252528;
}

#photo.unloaded {
  opacity: 0;
}

.controls {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.controls button {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--color);
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.controls button:hover {
  border-color: var(--btn-border-hover);
}

.controls button.paused {
  border-color: var(--btn-paused);
}

footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 0 10px;
  font-size: 16px;
  color: var(--foot-color);
  text-align: center;
}

footer span {
  display: inline-block;
}

footer a {
  opacity: 1.0;
  color: var(--color);
  text-decoration: none;
}

footer a:hover{
  text-decoration: underline;
}