@import url("reset.css");
@layer base, layout, components;

:root {
    --bg: #abc;
    --bg-muted: #ccc;
    --fg: #111;
    --fg-muted: #333;
    --primary: #223344;
    --primary-fg: #fff;
    --primary-muted: #445566;
    --header-fg: #ffffff;

    --header-height: clamp(64px, 8.5vh, 92px);
}

.content-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-block: 2rem;
    padding: 2rem 5rem;
    width: clamp(300px, 90vw, 100rem);
    border-inline: 25px solid var(--primary);
    background-color: var(--bg);
    color: var(--fg);
    margin: 0 auto;
}

.content-frame > * {
    width: 100%;
}

.text-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.text-body p {
    max-width: 60ch;
    margin-inline: auto;
    font-size: clamp(1rem, 1.2vw, 18px);
    text-align: left;
}

article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: clamp(320px, 70vw, 100rem);
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--bg);
}

body {
    background-color: #012;
    overflow-x: hidden;
}

figcaption {
    text-align: center;
    font-style: italic;
    color: var(--fg-muted);
    font-size: clamp(12px, 0.8vw, 16px);
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--primary);
}
h1 {
    font-size: clamp(20px, 4vw, 2.5rem);
}
h3, h4, h5, h6 {
    border: none;
}

img {
    width: 100%;
}

li {
    list-style: disc outside;
}

section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 80ch;
}

ul, ol {
    display: flex;
    flex-direction: column;
    gap: 0.5rem 0;
    padding-inline-start: 4rem;
}

@media screen and (max-width: 600px) {
    .content-frame {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 2rem;
        width: 100%;
        border: none;
        background-color: var(--bg);
        margin: 0 auto;
    }
}