@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Rubik:wght@500&display=swap');
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

*::-webkit-scrollbar{
    display: none;
}

@font-face {
    font-family: 'switzer';
    src: url(../font/switzer/Switzer-Variable.ttf);
}

@font-face {
    font-family: 'santoshi';
    src: url(../font/santoshi/Satoshi-Variable.ttf);
}

:root{
    --white1: #FFF4F4;
    --white2: #F5F5F5;
    --white3: #a2a4a6;
    --blue: #1f80ff;
    --blue2:#212e44;
    --pink1:#eb287b;
    --pink2:#ae0288;
    --black1:#1d2b36;
    --black2:#131623;
    --black3: #323335;
    --font1: 'Roboto', sans-serif;
    --font2: 'Rubik', sans-serif;
    --custom-font1: 'santoshi';
    --custom-font2: 'switzer';
}

.colorAnimation{
    background: linear-gradient(-100deg, var(--blue), var(--pink1), var(--pink2));
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.main{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--white2);
}