@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
:root {




    /* Variables */
    --wrapper-width: 1300px;
    --grid-gap: 1em;
    --thick-borders: .3em;

    --green-color-01: #18b637;
    --blue-color-01: #0072c6;
    --blue-color-02: #005493;

    --primary-01: #005493;
    --primary-02: #0072c6;

    --primary-color-text: #fff;

    --secondary-color-text: #444;


    --accent-color-01: #ffd430;

    --neutral-color-01: #d9d9d8;
    --neutral-color-02: #eeefee;


    font-family: "Open Sans", sans-serif;
    line-height: 1.5em;
    color: #444;
    font-size: ;

}

html,
body,
body>* {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

a {
    color: var(--primary-01);
    text-decoration: none;
}

h1 {
    font-size: 3em;
    margin: 0;
    font-weight: 500;
}

h2 {
    font-size: 2.5em;
    margin: 0;
    font-weight: 500;
}

h3 {
    font-size: 2em;
    margin: 0;
    font-weight: 100;
}

h1::after,
h2::after {
    content: "";
    display: block;
    width: 4rem;
    height: .1em;
    margin: .2em 0 1rem 0;
    background-color: var(--accent-color-01);
}

main h1::after,
main h2::after {
    content: "";
    display: block;
    width: 4rem;
    height: .1em;
    margin: .2em 0 1rem 0;
    background-color: var(--green-color-01);
}


.wrap {
    margin: auto;
    max-width: var(--wrapper-width);
    box-sizing: border-box;
}

.region>div {
    padding: var(--grid-gap);
}

.grid {
    margin: 0 auto;
    display: grid;
    gap: var(--grid-gap) !important;
}


@media (min-width: 600px) {
    h1 {
        font-size: 5em;
        margin: 0;
        font-weight: 500;
    }

    h2 {
        font-size: 3em;
        margin: 0;
    }

    h3 {
        font-size: 1.6em;
        margin: 0;
        font-weight: 100;
    }
}