/* ---------- Farben ---------- */
:root {
    --primary: #1D2026;
    --secondary: #2e3137;
    --accent: darkslategrey;
}

/* ---------- Basic Layout ---------- */
body {
    background-color: var(--primary);
    color: aliceblue;
    font-family: Montserrat, sans-serif;
    margin: 0;
    font-size: 18px;
    display: grid;
    gap: 0em;
    grid-template-columns: 10% 1fr 10%;
    grid-template-rows: 1fr 1fr 1fr 1fr 80px;
    height: 100vh;
}

header {
    grid-row: 1;
    grid-column: 2/3;
}

main {
    grid-row: 4;
    grid-column: 2/3;
    padding: 8px 100px 8px 100px;
    background-color: var(--secondary);
}

footer {
    padding: 15px;
    background-color: var(--accent);
    grid-row: 5/6;
    grid-column: 1/4;
}

/* ----- Classes ----- */
.navigationbar {
    grid-row: 2;
    grid-column: 1/4;
    background-color: var(--accent);
    padding: 5px;
    display: flex;
    align-items: center;
}

.navigationbar a {
    color: aliceblue;
    padding: 10px;
    margin-left: 5px;
    text-decoration: none;
    transition: 400ms;
    text-align: center;
    flex-grow: 1;
}

.navigationbar a:hover {
    background: darkgray;
}

.navigationbar:nth-of-type(2) {
    grid-row: 3;
    grid-column: 2/3;
    background-color: var(--secondary);
    border-bottom: 4px solid var(--primary);
}

code {
    padding: .25rem .75rem;
    border-radius: .35rem;
    background-color: rgba(40, 40, 40, 0.8);
}

.code-example {
    margin: 4px;
    padding: 8px;
    border-radius: 0.4em;
    background-color: rgba(40, 40, 40, 0.8);
    max-width: 550px;
}

.code-example code {
    padding: 0;
    background-color: rgba(40, 40, 40, 0.8);
}

.visual-example {
    background-color: gray;
    border: 2px solid;
    margin: 4px;
    max-width: 400px;
}

.visual-example > p {
    background-color: darkolivegreen;
    padding: 20px;
    border: 2px solid aliceblue;
    text-align: center;
}

.explanation {
    background-color: rgba(28, 33, 38, 0.8);
    padding: 8px;
    margin: 4px;
    border-left: 6px solid aliceblue;
    border-radius: 0.4em;
}

/* ----- Responsivnes der Seite ----- */
@media (max-width: 600px) {
    main {
        grid-column: 1/5;
        padding: 8px;
    }

    .navigationbar {
        flex-direction: column;
    }

    .navigationbar:nth-of-type(2) {
        grid-column: 1/5;
    }
}