html {
    scroll-behavior: smooth;
}

code.normal span {
    color: var(--color-text);
}

.sidebar {
    position: fixed;
    display: none;

    flex-direction: column;

    top: 48px;
    left: 0px;

    width: 50vw;
    min-width: 200px;
    max-width: 500px;
    height: max-content;
    min-height: 400px;
    max-height: 90vh;

    overflow: auto;
    scrollbar-width: thin;

    background-color: var(--color-panel);

    border: 5px solid var(--color-bg);
    border-left: transparent;

    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    box-shadow: 0px 0px 5px 5px #222222;
}

.sidebar ul {
    padding-left: 10px;
}

.sidebar ul li {
    list-style: none;
    cursor:default;
}

.sidebar ul li.main {
    font-size: 1.2em;
    font-weight: bold;
}

.sidebar ul li.sub {
    margin-left: 10px;
    font-variant: small-caps;
}

.sidebar ul li.sub a {
    text-decoration: none;
    cursor: pointer;

    font-size: 0.9em;
}

.sidebar ul li.sub a:hover {
    color: var(--color-ui-hover);
}

.code-grid {
    display: flex;
    flex-flow: row wrap;

    gap: 5px;

    justify-items: center;
    justify-content: center;
    align-items: center;

    margin-top: 15px;
}

.code-grid code {
    aspect-ratio: 1/1;

    margin: 0px;

    height: calc(18em + 6px);

    /*font-family: monospace;
    font-size: var(--code-size);*/

    flex-grow: 0;
    flex-shrink: 0;

    overflow: hidden;
    scrollbar-width: none;

    user-select: none;
    pointer-events: all;

    transition: all 0.1s;
}

.code-grid code span {
    pointer-events: all;
}

.code-grid code:hover {
    filter: brightness(1.1);
    transform: scale(1.01);
}

.code-grid code:active {
    animation: flash 0.25s ease-in-out;
}

@keyframes flash {
    0% {
        border-color: #a6d627;
    filter: brightness(1.1);
        
    }
    100% {border-color: var(--color-code)}
}

/* Phone friendly */

@media screen and (max-height: 800px) {
    .sidebar {
        width: 40vw;
        min-width: 200px;
        max-width: 500px;
        max-height: 80vh;
    }
}

@media screen and (max-width: 600px) {
    .code-grid {
        justify-content: center;
    }
}