@media only screen and (max-width: 800px) {
    #bottom_bar {
        position: relative !important;
        bottom: 0px;
    }
}

#bottom_bar {
    position: sticky;
    margin-top: 1.1em;
    bottom: -57px;

    width: calc(100% - 10px);
    min-height: 25px;
    padding: 5px;

    background-color: var(--head-4);
    color: var(--back);

    transition: 1s;

    display: grid;
    grid-template-rows: 1em 1fr;
    grid-gap: 10px;
}
#bottom_bar:hover {
    bottom: 0px;
}

#bottom_bar .images {
    display: grid;
    grid-gap: 5px;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    grid-auto-flow: dense;
    grid-template-columns: repeat( auto-fill, minmax(80px, 1fr) );
    grid-template-rows: auto;
}

#bottom_bar .images img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;

    width: 100%;
    height: auto;
}