.slideshow-container {
    align-items: flex-start;
    background-color: lightgray;
    border: solid 4px lightgray;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    height: auto;
    /* max-width: 800px; /* set by js as maxWidth */
}

.main-slide-container {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: center;
    opacity: 1; /* Default opacity */
    padding-top: 10px;
    position: relative;
    transition: opacity 375ms ease;
    width: 100%;
}

.main-slide {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.nav-button {
    border-radius: 50%;
    color: rgb(253, 255, 227);
    cursor: pointer;
    font-size: 24px;
    text-align: center;
    transition: background-color 0.438s;
    user-select: none;
    vertical-align: middle;
    z-index: 1;
}

.nav-button:hover {
    background-color: rgba(192, 192, 192, 0.5);
}

.nav-left {
    left: 7px; /* Place it on top of the main slide area */
    position: absolute;
    top: 50%; /* Vertically centered */
    transform: translateY(-50%);
}

.nav-right {
    position: absolute;
    right: 7px; /* Place it on top of the main slide area */
    top: 50%;
    transform: translateY(-50%);
}

.thumbnail-container {
    align-items: center;
    display: flex;
    justify-content: flex-start; /* Align thumbnails to the left */
    overflow-x: auto; /* Horizontal scrolling if needed */
    padding: 10px 0;
    white-space: nowrap;
    width: 100%;
}

.thumbnail {
    border: 1px solid lightgray;
    cursor: pointer;
    height: 60px; /* static height */
    object-fit: contain;
}

.thumbnail:hover {
    border: 1px solid black;
}