/* GENERAL =============================== */

body {
    font-family: 'Gothic A1', Helvetica, Arial, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin:0px;
    height:100%;
    overflow:hidden;
    color:#21242b;
    background:#f7f7f4;
}

.darkTheme {
    background-image: url(images/stars.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center bottom;
    background-color:#21242b;
    color:#f7f7f4;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
}

*, *:before, *:after { box-sizing: inherit; }
img, div { display: block; }
p, h1, h2, h3, h4, ul, li { margin:0; padding:0; }
a { color:inherit; }
ul { list-style-type: none; }
b, .b { font-weight:900; }


/* TEXT ================================== */


body { line-height:1.7; font-size:15px; font-weight:500; }
h1, .h1 { font-size:200%; font-family: 'Roboto Mono', monospace; }
h2, .h2 { font-size: 120%; font-weight:600; }
h3, .h3, p { font-size:100%; font-weight:500; }
.subhead { font-size:270%; font-family: 'Roboto Mono', monospace; }


/* ENVIRONMENT ============================ */


#wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    height:100vh;
    -webkit-overflow-scrolling: touch;
}

.content-wrap {
    min-height:calc(100vh - 60px);
    padding:20px 0px 60px 0px;
}

#text {
    max-width:540px;
    margin-left:5%;
    margin-right:10%;
}

.hide { display:none; }

.clickable { cursor:pointer; }


/* NAV =================================== */


.nav-content {
    letter-spacing: 0.1em;
    font-size: 80%;
    font-weight: 900;
}

#nav {
    height:60px;
    position:relative;
}

.nav-content {
    margin-left:5%;
    padding-bottom:3px;
    position: absolute;
    bottom: 0;
}

.underline {
    border-bottom:2px solid #ffcf40;
}
.underline-dark {
    border-bottom:2px solid #ffcf40;
}


/* HEADER ================================ */


#header {
    font-size:900%;
    font-size: 13vw;
    font-weight:900;
    margin:50px 0px 20px calc(5% - 10px);
}


/* SPECIAL ELEMENTS ====================== */


.float {
    float:left;
    width:200px;
    height:318px;
    background-image: url('images/brettgeoghegan.jpg');
    margin:4px 25px 10px 0px;
    background-size: cover;
}

.spacer {
    width:100%;
    height:20px;
}

.xlspacer {
    width:100%;
    height:40px;
}


/* CARDS ================================== */


#sectionwrapper {
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

.card {
    height:60vh;
    width:50%;
    padding:0px;
    cursor:pointer;
}

.card-inner {
    padding:0px;
    height:100%;
    width:100%;
}

.card-outer { display:none; }

.status {
    font-size: 90%;
    font-weight:900;
    color:#ffcf40;
}

.status span {
    font-family: 'Roboto Mono', monospace;
    font-weight:600;
}


/* FOOTER ================================= */


#footerwrapper {
    margin:40px 100px 140px 5%;
}

#footer {
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

.footer-card {
    font-size:90%;
    font-weight:600;
    width:100%;
}

#home, #about, #projects, #contact, #facebook, #twitter {
    padding:5px 0px;
}


/* RESPONSIVE =================================== */


/* SMALL screen 800px or below */
@media only screen and (max-width: 800px) {

    .card {
        width:100%;
        min-height:400px;
    }

    #header {
        margin:10px 0px 20px calc(5% - 4px);
    }

    #nav {
        height:40px;
    }

    .nav-content {
        font-size:70%;
    }

    body { font-size:14px; }

    .card-txt {
        opacity:0;
    }

    #footerwrapper {
        margin:20px 5% 80px 5%;
    }

    .footer-card {
        font-size:100%;
        font-weight:600;
        width:100%;
    }

    .float {
        float:none;
        width:100%;
        height:318px;
        background-image: url('images/brettgeoghegan.jpg');
        margin:8px 0px 30px 0px;
        background-size: cover;
    }

    .card-outer {
        display: block;
        background:#21242b;
        padding:12% 10% 12% 5%;
        /*opacity:1;*/
        width:100%;
        height:60vh;
        min-height:400px;
        color:white;
    }
}

/* LARGE: screen above 801px */
@media only screen and (min-width: 801px) {

    .card-txt {
        background:#21242b;
        padding:12% 15%;
        opacity:0;
        width:100%;
        height:100%;
        color:white;
    }

    .card {
        min-height:500px;
    }

    .card-inner:hover > .card-txt {
        transition: 0.7s;
        opacity:.8;
    }

    .card-inner:not(:hover) > .card-txt {
        transition: 0.7s;
        opacity:0;
    }


}

/* locks header size over 1000px wide */
@media only screen and (min-width: 1000px) {
    #header { font-size:900%; }
}

/* changes to large img over 1500px wide */
@media only screen and (min-width: 1500px) {
    .darkTheme {
        background-image: url(images/stars-lg.jpg);
    }
}