/* assets/css/site.css */
:root {
    --pico-font-size: 100%;
    --pico-primary: #a20c33;
    --pico-primary-background: #a20c33;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: rgba(162, 12, 51, 0.5);
    --pico-primary-hover: #7f0928;
    --pico-primary-hover-background: #8e0b2d;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: rgba(162, 12, 51, 0.25);
    --pico-primary-inverse: #fff;
    --pico-text-selection-color: rgba(162, 12, 51, 0.2);
}

body > header,
body > main,
body > footer {
    padding-block: 1rem;
}

body > footer {
    margin-top: 3rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

nav a {
    text-decoration: none;
}

article h2 a {
    text-decoration: none;
}

.challenge-layout {
    display: grid;
    gap: 2rem;
}

.challenge-layout aside ul {
    padding-left: 1rem;
}

.challenge-layout aside li {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .challenge-layout {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
        align-items: start;
    }

    .challenge-layout aside {
        position: sticky;
        top: 1rem;
    }
}

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-logo {
    height: 2.5rem;
    width: auto;
    max-height: 48px;
    object-fit: contain;
    display: block;
}