:root {
    /*#region Colors*/
    --spruce-green: #009A51;
    --spruce-white-green: #F4FFF5;
    --spruce-light-green: #D5E6BE;
    --spruce-blue-green: #004D43;
    --spruce-dark-green: #00422F;
    --spruce-black-green: #062316;
    --spruce-soft-black: #222222;
    --spruce-yellow: #FFC200;
    --spruce-dark-yellow: #FFA700;
    --spruce-orange: #FF7F30;
    --spruce-dark-orange: #CC4E00;
    --spruce-gray: #6E6E6E;

    --spruce-button-lg-left: #008547;
    --spruce-button-lg-right: #0A854B;
    --spruce-button-lg-hover: #00714B;
    --spruce-button-dark-lg-left: #00422F;
    --spruce-button-dark-lg-right: #006E3A;

    --spruce-footer-lg-top: #00422F;
    --spruce-footer-lg-bottom: #062316;
    /*#endregion*/

    --h1-font-size: 88px;
    --h2-font-size: 80px;
    --h3-font-size: 72px;
    --h4-font-size: 64px;
    --h5-font-size: 28px;

    --p1-font-size: 24px;
    --p2-font-size: 20px;
    --p3-font-size: 18px;
    --p4-font-size: 16px;
    --p5-font-size: 14px;
    

    --spruce-header-nav-height: 109px;
    --default-section-width: 1800px;

    --primary-font: "Gilam";
    --accent-font: "AyitaPro";

    box-sizing: border-box;
}

@media(max-width: 1000px) {
    :root {
        --spruce-header-nav-height: 90px;
    }
}

@media(max-width: 768px) {
    :root {
        --spruce-header-nav-height: 67px;
    }
}

@media(max-width:768px) {
    :root {
        --h1-font-size: 48px;
        --h2-font-size: 38px;
        --h3-font-size: 35px;
        --h4-font-size: 22px;
        --h5-font-size: 15px;
        --p1-font-size: 14px;
    }
}

* {
    font-family: var(--primary-font);
    padding: 0;
    margin: 0;
    scroll-margin:var(--spruce-header-nav-height) 0 0;
}

main {
    padding-top: var(--spruce-header-nav-height);
}


a:visited,
a:-webkit-any-link {
    text-decoration: none;
    appearance: none;
}
a {
    cursor: pointer;
    text-decoration: none;
    appearance: none;
}
a.underline{
    text-decoration: underline;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: inherit;

    border: none;
    background: none;
    cursor: pointer;
}

ul {
    list-style-type: none;
}

ol {
    list-style-type: none;
}

.uppercase {
    text-transform: uppercase;
}

.text_center {
    text-align: center;
}

.inline{
    display: inline;
}

/* #region Colors */
.text_white{
    color: white;
}
.text_green {
    color: var(--spruce-green);
}
.text_white_green {
    color: var(--spruce-white-green);
}
.text_blue_green {
    color: var(--spruce-blue-green);
}
.text_dark_green {
    color: var(--spruce-dark-green);
}
.text_black_green {
    color: var(--spruce-black-green);
}
.text_soft_black {
    color: var(--spruce-soft-black);
}
.text_yellow {
    color: var(--spruce-yellow);
}
.text_black{
    color: black;
}

.bg_green{
    background-color: var(--spruce-green);
}
.bg_light_green{
    background: var(--spruce-light-green);
}
.bg_dark_green{
    background-color: var(--spruce-dark-green);
}
.bg_yellow{
    background-color: var(--spruce-yellow);
}
.bg_orange{
    background-color: var(--spruce-orange);
}
.bg_dark_orange{
    background-color: var(--spruce-dark-orange);
}
/* #endregion */

/* #region Font Family */
.font_accent {
    font-family: var(--accent-font);
}

/* #endregion */

/* #region Font Sizing & Weight */
h1,
.h1,
h1 *,
.h1 *,
h2,
.h2,
h2 *,
.h2 *,
h3,
.h3,
h3 *,
.h3 *,
h4,
.h4,
h4 *,
.h4 *,
h6,
.h5,
h5 *,
.h5 *,
h6,
.h6,
h6 *,
.h6 * {
    font-weight: bold;
    font-size: var(--font-size);
}

h1,
.h1 {
    --font-size: var(--h1-font-size);
}

h2,
.h2 {
    --font-size: var(--h2-font-size);
}

h3,
.h3 {
    --font-size: var(--h3-font-size);
}

h4,
.h4 {
    --font-size: var(--h4-font-size);
}

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

.p1 {
    font-size: var(--p1-font-size);
}
.p2 {
    font-size: var(--p2-font-size);
}
.p3 {
    font-size: var(--p3-font-size);
}
.p4 {
    font-size: var(--p4-font-size);
}
.p5 {
    font-size: var(--p5-font-size);
}

.italic {
    font-style: italic;
}

.letter_spaced {
    letter-spacing: .1em;
}

.weight_100 {
    font-weight: 100;
}
.weight_200 {
    font-weight: 200;
}
.weight_300 {
    font-weight: 300;
}
.weight_400 {
    font-weight: 400;
}
.weight_500 {
    font-weight: 500;
}
.weight_600 {
    font-weight: 600;
}
.weight_700,
.bold {
    font-weight: 700;
}
.weight_800 {
    font-weight: 800;
}
.weight_900 {
    font-weight: 900;
}
/* #endregion */

/* #region Buttons */
.std_btn {
    text-transform: uppercase;
    letter-spacing: .1em;
    display: inline-block;
    padding: 18px 40px;
    border-radius: 100px;
    font-weight: bold;
}
@media(max-width: 768px){
    .std_btn {
        padding: 15px 34px;
    }   
}

.btn_thin{
    padding: 8px 25px;
    border-radius: 43px;    
}

.btn_white{
    background: white;
    color: var(--spruce-blue-green);
}
.btn_white:hover,
.btn_white:focus{
    background: var(--spruce-yellow);
}

.btn_white_two{
    background: white;
    color: var(--spruce-dark-green);
}
.btn_white_two:hover{
    background: var(--spruce-green);
    color: white;
}

/*lg = linear gradient*/
.btn_lg_green{
    background: linear-gradient(90deg, var(--spruce-button-lg-left), var(--spruce-button-lg-right));
    color: var(--spruce-white-green);
}
.btn_lg_green:hover,
.btn_lg_green:focus{
    background: var(--spruce-button-lg-hover);
    color: white;
}

.btn_lg_green_two{
    background: linear-gradient(90deg, var(--spruce-button-lg-left), var(--spruce-button-lg-right));
    color: var(--spruce-white-green);
}
.btn_lg_green_two:hover,
.btn_lg_green_two:focus{
    background: var(--spruce-dark-green);
    color: white;
}

.btn_lg_dark_green{
    background: linear-gradient(90deg, var(--spruce-button-dark-lg-left), var(--spruce-button-dark-lg-right));
    color: var(--spruce-white-green);
}
.btn_lg_dark_green:hover,
.btn_lg_dark_green:focus{
    background: white;
    color: var(--spruce-dark-green);
}

.btn_outline_dark_green{
    border: 2px solid var(--spruce-dark-green);
    color: var(--spruce-dark-green);
}
.btn_outline_dark_green:hover{
    border: 2px solid transparent;
    background: linear-gradient(90deg, var(--spruce-button-dark-lg-left), var(--spruce-button-dark-lg-right));
    background-origin: border-box;
    color: white;
}

.btn_outline_green{
    border: 2px solid var(--spruce-green);
    color: var(--spruce-green);
}
.btn_outline_green:hover{
    border: 2px solid transparent;
    background: linear-gradient(90deg, var(--spruce-button-lg-left), var(--spruce-button-lg-right));
    background-origin: border-box;
    color: white;
}

.btn_outline_dark_green{
    border: 2px solid var(--spruce-dark-green);
    color: var(--spruce-dark-green);
}
.btn_outline_dark_green:hover{
    border: 2px solid transparent;
    background: linear-gradient(90deg, var(--spruce-button-lg-left), var(--spruce-button-lg-right));
    background-origin: border-box;
    color: white;
}

.btn_outline_white{
    border: 2px solid white;
    color: white;
}
.btn_outline_white:hover{
    border: 2px solid transparent;
    background: var(--spruce-yellow);
    color: var(--spruce-dark-green);
}
/**/

/* #endregion */

/* #region Meniscus */
.meniscus {
    position: relative;
}

.meniscus::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
    background-size: 200% 200px;
    background-repeat: no-repeat;
}

@media(max-width:767px) {
    .meniscus::after {
        height: 50px;
        background-size: 200% 100px;
    }
}

/* #endregion */

/* #region Meniscus top vs bottom*/
.meniscus.top::after {
    top: 0;
}

.meniscus.bottom::after {
    bottom: 0;
}

/* #endregion */

/* #region Meniscus direction */
.meniscus.upward {
    --meniscus-vertical-offset: 200px;
}

@media(max-width:767px) {
    .meniscus.upward {
        --meniscus-vertical-offset: 100px;
    }
}

.meniscus.downward {
    --meniscus-vertical-offset: -200px;
}

@media(max-width:767px) {
    .meniscus.downward {
        --meniscus-vertical-offset: -100px;
    }
}
/* #endregion */

/* #region Meniscus top vs bottom*/
.meniscus.top.upward::after,
.meniscus.bottom.downward::after {
    background-image: radial-gradient(ellipse at 25% var(--meniscus-vertical-offset), transparent 0%, transparent 50%, var(--meniscus-color) calc(50% + 3px), var(--meniscus-color) 100%);
}

.meniscus.top.downward::after,
.meniscus.bottom.upward::after {
    background-image: radial-gradient(ellipse at 25% var(--meniscus-vertical-offset), var(--meniscus-color) 0%, var(--meniscus-color) 50%, transparent calc(50% + 3px), transparent 100%);
}
/* #endregion */

/* #region Meniscus colors*/
.meniscus.darkgreen {
    --meniscus-color: var(--spruce-dark-green);
}

.meniscus.green {
    --meniscus-color: var(--spruce-green);
}

.meniscus.lightgreen {
    --meniscus-color: var(--spruce-light-green);
}

.meniscus.white {
    --meniscus-color: white;
}

.meniscus.yellow {
    --meniscus-color: var(--spruce-yellow);
}

.meniscus.beige {
    --meniscus-color: var(--spruce-beige);
}

/* #endregion */

/* #region Animations */
@keyframes revolve {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate_slow_revolve{
    animation-name: revolve;
    animation-duration: 180s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
/* #endregion */