@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

.fredoka-500 { font-family: 'Fredoka', sans-serif; font-weight: 500; }
.fredoka-600 { font-family: 'Fredoka', sans-serif; font-weight: 600; }
.fredoka-700 { font-family: 'Fredoka', sans-serif; font-weight: 700; }

html, body {
    width: 100%;
    height: 100%;
}

* {

    box-sizing: border-box;
}

body {
    background-color: #16192d;
    /* background-image: url('assets/images/clix-footer.jpg'); */
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-size: 1rem;
}

::-webkit-scrollbar {
    background-color: transparent;
    width: 12px;
    margin: 0 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #fff1;
    border-radius: 8px;
    transition: 1s ease-in;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #fff3;
}

.clixxapp-logo {
    font-size: 32px;
    letter-spacing: 4pt;
}

.background-gradient {
	/* width: 100vw;
	height: 100vh; */
	background: linear-gradient(334deg, #007bff99, #007bff11, #0001);
	background-size: 180% 180%;
	animation: gradient-animation 8s ease infinite;
}

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

a {
    @apply underline;
}