/* FONTS IMPORTS */
@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;

}

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

/* 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-xs: 15px;
    --spacing-s: 25px;
    --spacing-md: 50px;

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

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


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

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

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

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

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

    text-transform: uppercase;
}

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

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

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

a {
    text-decoration: none;

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

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

a:hover {
    opacity: 0.7;
}

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