/* styles.css */
#image-slider {
    position: relative;
    max-width: 700px;
    max-height: 500px;
    height: auto;
    padding-bottom: 50px;
}

#slider-image {
    width: 100%;
    height: auto;
    border: 1px solid black;
   /* animation: fade 0.5s; */
}

#slider-image.fade-out {
    animation: fade-out 0.25s;
}

#slider-image.fade-in {
    animation: fade-in 0.75s;
}

@keyframes fade-out {
    from {opacity: 1;}
    to {opacity: 0.5;}
}

@keyframes fade-in {
    from {opacity: 0.25;}
    to {opacity: 1;}
}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

#image-caption {
    background-color: #EEE;
    padding-bottom: 10px;
    padding: 10px;
}

#left-button, #right-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s;
    background-color: transparent;
    border: none;
    font-size: 2em;
    color: white;
    cursor: pointer;
}

#left-button {
    left: 10px;
}

#right-button {
    right: 10px;
}

#image-slider:hover #left-button, 
#image-slider:hover #right-button {
    opacity: 1;
}

#left-button::before {
    content: "\25C4";
}

#right-button::before {
    content: "\25BA";
}