@import url('./assets/css/fonts.css');

:root {
    font-size: 16px;
    
    --primary-blue-color: #27ACBF;
    --primary-red-color: #E75F5F;
    --primary-dark-color: #363943;
    --primary-grey-color: #7D7D7D;
    --primary-light-color: #F4F4F4;

    /* Text colors */
    --primary-dark-text-color: var(--primary-dark-color);
    --primary-grey-text-color: var(--primary-grey-color);
    --primary-light-text-color: #ECECEC;

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

body {
    font-family: 'Inter', sans-serif !important;
}

/* Rules for tablet */
@media screen and (min-width: 481px){
    :root {
        font-size: 16px;
    }
}

/* Rules for desktop */
@media screen and (min-width: 769px) {
    :root {
        font-size: 18px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    font-weight: 700;
}

/* Components styles */

p.light-grey,
ul.light-grey
{ color: var(--primary-grey-text-color); }
p.grey,
ul.grey
{ color: var(--primary-grey-text-color); }
p.dark-grey,
ul.dark-grey
{ color: var(--primary-dark-grey-text-color); }

h1.white,
h2.white,
h3.white,
p.white {
    color: var(--primary-light-text-color);
}

h1.blue,
h2.blue,
h3.blue,
p.blue {
    color: var(--primary-blue-color);
}

h1.red,
h2.red,
h3.red,
p.red {
    color: var(--primary-red-color);
}

li {
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

/* @media (max-width: 680px) { 
    h2 { font-size: 2.2rem; }
} */