: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);
    background-image: url("../assets/bg_items/quiz-question3_bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}



.pills {
    display: flex;
    justify-content: center;
    gap: 8rem;
    margin-top: 2.5rem;
    filter: drop-shadow(4px 4px 0px #1A1100);
    margin-right: 3rem;
}

.pill__img {
    transform: rotate(25deg);
}

.pill__img:hover {
    transform: scale(1.05) rotate(25deg);
    filter: drop-shadow(4px 4px 0px var(--Yellow-Yellow---400));
}



.pill__img.transparent {
    opacity: 0.5;
}

.pill__img.selected {
    opacity: 1 !important;
}

.pill__img.fly {
    position: absolute;
    transform: rotate(90deg) translateY(-52rem);
    /* Adjust translateX value as needed */
    transition: transform 1.5s ease-in-out;
}