/* Main Page
***************************************/

html {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    padding: 0px;
    margin: 0px;
    background-color: #222629;
    color: #ffffff;
    font-family: 'Baloo 2', cursive;
    font-size: 1.1rem;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.container-fluid {
    width: 99.1vw;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Patua One', cursive;
}

.navbar li a {
    font-family: 'Patua One', cursive;
    color: #61892F;
}

.navbar li a:hover {
    color: #222629;
}


/* Foreground Colors
***************************************/

.dark-green {
    color: #61892F;
}

.light-green {
    color: #86C232;
}

.dark-grey {
    color: #222629;
}

.mid-grey {
    color: #474B4F;
}

.light-grey {
    color: #6B6E70;
}

.white {
    color: #FFFFFF;
}


/* Background Colors
***************************************/

.bg-dark-green {
    background-color: #61892F;
}

.bg-light-green {
    background-color: #86C232;
}

.bg-dark-grey {
    background-color: #222629;
}

.bg-mid-grey {
    background-color: #474B4F;
}

.bg-light-grey {
    background-color: #6B6E70;
}


/* Header Elements
***************************************/

#hero {
    background-image: url('images/backsplash-10.png');
    background-size: cover;
    background-position: center center;
    width: 99vw;
    height: 94vh;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #86C232;
}

#navlogo {
    height: 40px;
    margin: 1px;
    padding: 1px;
}

#herologo {
    width: 300px;
}


/* Content Elements
***************************************/

.titleTag {
    background-color: #86C232;
    padding: 0rem 1rem;
    box-shadow: 4px 4px 0px #61892F;
}

.icon {
    font-size: 10rem;
    overflow: hidden;
}

.tech {
    font-size: 10rem;
}

.tech i {
    display: block;
    color: #86C232;
    margin-bottom: 1rem;
}

.tech h4 {
    display: block;
}

.border-light-green {
    border: 1px solid #86C232;
}

.card {
    height: 500px;
}

.text-shadow {
    text-shadow: 2px 2px 3px #474B4F;
}

.w200 {
    width: 200px;
}

.contact {
    font-size: 5rem;
}

.contact i {
    display: block;
    color: #86C232;
    margin-bottom: 1rem;
}

.contact h4 {
    display: block;
}

.contact a {
    color: #FFFFFF;
    text-decoration: none;
}

.contact a:hover {
    color: #86C232;
    text-decoration: none;
}


/* Footer Elements
***************************************/

#footer {
    border-top: 2px solid #86C232;
}