/* this css will maintain styles common for all documents */

body, html{
    padding: 0;
    margin: 0;
}

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

/* styles under header */

header{
    padding: 1em 3em ; 
    background-color: var(--light-cyan);
}

.page-title{
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: var(--dark-purple);
    text-shadow: 0px 0px 5px rgba(77, 69, 93, 0.75);
}

.btn{
    padding: 0.5em 1em;
    border-radius: 5px;
    font-family: var(--primary-font);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--light-cyan);
    color: var(--dark-purple);
    border : 5px outset var(--dark-purple-blur);
    transition: background-color 250ms ease-in-out;
}
.btn:active{
    border : 5px inset var(--dark-purple-blur);
}

/* Carousel styles */
.carousel{
    width: 90%;
    height: 90%;
    background-color: var(--bg-beige);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 5px;
}

.carousel-inner{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


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

.carousel-item{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.carousel-item.active{
    opacity: 1;
}
