* {
    box-sizing: border-box;
}

:root {
    --bgColor: #f4f3ed;
    --hsGreen: #165238;
    --hsOrange: #e37131;
    --hsYellow: #f6b034;
    --hsBrown: #42210b;
    --hsGrey: #3d3d3d;
    --hoverColor: rgb(230, 84, 0);

    --fontSize: 20px;

    --templateBorderRadius: 70px;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    -webkit-text-size-adjust: none;

    margin: 0;

    background-color: var(--bgColor);
}

/*#region UTILITY */
.no-underline {
    text-decoration: none;
}

.invisible {
    visibility: hidden;
}

/*#region BANNER */
.page-banner {
    display: flex;
    flex-direction: column-reverse;
    padding: 3rem 1rem 5rem 1rem;
}

.banner-heading {
    font-size: 4rem;
    padding-bottom: 1rem;
}

.inline-graphic {
    display: inline;
    vertical-align: middle;
    width: 85px;
}

.banner-image-wrapper {
    max-width: 25rem;
}

.banner-text {
    padding-bottom: 2rem;
    max-width: 60ch;
}

.banner-content {
    padding: 0 1rem 0 1rem;
    max-width: 70ch;
}

.banner-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.banner-buttons > a {
    all: unset;
    text-decoration: none;
}

#banner-image {
    width: clamp(300px, 25vw, 350px);
}

@media (min-width: 768px) {
    .page-banner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5rem;
    }

    .inline-graphic {
        display: none;
    }

    .banner-content {
        display: flex;
        flex-direction: column;
    }

    .banner-image-wrapper {
        display: block;
    }
}
/*#endregion*/

/*#region HEADINGS & TEXT */
h1, h2, h3, h4 {
    /* font-family: 'Oswald'; */
    font-family: 'Poppins';
    /* font-family: 'Raleway', sans-serif; */
    font-weight: bold;
    margin: 0;
}

h1 {
    font-size: 2.5rem;
    padding: 2rem 0 2rem 0;
}

h2 {
    font-size: 2rem;
    padding: 1.5rem 0 1rem 0;
}

h3 {
    font-size: 1.5rem;
    padding: 1rem 0 1rem 0;
}

h4 {
    font-size: 1.25rem;
    padding: 0.75rem 0 0.75rem 0;
}

p {
    margin: 0;
}

input {
    font-size: var(--fontSize);
}

p > a,
p > i > a,
p > em > a {
    text-decoration: none;
    color: var(--hsOrange);
    font-weight: bolder;
}
/*#endregion*/

/*#region LAYOUTS */
.body-content {
    padding: 3rem 1rem 3rem 1rem;
    margin: auto;
    max-width: 90ch;
}

.blog-wrapper {
    display: flex;
    flex-direction: column;
    margin: 3rem 1rem 3rem 1rem;
    gap: 5rem;
}

.blog {
    display: flex;
    flex-direction: column;
    width: auto;
    padding-bottom: 2rem;
    max-width: 55ch;
    border-radius: var(--templateBorderRadius);
    background-color: white;
}

@media (min-width: 768px) {
    .blog-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .blog {
        flex-basis: 45%;
    }
}
/*#endregion*/

/*#region INPUTS */
input[type=text], input[type=email], input[type=number], textarea {
    font-family: inherit;
    font-size: inherit;
    border: 0px solid lightgray;
    padding: 0.5em;
}

input[type=submit] {
    height: auto;
    background-color: var(--hsOrange);
    border: 1px solid var(--hsOrange);
    transition:.3s;
}

input[type=submit]:hover { background-color: var(--hoverColor); border: 1px solid var(--hoverColor); }

input:focus { border: 1px solid var(--hsOrange) }

::placeholder { color: lightgray; }

.button {
    all: unset;
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); */
    cursor: pointer;
}
/*#endregion*/

/* #region Brian table code */
table {
    border-collapse: separate;
    width: 100%;
    border: 1px solid #ddd;
    border-spacing: 0px;
    overflow: scroll;
}

.mobile table {
    font-size: 0.8em;
    display: block;
}

table td {
    padding: 0.5em;
}

table tr:nth-child(odd){
    background-color: #f2f2f2;
}

td {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

tr:first-child td {
    border-top: none;
    font-weight: bold;
}

tr td:first-child {
    border-left: none;
}
/* #endregion */