/* VARIABLES */
:root{
    --primary-text-color: #eeefed;
    --secondary-text-color: #212127;
    --purple-text-color: #7879b9;
    --light-gray-text-color: rgba(238, 239, 237, 0.527);

    --orange-color: #f37059;

    --font-size-h1: 5vw; 
    --font-size-h1-mobile: 8vw; 

    --font-size-h2: 3vw;
    --font-size-h2-mobile: 5vw;

    --font-size-h3: 2.5vw;
    --font-size-h3-mobile: 6vw;

    --font-size-h4: 1.8vw; 
    --font-size-h4-mobile: 6vw;

    --font-size-h5: 1.2vw; 
    --font-size-h5-mobile: 3vw;

    --font-size-p: 1vw;
    --font-size-p-mobile: 3vw;

    --font-size-span: .78vw;
    --font-size-span-mobile: 2.3vw;

    --font-size-span-small: 9px;
    --font-size-span-small-mobile: 2vw;

    --font-size-i:3vw;
    --font-size-i-mobile: 10vw;

    --small-text-size: 1vw;
    --small-text-size-mobile: 2vw;

    --secondary-bg-color: #eeefed;
    --purple-bg-color: #3b3b4c;
    --dark-bg-color: #222228;
    --black-bg-color: #000;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    color: var(--primary-text-color);
}

h1{
    font-size: var(--font-size-h1);
}
h2{
    font-size: var(--font-size-h2);
}

h3{
    font-size: var(--font-size-h3);
}
h4{
    font-size: var(--font-size-h4);
}

h5{
    font-size: var(--font-size-h5);
}

p{
    font-size: var(--font-size-p);
}

i{
    font-size: var(--font-size-i);
}

h1, h2, h3, h4, h5, p{
    font-weight: 300;
}

a{
    text-decoration: none;
}
li{
    list-style: none;
}

@media (max-width: 850px) {
    h1{
        font-size: var(--font-size-h1-mobile);
    }

    h2{
        font-size: var(--font-size-h2-mobile);
    }

    h3{
        font-size: var(--font-size-h3-mobile);
    }
    h4{
        font-size: var(--font-size-h4-mobile);
    }

    h5{
        font-size: var(--font-size-h5-mobile);
    }

    p{
        font-size: var(--font-size-p-mobile);
    }

    i{
        font-size: var(--font-size-i-mobile);
    }
}