/* restrict to light-mode:  */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: #fff;
    --accent-bg: #f5f7ff;
    --text: #212121;
    --text-light: #585858;
    --accent: #0d47a1;
    --accent-hover: #1266e2;
    --accent-text: var(--bg);
    --code: #d81b60;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
  }
}

h2 {
  margin: 1rem 0;
}

body {
  background: linear-gradient(to bottom, #d9efff, #e1ffed);
}

body header {
  padding: 0;
  background: linear-gradient(to top, #e5e5e5, #fff);
  border: none;
}

header nav {
  padding: 0;
}

a, header nav a, header nav a:hover {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:root {
  --bg: #fff;
  --accent: #078;
}

.hidden {
  display: none;
}

body footer {
  margin-top: 0;
  padding: 0;
}

footer nav ul li {
  display: inline-block;
}

footer nav a, footer nav a:visited {
  margin: 0 0.5rem 1rem 0.5rem;
}

/*img.screenshot {*/
/*  max-width: 170pt;*/
/*}*/

/* Scroll Gallery Styles START */
.scroll-gallery {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
}

.scroll-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 200px; /* or use a percentage if desired */
}

.scroll-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Scroll Gallery Styles END */