body{

    font-family:'Inter',sans-serif;

    background:var(--bg-gradient);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;


    transition:

    background .55s ease,

    color .55s ease,

    opacity .4s ease,

    transform .4s ease;

}

@keyframes pageAppear{

    from{

        opacity:0;

        transform:

        translateY(20px)

        scale(.98);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

/* change page annimation */
body.fade-out{

    opacity:0;

    transform:

    translateY(15px)

    scale(.98);

}

body.language-switching main,
body.language-switching footer{

    animation:

    languageSwap .38s ease;

}

body.theme-switching::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:9998;

    pointer-events:none;

    background:

    rgba(255,255,255,.055);

    animation:

    themeWash .5s ease-out forwards;

}

@keyframes themeWash{

    0%{

        opacity:0;

    }

    38%{

        opacity:.36;

    }

    100%{

        opacity:0;

    }

}

@keyframes languageSwap{

    0%{

        opacity:.45;

        transform:

        translateY(8px);

        filter:

        blur(3px);

    }

    100%{

        opacity:1;

        transform:

        translateY(0);

        filter:

        blur(0);

    }

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}


img{

    display:block;

    max-width:100%;

}


.bg-circle{

    position:fixed;

    border-radius:50%;

    filter:blur(180px);

    z-index:0;

    pointer-events:none;

    animation:

    floatCircle 8s ease-in-out infinite;

}

@keyframes floatCircle{

    0%,100%{

        transform:

        translateY(0);

    }

    50%{

        transform:

        translateY(-25px);

    }

}



.circle1{

    width:350px;

    height:350px;

    background:#5b5dfc;

    top:-100px;

    left:-100px;

    opacity:.15;

}


.circle2{

    width:300px;

    height:300px;

    background:#2563eb;

    bottom:-100px;

    right:-100px;

    opacity:.1;

}

.circle3{

    width:350px;

    height:350px;

    background:

    #8b5cf6;

    top:40%;

    left:50%;

    opacity:.08;

}


body.light-theme::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(

    circle,

    rgba(91,93,252,.03),

    transparent 60%

    );

    pointer-events:none;

    z-index:-1;

}

body.light-theme .circle1{

    opacity:.08;
}


body.light-theme .circle2{

    opacity:.05;
}