71 lines
1.1 KiB
CSS
71 lines
1.1 KiB
CSS
@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; }
|
|
}
|