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

:root {
            --i: 1;
        }

        .circle {
            position: absolute;
            background: transparent;
            width: calc(var(--i) * 2.5vmin);
            aspect-ratio: 1;
            border-radius: 50%;
            border: 3px solid rgb(0, 255, 13);
            transform-style: preserve-3d;
            transform: rotateX(70deg) translateZ(50px);
            animation: animate 3s ease-in-out calc(var(--i) * 0.08s) infinite;
            box-shadow: 0 0 20px rgba(0, 255, 13, 0.6), inset 0 0 20px rgba(0, 255, 13, 0.3);
            transition: transform 0.3s ease;
        }

        .circle:hover {
            transform: rotateX(70deg) translateZ(50px) scale(1.1);
        }

        @keyframes animate {

            0%,
            100% {
                transform: rotateX(70deg) translateZ(50px) translateY(0);
                filter: hue-rotate(0);
            }

            50% {
                transform: rotateX(70deg) translateZ(50px) translateY(-50vmin);
                filter: hue-rotate(360deg);
            }
        }