@import url(base.css);

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


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

h1 {
  font-size: 250%;
  --around-image: url(media/sparkles.svg);
}

#examples, #examples > * {
  height: var(--img-height);
  width:  var(--img-width);
}

#examples {
  overflow: hidden;
  position: relative;
}

#examples > * {
  position: absolute;
  top: 0px; left: 0px;
  margin: 0;
}

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

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

#examples dl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

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

#examples dt { grid-area: 1; align-self: start; }
#examples dd { grid-area: 2; align-self: end;   }

#examples a { font-weight: 600; }

#examples dl { pointer-events: none; }
#examples a  { pointer-events: auto; }

#terms {
  padding: 1.5em;
  text-align: left;

  background: hsla(45deg, 90%, 98%, 75%);
  color: black;
  text-shadow: none;
  font-weight: 400;
}

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