/*
Colors used 
    brown #3D3C31
    light-green #89E12A
    white #F7F7F1
    pink #EA2557
    light brown-gray #757670
    darkbrown #1D1E1B
*/

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #3D3C31;
}

a {
	text-decoration: none;
}

a:hover {
    color:#EA2557
}

section {
    padding-top: 4.5em;
    padding-bottom: 6em;
}

.bigger-section-padding {
    padding-top: 10em;
    padding-bottom: 10em;
}

.centered-text {
    text-align: center;
}

.content-flex {
    display: flex;
    flex-wrap: wrap;
}

.font-code {
    font-family: 'Courier New', Courier, monospace;
}

.header-text {
    font-size: 3.5rem;
}

.larger-text {
    font-size: 1.5rem;
}

.medium-text {
    font-size: 1.25rem;
}

.text-light {
    color:#F7F7F1
}

.text-green {
    color:#89E12A
}

.text-green a:hover {
    color: #EA2557;
}

.text-pink {
    color: #EA2557;
}

.text-padding {
    padding-left: 4em;
    padding-right: 4em;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
}

.aboutme-text {
    max-width: 1700px;
    width: 100%;
    height: auto;
}

.aboutme-div {
    display: flex;
    justify-content: center;
}

.img-me {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.bg-brown {
    background-color: #3D3C31;
}

.bg-darkbrown {
    background-color: #1D1E1B;
}

.bg-lightbrown {
    background-color: #757670;
}

.off-center-header {
    margin-left: 5rem;
}

.off-center {
    margin-left: 5rem;
}

.right-hand-btn {
    float: right;
    margin-right: 5rem;
}

.center-content {
    display: flex;
    justify-content: center;
}

.page-header {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('../imgs/banner.gif');
    height: 100%;
    width: auto;
}

.content-box {
    background-color: #3D3C31;
    border-style: solid;
    border-width: 3px; 
    border-color: #757670;
    box-shadow: -10px -10px #3D3C31, 10px 10px #3D3C31;
    width: 100%;
    max-width: 1060px;
    height: auto;
    margin-top: 5em;
    margin-bottom: 5em;
    padding: 3em;
    display: flex;
    flex-wrap: wrap;
}

.content-box-dark {
    background-color: #1D1E1B;
    border-style: solid;
    border-width: 3px; 
    border-color:   #757670;
    box-shadow: -10px -10px #1D1E1B, 10px 10px #1D1E1B;
    width: 100%;
    max-width: 1060px;
    height: auto;
    margin: 2.5em;
    padding: 3em;
    display: flex;
    flex-wrap: wrap;
}

.content-box-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.content-box-small {
    background-color: #3D3C31;
    border-style: solid;
    border-width: 3px;
    border-color: #757670;
    box-shadow: -10px -10px #3D3C31, 10px 10px #3D3C31;
    width: 200px;
    height: 150px;
    margin-left: 5em;
    margin-right: 5em;
    margin-top: 1.75em;
    margin-bottom: 1.75em;
    padding-bottom: 1.75em;
    text-align: center;
}

.img-box {
    box-shadow: -10px -10px #1D1E1B, 10px 10px #1D1E1B;
    border-style: solid;
    border-width: 3px;
    border-color: #757670;
    margin-left: 1.25em;
    margin-right: 1.25em;
}

.img-box:hover {
    box-shadow: -10px -10px #89E12A, 10px 10px #89E12A;
}

.project-imgs {
    text-align: center;
    margin: 2.5rem;
}

.btn-main {
    background:#757670;
    color:#89E12A;
    display: inline-block;
    margin: 0.5em 0.5em 0.5em 0.5em;
    padding: 0.5rem 2rem;
    border-style: solid;
    border-width: 3px;
    border-color: #89E12A;
    box-shadow: -5px -5px #757670, 5px 5px #757670;
}

.btn-main:hover {
    background: #3D3C31;
}

.btn-main:active {
    background: #89E12A;
    color:#3D3C31;
    box-shadow: -5px -5px #3D3C31, 5px 5px #3D3C31;
}