@import url(style.css);

:root {
  --img-width: 1050px;
  --img-height: 875px;
}


main {
    max-width: calc(var(--img-width) + 150px);
}

#examples {
  height: var(--img-height);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  filter: drop-shadow(0 0 30px var(--glow-col));
}

#examples, #terms {
  width: var(--img-width);
  padding: 1.5em;
  box-sizing: border-box;
  margin: 1em auto;

  border: 3px solid var(--glow-col);
  border-radius: 1em;
}

#examples section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h2::before, h2::after {
  content: none;
}

#examples section > * {
  background: hsla(320deg, 40%, 20%, 60%);
  font-size: 200%;
  font-weight: 500;
  margin: 0;
}

#terms { background: hsla(0deg, 0%, 100%, 75%); }

#terms {
  text-align: left;

  color: black;
  text-shadow: none;
  font-weight: 400;
}

details {
  margin-top: 1em;
}

summary > * {
  display: inline;
}

@media (prefers-contrast: high), (prefers-color-scheme: dark) {
  #terms { background: hsla(0deg, 0%, 0%, 65%); }
  #terms { color: white; }
}