@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/Roboto-Regular.ttf) format("truetype");
}

body {
    max-height: 100vh;
    font-family: "Roboto";
}

/* animation classes --start */
.gradient-bg {
    /* Credits: https://codepen.io/P1N2O/pen/pyBNzX */
    --transparency: 0.1;

    background: linear-gradient(-45deg,
        rgba(204, 51, 255, var(--transparency)), rgba(255, 0, 102, var(--transparency)),
        rgba(153, 255, 102, var(--transparency)), rgba(51, 153, 255, var(--transparency)));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

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

.rotate-infinite {
    animation: spin 1s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* animation classes --end */