:root {
    --blue: #393F78; /* primary */
    --gold: #B0996B; /* secondary */
    --gray: #DDE6ED; /* background */
}

* {
    padding: 0;
    margin: 0;
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: normal;
}

section {
    padding: 50px 20%;
    position: relative;
}

section.bg-gray {
    background-color: var(--gray);
}

section.bg-light-gray {
    background-color: #dde6edaf;
}

section.bg-lighter-gray {
    background-color: #dde6ed60;
}

section h1 {
    color: var(--blue);
    padding: 10px 0;
}

section p {
    padding: 10px 0;
}

footer {
    background-color: gray;
    display: flex;
    justify-content: space-evenly;
}

footer a {
    color: white;
    text-decoration: none;
}

@media screen and (max-width: 1100px) {
    section {
        padding: 50px 25%;
    }
}

@media screen and (max-width: 900px) {
    section {
        padding: 50px 15%;
    }
}

@media screen and (max-width: 500px) {
    section {
        padding: 50px 8%;
    }
}