/*
variables
*/

:root {
    --alpha: rgba(0, 0, 0, 0);
    --anchor-gradient: linear-gradient(to top, var(--alpha), var(--anchor-background), var(--alpha));
    --article-gradient: linear-gradient(to top, var(--alpha), var(--article-background));
    --section-gradient: linear-gradient(to top, var(--alpha), var(--section-header-background));
    --footer-gradient: linear-gradient(to top, var(--footer-background), var(--footer-background) 66%, var(--alpha));
    --header-gradient: linear-gradient(to top, var(--alpha), var(--header-background) 33%, var(--header-background));
    --article-header-gradient: linear-gradient(to top, var(--alpha), var(--article-header-background));
    --article-sub-gradient: linear-gradient(to top, var(--alpha), var(--article-sub-background));
/*
light
*/
    --anchor-background: #fcc;
    --anchor-foreground: #00f;
    --anchor-hover: #f00;
    --article-background: #ccc;
    --body-background: #fff;
    --body-foreground: #000;
    --body-image: url("../img/light/debian-white.jpeg");
    --button-background: #bbb;
    --footer-background: #8cc;
    --header-background: #8cc;
    --section-header-background: #8c8;
    --article-header-background: #ebb;
    --article-sub-background: #bbe;
}
/*
dark
*/
@media screen {
[data-theme="dark"] {
    --anchor-background: #622;
    --anchor-foreground: #f88;
    --anchor-hover: #cc6;
    --article-background: #777;
    --body-background: #000;
    --body-foreground: #ccc;
    --body-image: url("../img/dark/debian-blue.jpeg");
    --button-background: #444;
    --footer-background: #033;
    --header-background: #033;
    --section-header-background: #030;
    --article-header-background: #300;
    --article-sub-background: #003;
}
}

/*
document
*/

html {
    font-family: "DejaVu Sans", sans-serif;
    text-align: start;
}

body {
    background-color: var(--body-background);
    background-image: var(--body-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--body-foreground);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*
structure
*/

.sticky {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: sticky;
}

header.sticky {
    background: var(--header-gradient);
    margin-block-end: .5em;
    top: 0;
}

footer {
    background: var(--footer-gradient);
}

footer.sticky {
    bottom: 0;
    margin-block-start: .5em;
}

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-evenly;
}

button {
    background-color: var(--button-background);
}

button img {
    block-size: 1.5em;
}

/*
links
*/

.link #link,
.link a {
    background: var(--anchor-gradient);
}

a {
    color: var(--anchor-foreground);
    text-decoration: none;
    text-decoration-skip-ink: auto;
    text-underline-offset: .15em;
}

a:hover {
    color: var(--anchor-hover);
}

a img {
    block-size: 1.5em;
}

/*
headings
*/

h1, h2, h3, h4, h5 {
    font-weight: bold;
    padding: .25em .5em;
}

h4 {
    font-weight: normal;
}

h1 {
    font-size: 1.4rem;
}
h2 {
    font-size: 1.3rem;
}
h3 {
    font-size: 1.2rem;
}
h4 {
    font-size: 1.1rem;
}

/*
sections
*/

header:has(h2) {
    background: var(--section-gradient);
}

section .body {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    justify-content: space-evenly;
}

/*
articles
*/

article {
    background: var(--article-gradient);
    padding: .25em .5em;
}

header:has(h3) {
    background: var(--article-header-gradient);
}
header:has(h4) {
    background: var(--article-sub-gradient);
}

article .body {
    display: block;
}

/*
content
*/

ul {
    list-style-type: disc;
    padding-inline-start: 1.25em;
}

hr {
    border-style: dashed;
    margin: .5em;
}

/*
debug
*/

.debug * {
    border-color: lightgray;
    border-style: dashed;
    border-width: 1px;
}