/* Global variables. */
:root,
::backdrop {
  /* Default (light) theme */
  --bg: #f4ebeb;
  --text: #594f67;
  --dropshadow: #a0979c;
  --photoborder: #ffffff;
  --linkcolor: #1b6bb7;
  --visitedlink: #792dcf;
  --hoverlink: magenta;
  --captionbg: #f8e2e2;
  --h1color: #f876b1;
  --h2color: #e276f8;
  --footerbg: #f8e2e2;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #323442;
    --text: #dcdcdc;
    --dropshadow: #000000;
    --photoborder: #ffffff;
    --linkcolor: rgb(0, 170, 255);
    --visitedlink: rgb(205, 153, 249);
    --hoverlink: magenta;
    --captionbg: rgb(74, 42, 122);
    --h1color: pink;
    --h2color: violet;
    --footerbg: #41384e;
  }
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    padding: 0.5rem;
}
header {
    text-align: center;
}
h1 {
    color: var(--h1color);
}
h2 {
    color: var(--h2color);
}
figure img {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 5px;
    border-width: 0.25rem;
    border-color: var(--photoborder);
    border-style: solid;
    margin: 0.5rem;
    filter:
        drop-shadow(0 0 5px var(--dropshadow));
}

figcaption {
    text-align: center;
    padding: 0.5rem;
    margin: 0.25rem;
    border-radius: 5px;
    background-color: var(--captionbg);
    filter:
        drop-shadow(0 0 2px var(--dropshadow));
    max-width: 100%;
}
.photo {
    text-align: center;
}
a {
    color: var(--linkcolor);
    text-decoration-thickness: 0.05rem;
    text-underline-offset: 0.15rem;
}
a:visited {
    color: var(--visitedlink);
}
a:hover, a:active {
    color: var(--hoverlink);
}
footer {
    text-align: center;
    font-size: 1rem;
    background-color: var(--footerbg);
    padding: 0.5rem;
}