/* import Poppins from google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

[data-theme-light="light"] {
    --pageColor: #ffffff;
    --borderColor: #000000;
    transition: all .5s;
}

[data-theme-dark="dark"] {
    --pageColor: #000000;
    --borderColor: #ffffff;
    transition: all .5s;
}

body{
    background-color: var(--pageColor);
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
}
.container, .loading-text{
    place-items: center;
    display: flex;
    place-content: center;
    margin: 0;
    padding: 0;
}
.container{
    margin-top: 30vh;
}

.loading-text {
    margin-top: 50px;
    color: var(--borderColor);
} 

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(50deg, #afafaf, #3b3b3b);
    border-radius: 100px;
    border: 0;
    display: grid;
    place-content: center;
    margin-bottom: 20px;
}

.box::before{
    content: "";
    width: 190px;
    height: 190px;
    border-radius: 100px;
    position: relative;
    background-color: var(--pageColor);
} 

.rotate{
    animation: rotate 3s ease infinite forwards;
}


@keyframes rotate {
    0%{
        transform: rotate(0deg);
        background: linear-gradient(25deg, var(--borderColor), var(--pageColor));
    }
    50%{
        transform: rotate(360deg);
        background: linear-gradient(50deg, var(--borderColor), var(--pageColor));
    }
    100%{
        transform: rotate(720deg);
        background: linear-gradient(25deg, var(--borderColor), var(--pageColor));
    }
}