body, html { height: 100%; margin: 0; }
body { font-family: 'Lato', Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; }
h3 { font-weight: 100; font-size: 40px; margin-bottom: 10px; }
a, a:visited { font-weight: 300; color: #8d99ae; transition: color, opacity 1.1s; text-decoration: none; }
a:active, a:hover { text-decoration: underline; }

header { opacity: 0.6; z-index: 1; width: 100%; height: 50vh; padding: 0px 10px; position: absolute; top: 0px; left: 0px; transition: left 1s, opacity 1.1s; }
header, footer { color: #fff; background-color: #282E34; flex-grow: 0; }
#header-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; flex-wrap: wrap; }
#header-content, #footer-content { max-width: 96%; margin: 0px auto; }
header h1 { margin-bottom: 0px; font-weight: 100; font-size: 2.5em; }
header h2 { letter-spacing: 0.1em; font-weight: 300; }
footer { padding: 20px 0px; }
footer.active { position: sticky; bottom: 0; transition: bottom 1s, opacity 1.1s; }
#social-header a { color: #fff; padding: 5px; }
#social-header .social-icon { width: 30px; height: auto; opacity: 0.7; transition: opacity 1.1s; }
#social-header .social-icon:hover { opacity: 1; }
#social-header { padding-bottom: 20px; }

main { flex-grow: 1; }
section { color: #8d99ae; max-width: 96%; margin: 0px auto; background-color: rgba(255, 255, 255, 1); text-align:justify; }
section p, section .project { line-height: 1.5em; }
section:last-child { margin-bottom: 0px; }

#intro p { padding-left: 5px; padding-right: 5px; }

#projects-examples { display: flex; justify-content: space-between; flex-wrap: wrap; }
.project { margin-bottom: 20px; }
.project img { width: 100%; height: auto; }
.project-caption { padding: 10px 20px; }

#contact { width: 100%; }


.btn-container { text-align: center; }
.btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: #dadada; border: 1px solid transparent; padding: 0.5rem 1.5rem; font-size: 1rem; border-radius: 0.25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.btn:hover { background-color: #8d99ae; color: #fff; }

#back-to-top { padding-top: 100px; padding-bottom: 20px; text-align: center; }
#back-to-top a, #back-to-top a:visited { text-decoration: none; font-size: 40px; color: #dadada; }
#back-to-top a:hover { color: #8d99ae; } 
#back-to-top a:active { color: #000; } 

#social { text-align: center; padding-bottom: 30px; }
#social a { padding: 5px; }
#social .social-icon { width: 40px; height: auto; opacity: 0.2; transition: opacity 1.1s; }
#social .social-icon:hover { opacity: 0.7; }


/* form(s) */
form div.form-control { padding: 10px; display: flex; justify-content: space-between; flex-direction: column; }
label { padding: 5px 10px 5px 0px; text-align: left; }
input, textarea { padding: 10px; border: 1px solid #8d99ae; border-radius: 5px; flex-grow: 0; flex-shrink: 0; }
textarea { height: 200px; }


.req { color: red; }
.error { color: red; padding: 0px 10px 10px; font-style: italic; transition: display 1.1s; }
.label-sub { font-size: 14px; }
.hidden { display: none; }
.success { padding: 15px 10px; color: green; background-color: rgb(176, 217, 176); border: 1px solid rgb(107, 192, 107); border-radius: 5px; }
.alert { padding: 15px 10px; color: red; background-color: rgb(187, 141, 141); border: 1px solid rgb(212, 72, 72); border-radius: 5px; }



/* Parallax */
.pax-img { position: relative; opacity: 0.65; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
#bg-1 {background-image: url("/hype3/img/bg/bg1sm.jpg"); min-height: 50vh; }
#bg-2 {background-image: url("/hype3/img/bg/bg2sm.jpg"); min-height: 360px; }
#bg-3 {background-image: url("/hype3/img/bg/bg3sm.jpg"); min-height: 360px; }
/* Turn off parallax scrolling for tablets and phones (or at least smaller screens) */
/* TODO: Smaller images for smaller screens; optimize bandwidth/loading time */
@media (max-width: 575px) {
    .pax-img { background-attachment: scroll; }
  }



/* Media Queries */
@media (min-width: 576px) {
    header { height: 100%; width: 330px; }
    h3 { font-size: 50px; }
    section { margin-bottom: 50px; }
    .section-content { padding: 20px 0px 50px; margin: 0px auto; }
    #social .section-content { padding: 0px 0px 30px; }

    #bg-1 {background-image: url("/hype3/img/bg/bg1.jpg"); min-height: 100%; }
    #bg-2 {background-image: url("/hype3/img/bg/bg2.jpg"); min-height: 500px; }
    #bg-3 {background-image: url("/hype3/img/bg/bg3.jpg"); min-height: 500px; }
}

@media (min-width: 768px) {
    #header-content, #footer-content { flex-direction: column; justify-content: space-between; align-items: baseline; }
    header h1 { margin-bottom: 20px; font-size: 3.5em; }
    section { padding: 40px 0px 50px; margin-bottom: 50px; }
    section#projects { padding-bottom: 30px; margin-bottom: 0px; }
    .project { width: 45%; margin-bottom: 100px; }
    .btn-container { text-align: left; }
    .btn { padding: 0.375rem 1rem; }
    #contact { margin-bottom: 0px; padding-bottom: 0px; }
}

@media (min-width: 1200px) {
    header h1 { font-size: 4.5em; }
    section { padding: 50px 0px 100px; }
    .section-content { max-width: 810px; }
    form div.form-control { flex-direction: row; }
    input, textarea { width: 400px; }
}

@media (min-width: 1400px) {
    input, textarea { width: 500px; }
}