/* FONTS IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;700&display=swap');

@font-face {
    font-family: 'louis_george_caferegular';
    src: url('../assets/font/louis_george_cafe-webfont.woff2') format('woff2'),
         url('../assets/font/louis_george_cafe-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* CSS VARIABLES */
:root {
    /* COLORS */
    --color-white: #fff;
    --color-black: rgb(8, 8, 8);
    --color-text-primary: var(--color-white);
    --color-text-secondary: #353535;
    --color-bg-primary: var(--color-black);
    --color-accent: #CA080F;

    /* DIMENSIONS */
    --spacing-xxs: 7.5px;
    --spacing-xs: 15px;
    --spacing-s: 25px;
    --spacing-md: 50px;
    --spacing-l: 75px;
    --spacing-xl: 100px;

    /* FONT SIZE */
    --font-family-primary: 'louis_george_caferegular';
    --font-family-secondary: 'Barlow', sans-serif;

    --font-size-content-desktop: 1.125rem;
    --font-size-content-mobile: 1rem;
    --font-size-summary-desktop: 1.875rem;
    --font-size-summary-mobile: 1.25rem;
    --font-size-link-desktop: 2.25rem;
    --font-size-link-mobile: 1.875rem;
    --font-size-h1-desktop: 3.125rem;
    --font-size-h1-mobile: 2.25rem;
    --font-size-h2-desktop: 3rem;
    --font-size-h2-mobile: 2.25rem;
    --font-size-h4-desktop: 2.25rem;
    --font-size-h4-mobile: 2rem;
}


/* GENERICS */
body {
    background-color: var(--color-bg-primary);
}

.wrapper {
    max-width: 1666px;
    width: calc(100% - var(--spacing-md));
    margin: 0 auto;

    @media screen and (min-width: 2560px) {
        max-width: 2000px;
    }
}

h1, h2, h3, h4 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h1-mobile);

    color: var(--color-text-primary);

    @media screen and (min-width: 1080px) {
        font-size: var(--font-size-h1-desktop);
    }
}

h2 {
    font-size: var(--font-size-h2-mobile);
    font-weight: bold;

    text-transform: uppercase;

    @media screen and (min-width: 1080px) {
        font-size: var(--font-size-h2-desktop);
    }
}

h4 {
    font-size: var(--font-size-h4-mobile);
    text-transform: uppercase;

    @media screen and (min-width: 1080px) {
        font-size: var(--font-size-h4-desktop);
    }
}

p {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-content-mobile);

    color: var(--color-text-primary);

    @media screen and (min-width: 1080px) {
        font-size: var(--font-size-content-desktop);
    }
}

a {
    text-decoration: none;

    font-family: var(--font-family-primary);
    font-size: var(--font-size-link-mobile);

    color: var(--color-text-primary);

    @media screen and (min-width: 1080px) {
        font-size: var(--font-size-link-desktop);
    }
}

a:hover {
    opacity: 0.7;
}

li {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-content-mobile);
    
    color: var(--color-text-primary);

    @media screen and (min-width: 1080px) {
        font-size: var(--font-size-content-desktop);
    }
}