@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Roboto Slab';
    src: url(../fonts/roboto-slab.ttf);
}

@font-face {
    font-family: 'Material Icons';
    src: url(../fonts/materialIcons-regular.ttf);
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/inter.ttf);
}


.loading-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #b7b7b7 94%, #0000) top/9px 9px no-repeat,
    conic-gradient(#0000 30%, #b7b7b7);
    -webkit-mask: radial-gradient(farthest-side, rgba(64, 64, 64, 0) calc(100% - 9px), #000 0);
    animation: spinner-animation 1s infinite linear, fadeIn 0.4s ease-out forwards;
}

@keyframes spinner-animation {
    100% {
        transform: rotate(1turn);
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}