78 lines
1.3 KiB
CSS
78 lines
1.3 KiB
CSS
@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;
|
|
}
|
|
}
|