.dice-bottom-left {
    position: absolute;
    z-index: 1;
    aspect-ratio: 501 / 395;
    animation: coin-wiggle 4s ease-in-out infinite;
    -webkit-animation: coin-wiggle 4s ease-in-out infinite;
}

.coins-bottom-center {
    position: absolute;
    z-index: 7;
    aspect-ratio: 340 / 605;
    animation: coin-float 4s 1s ease-in-out infinite;
    -webkit-animation: coin-float 4s 1s ease-in-out infinite;
}

.coins-bottom-right {
    position: absolute;
    z-index: 1;
    aspect-ratio: 226 / 412;
}

.dice-center-left {
    position: absolute;
    z-index: 1;
    aspect-ratio: 283 / 329;

}

.dice-center-right {
    position: absolute;
    z-index: 1;
    aspect-ratio: 243 / 516;
    animation: coin-wiggle 4s 1s ease-in-out infinite;
    -webkit-animation: coin-wiggle 4s 1s ease-in-out infinite;
}

.coins-top-left {
    position: absolute;
    z-index: 1;
    aspect-ratio: 247 / 312;
    animation: coin-float 2s 1.5s ease-in-out infinite;
    -webkit-animation: coin-float 2s 1.5s ease-in-out infinite;
}

.coins-top-center {
    position: absolute;
    z-index: 1;
    aspect-ratio: 375 / 241;
    animation: coin-float 2s .5s ease-in-out infinite;
    -webkit-animation: coin-float 2s .5s ease-in-out infinite;
}

.coins-top-right {
    position: absolute;
    z-index: 1;
    aspect-ratio: 247 / 312;
}

@media (orientation: portrait) and (min-width: 0px) {
    .dice-bottom-left {
        width: clamp(220px, 15vw, 300px);
        bottom: 0;
        left: calc(clamp(60px, 25vw, 150px) * -1);
    }

    .coins-bottom-center {
        width: clamp(100px, 30vw, 150px);
        bottom: -3%;
        left: 25%;
    }

    .coins-bottom-right {
        width: clamp(75px, 20vw, 150px);
        right: 30px;
        bottom: 0;
    }

    .dice-center-left {
        width: clamp(100px, 30vw, 150px);
        left: -5%;
        top: 45%;
    }

    .dice-center-right {
        width: clamp(80px, 20vw, 150px);
        right: -5%;
        top: 30%;
    }

    .coins-top-left {
        width: clamp(80px, 20vw, 120px);
        left: -3%;
        top: -3%;
    }

    .coins-top-center {
        width: clamp(100px, 25vw, 200px);
        right: -15%;
        top: -3%;
    }

    .coins-top-right {
        display: none;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    .dice-bottom-left {
        width: clamp(220px, 40vw, 350px);
        bottom: 0;
        left: 0;
    }

    .coins-bottom-center {
        width: clamp(100px, 20vw, 200px);
        bottom: -2%;
        left: 40%;
    }

    .coins-bottom-right {
        width: clamp(75px, 20vw, 150px);
        right: 0;
        bottom: 0;
    }

    .dice-center-left {
        width: clamp(100px, 20vw, 200px);
        left: 5%;
        top: 45%;
    }

    .dice-center-right {
        width: clamp(80px, 20vw, 150px);
        right: -5%;
        top: 30%;
    }

    .coins-top-left {
        width: clamp(80px, 20vw, 180px);
        left: -5%;
        top: -5%;
    }

    .coins-top-center {
        width: clamp(100px, 25vw, 300px);
        right: 0;
        top: -3%;
    }

    .coins-top-right {
        display: block;
        width: clamp(160px, 25vw, 200px);
        right: -10%;
        top: 20%;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .dice-bottom-left {
        width: clamp(100px, 25vw, 500px);
        bottom: -10%;
        left: 5%;
    }

    .coins-bottom-center {
        width: clamp(100px, 15vw, 340px);
        bottom: -5%;
        right: 20%;
    }

    .coins-bottom-right {
        width: clamp(75px, 12vw, 226px);
        right: 0;
        bottom: 0;
    }

    .dice-center-left {
        width: clamp(100px, 15vw, 280px);
        left: -5%;
        bottom: 0;
    }

    .dice-center-right {
        width: clamp(80px, 15vw, 240px);
        right: -7%;
        top: 10%;
    }

    .coins-top-left {
        width: clamp(80px, 17vw, 240px);
        left: -8%;
        top: -20%;
    }

    .coins-top-center {
        width: clamp(100px, 20vw, 375px);
        right: 5%;
        top: -8%;
    }

    .coins-top-right {
        width: clamp(100px, 20vw, 247px);
        right: -14%;
        top: -13%;
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .coins-bottom-center {
        width: clamp(100px, 15vw, 340px);
        bottom: -5%;
        right: 35%;
    }

    .dice-center-right {
        width: clamp(80px, 15vw, 240px);
        right: -5%;
        top: 10%;
    }

    .coins-top-left {
        width: clamp(80px, 17vw, 240px);
        left: -4%;
        top: -7%;
    }

    .coins-top-center {
        width: clamp(100px, 25vw, 375px);
        right: 20%;
        top: -5%;
    }

    .coins-top-right {
        width: clamp(100px, 20vw, 247px);
        right: -6%;
        top: -7%;
    }
}

@keyframes coin-wiggle {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-1px, 1px) rotate(-2deg);
    }
    50% {
        transform: translate(1px, -1px) rotate(1.5deg);
    }
    75% {
        transform: translate(-0.5px, 1.5px) rotate(-1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@-webkit-keyframes coin-wiggle {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
    }
    25% {
        -webkit-transform: translate(-1px, 1px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translate(1px, -1px) rotate(1.5deg);
    }
    75% {
        -webkit-transform: translate(-0.5px, 1.5px) rotate(-1deg);
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes coin-float {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(0.8px, -0.8px) rotate(0.4deg);
    }
    50% {
        transform: translate(-0.8px, 0.8px) rotate(-0.4deg);
    }
    75% {
        transform: translate(0.6px, -0.6px) rotate(0.2deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes coin-float {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translate(0.8px, -0.8px) rotate(0.4deg);
    }
    50% {
        -webkit-transform: translate(-0.8px, 0.8px) rotate(-0.4deg);
    }
    75% {
        -webkit-transform: translate(0.6px, -0.6px) rotate(0.2deg);
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}