<p>Use your operating system’s preferences to <mark>switch between light and dark mode</mark>.</p>
:root {
--primary-color: #333;
--primary-background: #e4e4e4;
--highlight-color: hotpink;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #fafafa;
--primary-background: #121212;
--highlight-color: lime;
}
}
body {
color: var(--primary-color);
background-color: var(--primary-background);
}
mark {
background: var(--highlight-color);
}
@layer reset {
*,
*:after,
*:before {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
ul[class] {
list-style: none;
}
label {
cursor: pointer;
max-width: max-content;
user-select: none;
}
}
@layer baselayout {
html {
margin: auto;
line-height: 1.5;
font-size: 24px;
font-family: "Syne", sans-serif;
height: 100%;
background: white;
}
body {
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100dvh;
padding: 2em;
display: grid;
place-content: center;
}
footer {
text-align: center;
font-style: italic;
margin-top: 2rem;
}
h1,
h2,
summary {
font-family: "Anybody", sans-serif;
text-decoration: underline;
text-decoration-color: hsl(156deg 100% 50% / 50%);
text-decoration-thickness: 0.2rem;
text-decoration-style: wavy;
text-decoration-skip-ink: none;
}
h2 {
margin: 2em 0 0.5em 0;
text-wrap: balance;
}
a {
color: inherit;
}
button,
input,
textarea {
font-family: inherit;
font-size: inherit;
}
}
@layer components {
@layer button {
button {
padding: 0.2em 0.4em;
border-width: 2px;
border-radius: 0.25em;
text-transform: uppercase;
}
}
}
@layer utilities {
.float-right {
float: right;
margin-left: 0.5em;
}
.float-left {
float: left;
margin-right: 0.5em;
}
*:has(> .float-right, > .float-left) {
display: flow-root;
}
.row {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
.gap {
gap: 1rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.