:root {
    --shadow-clr: #000;
}

@property --hue {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.preloader {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg, rgb(52, 88, 179),rgb(193, 27, 202));
    /* background-color: #dedede; */
    display: grid;
    place-items: center;
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 150px;
    height: 150px;
    border-radius: 50%;
    /**/
    box-shadow: 0 0 15px #000, 0 0 60px hsl(var(--hue), 100%, 50%), 0 0 120px hsl(var(--hue), 100%, 50%), inset 0 0 30px hsl(var(--hue), 100%, 50%);
    background: linear-gradient(45deg, royalblue, gold);
    background-size: 400px 400px;
    background-position: 0, 0;
    background-repeat: no-repeat;
    animation: hue-clr 15s ease-in-out infinite, bg-float 10s linear infinite, rotate 5s linear infinite, scale ease-in-out 0.6s infinite;
}

@keyframes hue-clr {
    0% {
        --hue: 0;
    }

    50% {
        --hue: 360;
    }

    100% {
        --hue: 0;
    }
}

@keyframes bg-float {
    0% {
        background-position: 0, 0;

    }

    50% {
        background-position: -200px, -200px;

    }

    100% {
        background-position: 0, 0;

    }
}

@keyframes rotate {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }

}

@keyframes scale {
    0% {
        scale: 1;
    }

    50% {
        scale: 1.1;
    }

    100% {
        scale: 1;
    }
}


.main {
    display: none;
}

.main.loaded {
    display: block;
}