@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    #firstCanvas {
        transform: translateX(-50%);
        width: 375px;
        padding-top: 8px;
    }

    #game-container-instant {
        overflow: hidden;
        height: 600px;
        padding-top: 2rem;
    }

    .wheel-img {
        position: absolute;
        transform: translate(-50%, -5.5%);
        z-index: 1;
    }


    @media (min-width: 768px) and (max-width: 1024px) {
        #game-container-instant {
            height: 700px;
            padding-top: 4rem;
        }

        .wheel-img {
            transform: translate(-51%, -3%) scale(1.2);
        }

        #firstCanvas {
            transform: translateX(-51%) scale(1.25);
        }
    }

    @media (min-width: 1024px) {
        #game-container-instant {
            min-height: 750px;
            padding-top: 6rem;
        }
        .wheel-img {
            transform: translate(6%, -3%) scale(1.15);
        }

        #firstCanvas {
            transform: translate(26%, -2.5%) scale(1.2);
            padding-top: 22px;
        }
    }




    @media (min-width: 1200px) and (min-height: 1900px) and (orientation: portrait) {
        .wheel-img {
            transform: translate(18%, -3%) scale(1.65);
        }

        #firstCanvas {
            transform: translateX(48%) scale(1.75);
            padding-top: 10px;
        }
    }
}