#nav {
    position: absolute;
    left: var(--card-padding);
    bottom: 0;
    height: var(--card-padding);
    width: var(--nav-width);
}

#nav-bar {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border-top: 3px black solid;
    display: flex;
}

.nav-button {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-button > img {
    height: 70%;
}

#nav-title {
    margin-top: calc(-1 * var(--card-padding));
    width: 100%;
    text-align: center;
    font-size: var(--font-size-subtitle);
    transition: opacity 0.2s ease;
    pointer-events: none;
    min-height: var(--card-padding); /* <- reserve space */
    min-width: 60px;  /* optional, prevents size jumps */
}


/* Phone */
@media (max-aspect-ratio: 4/5) {
    #nav-title {
        position: absolute;
        pointer-events: none;
        top: -1000vh;
        left: -1000vh;
    }
}