#track-1 {
    background-color: rgba(79, 107, 58, 0.8);
}

#track-2 {
    background-color: rgba(40, 127, 158, 0.8);
}

#track-3 {
    background-color: rgba(122, 31, 43, 0.8);
}

#track-4 {
    background-color: rgba(212, 167, 44, 0.8);
}

#track-5 {
    background-color: rgba(75, 40, 109, 0.8);
}

.roman-numerals {
    font-family: "Bodoni Moda", "Cormorant Garamond", "Cinzel", serif;
    font-weight: 700;

    /* 1. Add a tiny stroke matching the text color */
    -webkit-text-stroke: 0.8px currentColor;

    /* 2. Fix inner corners so stroke doesn't look clunky */
    paint-order: stroke fill;

    /* letter-spacing: 0.15em;  Gives XI, III, IV a spacious, premium look */
    text-transform: uppercase;
    align-items: center;

    color: thistle;
}

.kanji {
    font-family: 'Shippori Mincho B1', 'Dela Gothic One', 'Yuji Syuku', serif;
    font-weight: 200;
    color: pink;
}

.bottom-row {
    
    display: flex;
    flex-direction: row; /* changes gallery to lay vertical */
    justify-content: flex-start;
    gap: 20px;
    align-items: center;

    width: 90vw;
    max-width: 1200px;
    min-height: 460px;

    height: max-content;
    padding: 2vw;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;

    /*max-height: 30vh;*/
    /*padding-top: 50px;*/
}

.ep-track {
    width: 300px !important;
    height: 400px !important;
    min-width: 300px !important;
    min-height: 300px !important;

    /* Flexbox lock */
    flex: 0 0 300px;
    flex-shrink: 0;

    /* Centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    /* Emoji alignment */
    font-size: 100px;
    line-height: 1;
    overflow: hidden;
    user-select: none;

    /* Styles */
    border: 1px ridge indianred;
    box-shadow: 0 5px 15px 5px indianred;
    border-radius: 6px;

    /* Spacing */
    margin: 0;
    padding: 1vh 0;
    gap: 1vh;

    /*aspect-ratio: 3 / 4;*/
    /*max-height: 50vh;*/
    /*max-width: 50vw;*/
    /*object-fit: cover;
    object-position: center;*/
    /*max-width: 100%;
    max-height: auto;*/

}

.ep-track > p {
    margin: 0;
    padding: 0;
    text-align: center;
    /*border: 1px solid black;*/
}

@media only screen and (max-width: 920px) {
    .bottom-row {
        max-width: 90vw;
        scrollbar-width: auto;
        margin: 0 auto;
        
        /*padding-top: 100px;*/
        /*min-height: 0;*/
    }

    .ep-track {
        flex: 0 0 250px;
        /*height: 60vw;
        width: 60vw;
        flex-shrink: 0;*/
        width: 300px;
        height: 400px;
        max-height: 100%;
    }
    
    .overlay-content {
        grid-template-rows: max-content minmax(0, 1fr);
    }

    .bottom-row::-webkit-scrollbar {
        height: 8px;
    }

    .bottom-row::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
    }

    .bottom-row::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.2);
    }
}