@font-face {
    font-family: "sunshine";
    src: url("../fonts/sunshine.woff") format("woff");
}

.box {
    width: 300px;
    height: 300px;
    display: grid;
    place-content: center;
    color: white;
    /*text-shadow: 0 1px 0 #000;*/
    --border-angle: 0turn;
    --main-bg: conic-gradient(from var(--border-angle), #213, #112 5%, #112 60%, #213 95%);
    border: solid 5px transparent;
    border-radius: 50%;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
    background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
    background-position: center center;
    animation: bg-spin 6s linear infinite;
}
@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}
.box:hover {
    animation-play-state: paused;
}
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

.hero-image img{
    width: 350px;
    height: 350px;
    background-position: 50%;
    border: 3px solid #2121210f;
    border-radius: 30% 70% 60% 40%/30% 40% 60% 70%;
    box-shadow: 0 0 50px rgba(40, 87, 252, 0.30);
    animation: hero 8s ease-in-out infinite;
}

@keyframes hero {
    0%{
        border-radius: 30% 70% 60% 40%/30% 40% 60% 70%;
    }
    25%{
        border-radius: 70% 30% 40% 60% / 40% 30% 70% 60% ;
    }
    50%{
        border-radius: 60% 40% 30% 70% / 60% 70% 30% 40% ;
    }
    75%{
        border-radius: 40% 60% 70% 30% / 70% 60% 40% 30% ;
    }
    100%{

        border-radius: 30% 70% 60% 40% / 30% 40% 60% 70% ;
    }
}

[x-cloak] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}
/*loader*/
/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #BEBEBE #0000;
    animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
}
.loader::before {
    border-color: #2857FC #0000;
    animation: inherit;
    animation-duration: .5s;
    animation-direction: reverse;
}
.loader::after {
    margin: 8px;
}
@keyframes l16 {
    100%{transform: rotate(1turn)}
}