@font-face {
    font-family: 'bad script';
    src: url('../Fonts/ComingSoon-Regular.ttf');
}

@font-face {
    font-family: 'ruqaa';
    src: url('../Fonts/ArefRuqaa-Regular.ttf');
}

:root {
    --font-default: 'bad script', cursive;
    --font-arabic: 'ruqaa', cursive;

    /* Max width */
    --max-width: 1100px;

    /* Spacing */
    --spacing-small: 0.9rem;
    --spacing-default: 1.1rem;
    --spacing-large: 1.8rem;
    --spacing-x-large: 3.8rem;

    /* Font sizes */
    --font-size-default: 1rem;

    /* Colors */
    --color-primary: #1d25a0;
    --color-secondary: #247a1a;
    --color-tertiary: #601f82;
    --color-action: #ff6f61;
}

@media (min-width: 800px) { 
    :root {
        --font-size-default: 1.2rem;
    }
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-default);
    font-size: var(--font-size-default);
    opacity: 0;
    animation: fade-in 400ms 100ms ease-out forwards;
}