body {
    margin: 0;
    background-color: var(--color-paper);
    font-family: 'Archivo Black';
    display: flex;
}

aside {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 18rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 3px solid var(--color-ink);
    background-color: var(--color-paper);

    & header {
        display: flex;
        border-bottom: 3px solid var(--color-ink);

        & a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1.25rem;
            color: var(--color-ink);
            text-decoration: none;
            flex: 1;
            transition: all 0.2s ease-in-out;

            &:hover {
                background-color: var(--color-tertiary);

                & span.brand-logo {
                    transform: translate(-3px, -3px);
                    box-shadow: 6px 6px 0 0 var(--color-ink);
                }
            }

            & span.brand-logo {
                display: inline-flex;
                height: 2.5rem;
                width: 2.5rem;
                align-items: center;
                justify-content: center;
                background-color: var(--color-primary);
                color: var(--color-paper);
                font-family: 'Archivo Black';
                font-size: 1.25rem;
                border: 2px solid var(--color-ink);
                box-shadow: 3px 3px 0 0 var(--color-ink);
                transition: all 0.2s ease-in-out;
            }

            & p {
                font-size: 1.875rem;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0;

                & span {
                    color: var(--color-primary);
                }
            }
        }
    }

    & nav {
        padding: 1rem;
        flex: 1;

        & ul {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            list-style: none;
            padding: 0;
            margin: 0;

            & li a {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                border: 2px solid transparent;
                padding: 0.625rem .75rem;
                color: var(--color-ink);
                text-decoration: none;
                transition: all 0.2s ease-in-out;

                &:hover {
                    border-color: var(--color-ink);
                    background-color: var(--color-primary);

                    & p {
                        transform: translate(4px, 0);
                    }
                }

                &.active {
                    box-shadow: 3px 3px 0 0 var(--color-ink);
                    transform: translate(-3px, -3px);
                    background-color: var(--color-ink);
                    color: var(--color-paper);
                }

                & span {
                    font-family: monospace;
                    font-size: 0.75rem;
                    opacity: 0.6;
                }

                & p {
                    font-size: 1.25rem;
                    font-weight: bold;
                    text-transform: uppercase;
                    transition: all 0.2s ease-in-out;
                    margin: 0;
                }
            }
        }
    }

    & footer {
        border-top: 3px solid var(--color-ink);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        & a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: monospace;
            font-size: 0.75rem;
            text-transform: uppercase;
            color: var(--color-ink);
            text-decoration: none;

            &:hover {
                color: var(--color-primary);
            }
        }
    }
}

.main-content {
    & header {
        position: sticky;
        z-index: 30;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 3px solid var(--color-ink);
        background-color: var(--color-paper);
        padding: 0.75rem 2rem;

        & p {
            font-family: monospace;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            margin: 0;

            & span.badge {
                background-color: var(--color-ink);
                color: var(--color-paper);
                padding: 0.125rem 0.5rem;
                margin: 0 0.25rem;
            }
        }
    }

    & section {
        border-bottom: 3px solid var(--color-ink);
    }
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 3px solid var(--color-ink);
    padding: 1rem 1.25rem;
    font-family: 'Archivo Black';
    text-transform: uppercase;
    font-size: 1.25rem;
    box-shadow: 3px 3px 0 0 var(--color-ink);
    transition: all 0.2s ease-in-out;
    text-decoration: none;

    &:hover {
        transform: translate(-3px, -3px);
        box-shadow: 6px 6px 0 0 var(--color-ink);
    }

    &.btn-primary {
        color: var(--color-paper);
        background-color: var(--color-primary);
    }

    &.btn-paper {
        color: var(--color-ink);
        background-color: var(--color-paper);
    }

    & > i {
        font-size: 1.5rem;
    }
}