styles.css

/* Colour palette - feel free to mix it up! */
/* This is how we could define our colour palette with Sass but to keep things simple, let's use pure CSS */
/* 
$white: #ffffff;
$grey: #e2dcde;
$red: #ee0000;
$black: #3a3335; 

$accent-color: $red;
$font-color: $black;
*/

/* Custom colour palette */

:root {
    --primary-text-color: #222;
    --secondary-text-color: #185D4A;

    --link-color: #3b4bbf;

    --primary-bg-color: #f4f5f6;
    /* --secondary-bg-color: #7f4707; */

    --accent-color: #a900c0;
}

body {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    font-family: 'Gabarito', Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
}

section {
    padding: 1rem 1rem 0;
    max-width: 70em;
    margin: 0 auto;
}

h1, h2 {
    font-size: 2rem;
    color: var(--secondary-text-color);
    @media screen and (min-width: 30rem) {
        font-size: 3rem;
    }
}

p {
    font-size: 1rem;
    line-height: 130%;
    @media screen and (min-width: 30rem) {
        max-width: 40rem;
    }
}

a {
    display: inline-block;
    color: var(--link-color);
    /* background-color:  var(--accent-color); */
    /* font-weight: 600; */
    padding: 0 0.25rem;
    text-align: center;
   
}

a:hover, a:focus {
    font-weight: 600;
}

a:active {
    background-color: var(--link-color);
    color: var(--primary-bg-color);
}