*, *::before, *::after{
    box-sizing: border-box;
}

body{
    margin: 0;
}

.carousel{
    width: 100%;
    height: 100%;
    position: relative;
    
}

.carousel > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide{
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: 500ms opacity ease-in-out;
        transition-delay: 500ms;
}

/*
.slide > img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    
}*/

.slide[data-active]{
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

.carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(12,58,95,.5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(12,58,95,.4);
    
}

.carousel-button:hover,
.carousel-button:focus {
    color: white;
    background-color: rgba(0,0,0,.8);
}

.carousel-button:focus{
outline: 2px solid black;
}

.carousel-button.prev{
    left: 1rem;
}
.carousel-button.next{
    right: 1rem;
}