/*
Styling the Carousel

1) Set a max-width of 600px & position relative on the div 'carousel'
2) Hide all 'carousel-item' divs
3) Make sure all images inside 'carousel-item' have a max-width that matches the main 
'carousel' div
4) All images within 'carousel-item' must be responsive, so think about setting a 
max-width on the images and how you'd make the image 100% width of 'carousel-item' 
5) We want the first 'carousel-item' to be visible, think about the class we added to the first item. Make sure that class is always shown
6) The 'carousel-actions' needs to be on top of the slider, so think about positioning 
and how you can use relative/absolute positioning to put the 'carousel-actions' on top of 
the slider
7) Make some beautiful buttons!
8) Space those buttons from the left & right - we want to make sure they're not touching 
the edges of the slides, but adequately spaced



    Hiding non-active slides
    
    1) In our 'styles.css', add a new class 'carousel-item-hidden' that is set to display none
    2) Create a new function called 'hideAllSlides'
    3) Inside 'hideAllSlides' use a 'for of loop' to iterate through the slides (each iteration will give you direct access to 'carousel-item')
    4) When inside the 'for of loop', remove the class 'carousel-item-visible' and add the class 'carousel-item-hidden' - all our slides will now be hidden, and inside 'moveToNextSlide' at the end, we add back the slide we want visible!
    5) Call 'hideAllSlides' right away within the function 'moveToNextSlide' - make sure it's before any other code!
*/

.carousel .carousel-item,
.carousel .carousel-item-hidden {
    display: none;
    width: 100%;
    height: 60vh;
    background-color: lime;
    overflow: hidden;
}

.carousel .carousel-item-visible {
    position: relative;
    width: 100%;
    height: 60vh;
    margin: auto;
    display: block;
    animation: fadeVisibility 0.5s;
    overflow: hidden;
}


.carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.carousel .carousel-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel .carousel-actions button {
    border-radius: 50px;
    background-color: white;
    border: 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.carousel .carousel-actions button#carousel-button-prev {
    margin-left: 20px;
}

.carousel .carousel-actions button#carousel-button-next {
    margin-right: 20px;   
}



@keyframes fadeVisibility {
0% {
  opacity: 0;
}

100% {
    opacity: 1;
}
/*
    Styling the Carousel

    1) Set a max-width of 600px & position relative on the div 'carousel'
    2) Hide all 'carousel-item' divs
    3) Make sure all images inside 'carousel-item' have a max-width that matches the main 
    'carousel' div
    4) All images within 'carousel-item' must be responsive, so think about setting a 
    max-width on the images and how you'd make the image 100% width of 'carousel-item' 
    5) We want the first 'carousel-item' to be visible, think about the class we added 
    to the first item. Make sure that class is always shown
    6) The 'carousel-actions' needs to be on top of the slider, so think about positioning 
    and how you can use relative/absolute positioning to put the 'carousel-actions' on top of 
    the slider
    7) Make some beautiful buttons!
    8) Space those buttons from the left & right - we want to make sure they're not touching 
    the edges of the slides, but adequately spaced
*/