:root {
    --Yellow-Yellow---100: #E5DECF;
    --Yellow-Yellow---200: #E5CA95;
    --Yellow-Yellow---300: #F2C161;
    --Yellow-Yellow---400: #F2B030;
    --Yellow-Yellow---500: #FFA800;
    --Yellow-Yellow---600: #E59700;
    --Yellow-Yellow---700: #B27600;
    --Yellow-Yellow---800: #664300;
    --Yellow-Yellow---900: #1A1100;

}

html {
    box-sizing: border-box;
    font-family: "Forma DJR Micro";
}

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

body {
    background-color: var(--Yellow-Yellow---100);
}

.container {
    width: 80rem;
    margin: 0 auto;
    height: 100vh;
}

.slider__container {
    max-width: 1000px;
    height: 28rem;
    position: relative;
    margin: auto;
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide {
    display: none;
}

.slide__text {
    color: var(--Yellow-Yellow---900);
    font-family: "Bungee";
    font-size: 1.75rem;
    padding: 8px 1rem;
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    text-align: center;
}

.slider__dots {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    margin-bottom: 1.75rem;
}

.dot {
    cursor: pointer;
    height: 2.5rem;
    width: 2.5rem;
    margin: 0 3.5rem;
    background-color: var(--Yellow-Yellow---200);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: var(--Yellow-Yellow---400, #F2B030);
    filter: drop-shadow(0px 0px 8px rgba(35, 31, 32, 0.50));
}

.dot:hover {
    background-color: var(--Yellow-Yellow---600);
}

.dot__bar {
    width: 40rem;
    height: 1rem;
    background-color: var(--Yellow-Yellow---200);
    border-radius: 1rem;
    position: absolute;
    transform: translate(0%, 70%);
    z-index: -1;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}