:root {
--svg-bg: #111a21;
--svg-surface: #1a2630;
--svg-text: #dbe7ef;
--svg-heading: #f4f9fc;
--svg-link: #9fd6ff;
--svg-link-visited: #c8b7ff;
--svg-accent: #5ec4b6;
--svg-border: #314657;
--svg-focus: #7fd0ff;
}

body {
margin: 0;
background: radial-gradient(circle at 16% 0%, #233543 0%, var(--svg-bg) 48%);
color: var(--svg-text);
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.65;
}

header,
main,
footer {
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
}

header {
padding-top: 1rem;
}

main {
padding-bottom: 1.5rem;
}

h1,
h2,
h3 {
color: var(--svg-heading);
line-height: 1.3;
}

h1 {
margin-bottom: 0.85rem;
font-size: clamp(2rem, 4vw, 3rem);
text-align: left;
}

a {
color: var(--svg-link);
}

a:visited {
color: var(--svg-link-visited);
}

a:hover {
color: var(--svg-accent);
}

a:focus-visible {
outline: 3px solid var(--svg-focus);
outline-offset: 2px;
border-radius: 2px;
}

#backHome,
#home {
display: inline-block;
padding: 0.45rem 0.7rem;
border: 1px solid var(--svg-border);
border-radius: 999px;
background: color-mix(in srgb, var(--svg-surface) 90%, transparent);
text-decoration: none;
}

#drawingList > ul {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0.9rem;
}

#drawingList li {
margin: 0;
}

#drawingList li a {
display: flex;
flex-direction: column;
gap: 0.65rem;
height: 100%;
padding: 0.8rem;
border-radius: 12px;
border: 1px solid var(--svg-border);
background: linear-gradient(180deg, #263746 0%, #1b2934 100%);
text-decoration: none;
}

#drawingList li a img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--svg-border) 65%, transparent);
background: #f2f7fb;
}

#drawingList li a:hover,
#drawingList li a:focus-visible {
border-color: var(--svg-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--svg-accent) 55%, transparent);
}

main ul:not(#drawingList > ul) {
padding-left: 1.2rem;
}

main li {
max-width: 70ch;
}

.container {
background: color-mix(in srgb, var(--svg-surface) 92%, transparent);
border: 1px solid var(--svg-border);
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
}

.drawing {
display: block;
margin: 0 auto;
}

footer {
padding-bottom: 1rem;
text-align: center;
}

@media (prefers-color-scheme: light) {
:root {
--svg-bg: #eef4f8;
--svg-surface: #ffffff;
--svg-text: #2a3844;
--svg-heading: #101c26;
--svg-link: #0b5fad;
--svg-link-visited: #5b3fa8;
--svg-accent: #0e8a7b;
--svg-border: #c2d3df;
--svg-focus: #0b5fad;
}

body {
background: radial-gradient(circle at 16% 0%, #f7fbff 0%, var(--svg-bg) 52%);
}

#drawingList li a {
background: linear-gradient(180deg, #fdfefe 0%, #f3f8fb 100%);
}
}