:root {
    /* --------------- base colors -------------- */
    --dark-grey: #3d3d3d;;
    --light-grey: rgb(51, 51, 51);
    --lighter-grey: rgb(122, 122, 122);
    --lightest-grey: rgb(207, 207, 207);
    --brand-color: #81b04f;
    /* -------------- designations -------------- */
    --header-background: black;
    --header-textcolor: white;

    --link-color: var(--brand-color);

    --nav-textcolor: var(--lighter-grey);
    --nav-textcolor-highlighted: var(--brand-color);

    --nav-burger-textcolor: black;
    --nav-burger-background: var(--brand-color);

    --content-header: var(--darkest-grey);
    --content-text: var(--lighter-grey);

    --sticky-info-background: var(--lighter-grey);
    --sticky-info-textcolor: var(--lightest-grey);

    --footer-background: var(--dark-grey);
    --footer-textcolor: var(--lightest-grey);
}

@font-face {
    font-family: "Gearedslabs";
    src: url("/assets/font/GearedSlab-Bold.ttf");
}    


* {
    box-sizing: border-box;
}

html {
    font-family: "Roboto", sans-serif, FontAwesome;
    font-weight: 400;
    font-style: normal;

    font-size: 13px;
    line-height: 1.3;

}

body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    min-height: 100vh;
    background-image: url("/assets/bg.jpg");

    background-position:
    center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.inner {
    width: 1157px;
    margin: 0 auto;
}
header {
    align-items: center;
    overflow: hidden;
    .logo, .navigation {
        display: block;
        width: 100%;
    }
    .logo {
        background-color: transparent;
        background-image: linear-gradient(180deg, #f4f4f4 0%, #ffffff 100%);
        border-bottom: 3px solid var(--brand-color);
        img {
            width: 226px;
            padding-top: 29px;
            padding-bottom: 21px;
        }
    }
    .navigation {
        background-color: var(--dark-grey);
        .horizontal {
                display: flow-root;
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flow-root;
                li {
                    font-size: 13px;
                    font-weight: 500;
                    text-transform: uppercase;
                    float: left;
                }
                a, a:visited {
                    color: white;
                    text-decoration: none;
                    
                    display: flex;
                    padding: 20px 31px;
                }
                a.active {
                        background-color: var(--brand-color);
                }
            
                a:hover {
                    text-decoration: underline;
                    transition: .4s;
                    background-color: var(--brand-color);
                }
            }
        } 
    }
}
main {
    min-height: 70vh;
}
footer {
    border-top: 3px solid var(--brand-color);

    .information {
        display: flow-root;
            
        background-color: var(--dark-grey);
        font-size: 14px;
        color: #b9b9b9;
        padding-top: 25px;
        padding-bottom: 50px;
        line-height: 1.5;
        h2 {
            color: var(--brand-color);
            font-size: 15px;
            font-weight: 700;
        }
        a,a:visited {
            text-decoration: none;
            color: #b9b9b9;
        }
        a:hover {
            color: #7a7a7a;
            text-decoration: underline;
        }
        .column {
            display: flow-root;
            float: left;
            width: 25%;
        }
    }
    .copyright {
        background-color: rgba(0,0,0,0.85);
        p {
            text-align: center;
            color: white;
            font-size: 15px;
            margin: 0;
            padding: 25px;
        }
    }    
}