/*
 *  Copyright (C) 2025 Tayler Parsons
 *  Copyright (C) 2025 Ryan Bester
 */

* {
    font-family: Arial, Helvetica, sans-serif;
}

code {
    font-family: monospace;
}

.menu-button {
    display: none;
    background: #333;
    color: white;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: calc(100% - 2rem);
}

.layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
        "left content right"
        ". footer .";
    gap: 20px;
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: max-content;
    background-color: #f0f0f0;
}

.content {
    grid-area: content;
    background-color: #fff;
    padding: 1rem;
}

.footer {
    grid-area: footer;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "content"
            "right"
            "footer";
    }

    .left, .right {
        position: static;
    }

    .left {
        display: none;
    }

    #menu-toggle:checked ~ .layout .left {
        display: block;
    }

    .menu-button {
        display: inline-block;
    }
}