: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;

    --Orange-Ornage---500: #FF5C01;

}

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

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


body {
    background-color: var(--Yellow-Yellow---100);
    /* background-image: url("../assets/bg_items/kwijl-long.svg"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;

}

.kwijl {
    z-index: -1;
    position: absolute;
    scale: 1.05;
    transform: translateY(-79%);
    transition: transform 0.3s ease;
}

.centerd__options {
    width: 62rem;
    height: 38rem;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-left: -31rem;
    margin-top: -11.5rem;
}

.centerd__option {
    width: 10rem;
    height: 10rem;
    background-color: var(--Yellow-Yellow---400);
    border-radius: 50%;
    position: relative;
    top: 0rem;
    left: 0rem;
    text-align: center;
    font-family: "Bungee";
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.centerd__option:hover {
    border: 4px solid var(--Yellow-Yellow---900);
    transform: scale(1.3);
    z-index: +10;
}

.centerd__option.active {
    background-color: yellow;
    background-color: var(--Orange-Ornage---500);
}

.centerd__option--1 {
    width: 8rem;
    height: 8rem;
    top: 3rem;
    left: 32rem;
}

.centerd__option--2 {
    width: 9rem;
    height: 9rem;
    top: 8rem;
    left: 42rem;
}

.centerd__option--3 {
    width: 10rem;
    height: 10rem;
    top: 2rem;
    left: 18rem;
}

.centerd__option--4 {
    width: 7rem;
    height: 7rem;
    top: 1rem;
    left: 24rem;
}

.centerd__option--6 {
    width: 5rem;
    height: 5rem;
    top: -24rem;
    left: 28rem;
}

.centerd__option--7 {
    width: 8rem;
    height: 8rem;
    top: -28rem;
    left: 3rem;
}

.centerd__option--8 {
    width: 7rem;
    height: 7rem;
    top: -44rem;
    left: 53rem;
}

.centerd__option--9 {
    width: 6rem;
    height: 6rem;
    top: -46rem;
    left: 11rem;
}



.random__dot {
    width: 2rem;
    height: 2rem;
    background-color: var(--Yellow-Yellow---400);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.random__dot:hover {
    border: 4px solid var(--Yellow-Yellow---900);
    transform: scale(1.2);
    z-index: +10;
}

.random__dot--1 {
    width: 3rem;
    height: 3rem;
    top: 8.4rem;
    left: 8rem;
}

.random__dot--2 {
    width: 5rem;
    height: 5rem;
    top: 7rem;
    left: 22rem;
}

.random__dot--3 {
    width: 2rem;
    height: 2rem;
    top: 7.8rem;
    left: 30rem;
}

.random__dot--4 {
    width: 2.5rem;
    height: 2.5rem;
    top: 7.4rem;
    left: 27.2rem;
}

.random__dot--5 {
    width: 2.25rem;
    height: 2.25rem;
    top: 5.3rem;
    left: 29.2rem;
}

.random__dot--6 {
    width: 9rem;
    height: 9rem;
    top: 20rem;
    left: 32rem;
}

.random__dot--7 {
    width: 4rem;
    height: 4rem;
    top: 20rem;
    left: 28.2rem;
}

.random__dot--8 {
    width: 1.5rem;
    height: 1.5rem;
    top: 26.4rem;
    left: 27.2rem;
}

.random__dot--9 {
    width: 2.5rem;
    height: 2.5rem;
    top: 24.4rem;
    left: 28.4rem;
}

.random__dot--10 {
    width: 3.5rem;
    height: 3.5rem;
    top: 28.4rem;
    left: 31.5rem;
}

.random__dot--11 {
    width: 8rem;
    height: 8rem;
    top: 25rem;
    left: 40.3rem;
}

.random__dot--12 {
    width: 2rem;
    height: 2rem;
    top: 23.2rem;
    left: 41.2rem;
}

.random__dot--13 {
    width: 5rem;
    height: 5rem;
    top: 15rem;
    left: 37.2rem;
}

.random__dot--14 {
    width: 3.5rem;
    height: 3.5rem;
    top: 11.2rem;
    left: 33.3rem;
}

.random__dot--15 {
    width: 4.5rem;
    height: 4.5rem;
    top: 10.2rem;
    left: 37.2rem;
}

.random__dot--16 {
    width: 2rem;
    height: 2rem;
    top: 14rem;
    left: 36rem;
}

.random__dot--17 {
    width: 2rem;
    height: 2rem;
    top: 17.8rem;
    left: 35.3rem;
}

.random__dot--18 {
    width: 5.5rem;
    height: 5.5rem;
    top: 13rem;
    left: 15rem;
}

.random__dot--19 {
    width: 2.5rem;
    height: 2.5rem;
    top: 10.4rem;
    left: 17.1rem;
}

.random__dot--20 {
    width: 1.5rem;
    height: 1.5rem;
    top: 15rem;
    left: 12.1rem;
}

.random__dot--21 {
    width: 1.5rem;
    height: 1.5rem;
    top: 13rem;
    left: 22.5rem;
}

.random__dot--22 {
    width: 6.5rem;
    height: 6.5rem;
    top: 9rem;
    left: 44rem;
}

.random__dot--23 {
    width: 3rem;
    height: 3rem;
    top: 13.1rem;
    left: 41.3rem;
}

.random__dot--24 {
    width: 4.5rem;
    height: 4.5rem;
    top: 9rem;
    left: 50.6rem;
}

.random__dot--25 {
    width: 2.5rem;
    height: 2.5rem;
    top: 6rem;
    left: 50rem;
}