:root {
  --bg: hsl(260, 100%, 3%);
  --bg-lighter: hsl(from var(--bg) h s calc(l + 2));

  --font: hsl(from var(--bg) h s 88%);

  --total-width: 80%;

  --spacing-s: 15px;
  --spacing-m: calc(var(--spacing-s) * 2);
  --spacing-l: calc(var(--spacing-m) * 2);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--bg);
  color: var(--font);
  font-family: 'Verdana', 'sans-serif';
}

main {
  width: var(--total-width);
  margin: auto;
  padding: 0;
}

footer {
  background: var(--bg-lighter);
  margin-top: var(--spacing-l);
  padding: var(--spacing-m) 0;
}

.footer-links {
  display: flex;
  flex-direction: row;
  width: var(--total-width);
  margin: auto;
}

a, a:visited {
  text-decoration: underline;
  color: var(--font);
}

h1 {
  margin: var(--spacing-l) 0 0 0;
}

.subtitle {
  margin-bottom: var(--spacing-m);
  opacity: .8;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#image-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image {
  cursor: zoom-in;
  width: 48%;
  height: 100%;
  padding: var(--spacing-m) 0;
}

@media screen and (width <= 800px) {
  .image {
    width: 100%;
  }
}

dialog {
  width: 95vw;
  height: 95vh;
  border: none;
  display: flex;
  background: var(--bg-lighter);
  padding: 0;
}

@media screen and (width <= 550px) {
  dialog {
    height: fit-content;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
  }
}

::backdrop {
  background: var(--bg);
  opacity: 0.9;
}

#dialog-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: auto;
}

.hidden {
  display: none;
}