/* body styles */

body {

    margin: 0;
    padding: 0;
    background: url(images/gplaypattern.png);
    font-family: 'Raleway', sans-serif;
}


/* header styles */
header {
    font-family: 'Rock Salt', cursive;
    text-align: center;
    background: url(images/header-comp.jpg);
    background-size: cover;
    color: #449342;
    margin-top: 0;
    padding: 2em;
}
header h1 {
    font-size: 4em;
    animation-name: colorChange;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes colorChange {
    0% {color: #449342;}
    25% {color: #2EAF7D;}
    50% {color: #3FD0C9;}
    75% {color: #2eaf7d;}
    100% {color: #449342;}
}

/* container styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;

}

/* Nav Button */
#navbutton {
    display: none;
    transition: all .5s linear 0s;
}
#hbar { /* ID selector used for the hbar ID*/
	width: 35px;
	height: 5px;
	background-color: #449342;
	border-radius: 10px;
	position: relative;
	top: 20px;
	transition: all .5s linear 0s;
}
#vbar { /* ID selector sued for the vbar ID*/
	height: 35px;
	width: 5px;
	background-color: #449342;
	border-radius: 10px;
	margin: 0 auto;
	transition: all .5s linear 0s;
}
/* Transform to X for Menu Button */
#navbutton.on {
	transform: rotate(45deg);  /* Transition */
}
#hbar.on {
	background: #02353C;
}
#vbar.on {
	background: #02353C;
}

/* navigation styles */
nav {
    background: #3FD0C9;
    border-top: 5px solid #449342;
    padding: .5em;
    font-family: 'Roboto Slab', serif;
}
nav ul {
    text-align: center;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color: #ffffff;
    text-decoration: none;
    padding: 0 0.5em;
    font-size: 1.25em;
}
nav ul li a:hover {
    color: #02353C;
}

/* main content */
article {
    padding: .75em 3em;
}
article h2 {
    text-align: center;
    font-size: 2em;
    margin: .5em 0;
    color: #02353C;
    font-family: 'Roboto Slab', serif;
    padding-bottom: .5em;
    border-bottom: 3px double #2EAF7D;
    
}
article h3 {
    text-align: center;
    margin: .25em 0;
    color: #02353C;
    font-size: 1.5em;
    font-family: 'Roboto Slab', serif;
    padding: .5em 0;
    border-top: 3px double #2EAF7D;
    border-bottom: 3px double #2EAF7D;
}
img {
    display: block;
    width: 60%;
    margin: 1em auto;
    border-radius: 10px;
    box-shadow: 5px 0 10px #eeeded, -5px 0 10px #eeeded;
    transition: box-shadow 2s; /* Transition */
}
img:hover {
    box-shadow: 5px 0 10px #3FD0C9, -5px 0 10px #3FD0C9;
}
.img-small {
    width: 40%;
}
article a {
    text-decoration: none;
    font-weight: bold;
    color: #3FD0C9;
}
article a:hover {
    color: #02353C;
}
.accent {
    font-weight: 700;
    color: #3FD0C9;
}
.section-accent {
    color: #02353C;
    font-weight: 700;
}
.section {
    display: block;
    background: rgb(227, 252, 248);
    padding: 1em;
    margin-bottom: 2em;
    border-radius: 15px;
    border-left: 5px double #3FD0C9;
    border-right: 5px double #3FD0C9;
    box-shadow: 5px 0 10px #eeeded, -5px 0 10px #eeeded;
}
.section .accent {
    color: #02353C;
}
.section h3 {
    background: #3FD0C9;
    color: #fff;
    padding: .5em 0.15em;
    border-radius: 10px;
    border: 0;
}
ol li, ul li {
    margin-bottom: .5em;
}

/* floats and alignment */
.left {
    float: left;
    width: 45%;
}
.right {
    float: right;
    width: 45%;
}
.right img {
    width: 70%;
    display: block;
    margin: 1em auto;
}
.clear {
    clear: both;
}
.inline {
    display: inline-block;
    margin: 0.5em 0.25em;
}


/* form styles */
form {
    display: block;
    margin: 2em auto;
    border: 3px dotted #3FD0C9;
    width: 50%;
    text-align: center;
    padding: .25em;
}
form p {
    padding: .25em;
}
form input {
    padding: .5em;
}
form textarea {
    margin-bottom: 0.25em;
    width: 70%;
    height: 50px;
}
.comment > p {
    margin-bottom: -.1em;    
}
input[type="submit"] {
    margin-bottom: 1em;
    background: #3FD0C9;
    color: #fff;
    border: 0;
    border-radius: 10px;
    transition: background 1s; /* Transition */
    font-family: 'Roboto Slab', serif;
    font-size: 1em;
}
input[type="submit"]:hover {
    background: #02353C;
}
/* footer styles */
footer {
    font-family: 'Bellota Text', cursive;
    text-align: center;
    background: #3FD0C9;
    padding: 0.75em;
    color: #ffffff;
    border-radius: 15px 15px 0 0; 
    clear: both;
}
footer h3 {
    font-size: 2em;
    margin: .25em 0;
}
footer h4 {
    font-size: 1.25em;
    margin: .25em 0;
}

/* Media Styles */

/* large screens */
 /* @media screen and (max-width: 992px) {
    << NOT NEEDED >>
} /*

/* Tablet */
@media screen and (max-width: 768px) {
    header {
        font-size: 0.5em;
    }
    nav {
        font-size: 0.9em;
    }
    article h2 {
        font-size: 1.75em;
        margin-top: .25em;
    }
    article h3 {
        font-size: 1.25em;
    }
    .left {
        float: none;
        width: 90%;
        margin: 0 auto;
    }
    .right {
        float: none;
        width: 90%;
        margin: 0 auto;
    }
    .section {
        margin-bottom: .5em;
    }
    .img-small {
        width: 60%;
    }
    form {
        width: 80%;
    }
}
/* Phone */
@media screen and (max-width: 575px) {
    #navbutton {
        display: block;
        position: absolute;
        top: 0;
        right: 2px;
        padding: 11px 11px;
        margin-right: -3px;
        margin-top: -5px;
        z-index: 6;
        
    }
    nav {
        display: none;
        text-align: center;
        padding-top: 1.25em;
        margin-top: -1.25em;
        font-size: 0.9em;
    }
    nav ul {
        padding: 0;
        margin-top: 0;
    }
    nav ul li {
        display: block;
    }

    header {
        font-size: 0.5em;
    }
    article h2 {
        font-size: 1.75em;
        margin-top: .25em;
    }
    article h3 {
        font-size: 1.25em;
    }
    img {
        width: 100%;
    }
    .left {
        margin: 0;
        padding: 0;
        width: 97.5%;
    }
    .left ul, .left ol {
        padding: 0;
    }
    .right {
        margin: 0;
        padding: 0;
        width: 97.5%;
    }
    .right ul, .right ol {
        padding: 0;
    }
    .section {
        background: none;
        border: none;
        box-shadow: none;
        width: 100%;
    }
    .section ul {
        padding-left: 2em;
    }
    .img-small {
        width: 100%;
    }
    form {
        width: 97.5%;
    }
}