/*-------------------------------------------------------------------------------------------------
Global Defaults
-------------------------------------------------------------------------------------------------*/
*
{
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: inherit;
    color: inherit;
}

/* Removes weird extra padding after videos */
video { display: block; }

body
{
    line-height: 1.3;
    background: white;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'leixo-bold', Arial, Helvetica, sans-serif;
    text-transform: lowercase;
}

a:link, a:visited, a:hover, a:active { color: inherit; }

/*-------------------------------------------------------------------------------------------------
Web Fonts
-------------------------------------------------------------------------------------------------*/
@font-face
{
    font-family: 'leixo-bold';
    src: url('/content/leixo-bold-basic.woff2') format('woff2'),
         url('/content/leixo-bold-basic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'next-art-semibold';
    src: url('/content/next-art-semibold-basic.woff2') format('woff2'),
         url('/content/next-art-semibold-basic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*-------------------------------------------------------------------------------------------------
Utilities
-------------------------------------------------------------------------------------------------*/
.float-guard
{
    width: 100%;
    clear: both;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden;
}

/*-------------------------------------------------------------------------------------------------
Header Bar
-------------------------------------------------------------------------------------------------*/
.header-bar
{
    display: block;
    width: 100%;
    height: 2.2em;
    font-family: 'leixo-bold', Arial, Helvetica, sans-serif;
    font-weight: 550;
    text-transform: lowercase;
    list-style-type: none;
    background: black;
}

.header-bar li
{
    display: block;
    float: left; /* Using this instead of inline-block to avoid spacing */
    padding: 0.1em 0.2em;
    margin: 0 0.1em;
    line-height: 2em;
    max-height: 2em;
    overflow-y: hidden;
}

.header-bar li:hover { background: #343434; }

.header-bar a
{
    color: white;
    text-decoration: none;
    padding: 0.2em;
}

.header-bar .hamburger
{
    cursor: pointer;
    float: right;
}

.header-bar .hamburger img
{
    vertical-align: text-bottom;
    height: 1.1em;
}

.header-pathogenmark
{
    height: 1.8em;
    padding: 0.1em 0;
}

.header-text-image
{
    height: 0.7em;
    padding: 0.63em 0;
}

/* Mobile-specific */
.header-bar .hamburger { display: none; }

@media (max-width: 600px)
{
    .header-bar .hamburger { display: block; }

    .header-bar li
    {
        float: none;
        margin: 0;
        padding: 0.1em 0.35em 0.5em;
    }

    .header-bar li a
    {
        box-sizing: border-box;
        width: 100%;
        display: inline-block;
    }

    .header-bar .first-nav ~ li { display: none; }
    .header-bar.open-menu .first-nav ~ li { display: block; }

    .header-bar
    {
        font-size: 1.3em;
        height: auto;
    }
}

/* Low resolution-specific */
.header-text-image-small
{
    height: 1.2em;
    padding: 0.38em 0;
    display: none;
}

@media (max-width: 370px)
{
    .header-text-image-small { display: inline; }
    .header-text-image { display: none; }
}

/*-------------------------------------------------------------------------------------------------
Every Page
-------------------------------------------------------------------------------------------------*/
body.debug { margin-bottom: 17px; }
#debug-box
{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

footer
{
    font-family: Consolas, Monaco, Menlo, Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    text-align: center;
    padding: 0.05em;
}

/* Hide debug bar on mobile */
@media (max-width: 800px)
{
    body.debug { margin-bottom: 0; }
    #debug-box { display: none; }
}

/*-------------------------------------------------------------------------------------------------
Background Video Support
-------------------------------------------------------------------------------------------------*/
.background-video-area
{
    position: relative;
}

.background-video
{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.background-video video
{
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;

    /* Old Android browsers and IE9 need prefix */
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*-------------------------------------------------------------------------------------------------
Social Icons
-------------------------------------------------------------------------------------------------*/
/*
Everything related to social media is rot13'd to get around AdBlockPlus's stupid "social media tracking prevention".
In reality this just enables a filter list that removes anything from the page event remotely resembling something
related to social media. This is really misleading and doesn't do what it says on the label, so we work around it.
*/
.fbpvny-vpbaf
{
    width: 100%;
    text-align: center;
}

.fbpvny-vpbaf a
{
    display: inline-block;
    width: 50px;
    margin-left: 25px;
}

.fbpvny-vpbaf a.full-button
{
    display: block;
    width: 300px;
    margin: 1.5em auto 0;
}

.fbpvny-vpbaf a img
{
    width: 100%;
}

/*-------------------------------------------------------------------------------------------------
Back to Her Text Logo
-------------------------------------------------------------------------------------------------*/
.back-to-her-text-logo
{
    font-family: 'leixo-bold', Arial, Helvetica, sans-serif;
    text-transform: lowercase;
    white-space: nowrap;
}

.back-to-her-text-logo .to { text-transform: uppercase; }
.back-to-her-text-logo .to .o
{
    color: #1ec7ab;
    text-shadow: 0 0 0.1em #1ec7ab;
}

/*-------------------------------------------------------------------------------------------------
Pathogen Studios Main Page
-------------------------------------------------------------------------------------------------*/
.pathogen-logo-container
{
    width: 100%;
    max-width: 672px;
    position: relative;
    margin: 0 auto;
}

.pathogen-logo-container video
{
    width: 100%;
    height: auto;
}

.pathogen-logo-container .logo-text-container
{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 9%;
}

.pathogen-logo-container .logo-text-container img
{
    width: 60%;
    display: block;
    margin: 0 auto;
}

/*-------------------------------------------------------------------------------------------------
Back to Her Page
-------------------------------------------------------------------------------------------------*/
body.page-backtoher
{
    background: black;
    color: white;
}

.backtoher-content
{
    text-align: center;
    padding-bottom: 3em;
    /*
    Header: 2em + 0.1em*2 = 2.2em
    Footer: 0.7em*1.3 + 0.05em*2 = 1.01em
    Subtract an extra 7em so the comic peeks out.
    */
    min-height: calc(100vh - 15.21em);
}

/* Min height on mobile */
@media (max-width: 600px)
{
    .backtoher-content
    {
        /*
        Header: 2em + 0.1em*2 = 2.2em * 1.3em = 2.86em
        Footer: 0.7em*1.3 + 0.05em*2 = 1.01em
        Subtract an extra 9em so the comic peeks out.
        (We subtract extra on mobile because the toolbars on Safari will make the actual viewport smaller than 100vh.)
        */
        min-height: calc(100vh - 12.87em);
    }
}

.backtoher-logo
{
    margin: 10% auto 0;
    max-width: 100%;
}

.backtoher-blurb
{
    font-family: 'next-art-semibold', Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    text-shadow: -1px -1px black, -1px 1px black, 1px -1px black, 1px 1px black, -1px 0px black, 1px 0px black, 0px -1px black, 0px 1px black;

    padding: 0 0.1em;

    /* Make text look good when the webfont doesn't load. */
    font-weight: 550;
    text-transform: uppercase;
}

.backtoher-blurb p
{
    margin-top: 0.7em;
}

.always-break { display: block; }

/* Mobile-specific */
@media (max-width: 930px)
{
    .backtoher-blurb { font-size: 1.3vh; }
    .mobile-break { display: block; }
}

@media (max-width: 850px)
{
    /* Her gets cut off weirdly at narrower resolutions. This keeps her face visible. */
    body.page-backtoher .background-video video
    {
        -webkit-transform: translate(-63.5%, -50%);
        -ms-transform: translate(-63.5%, -50%);
        transform: translate(-63.5%, -50%);
    }
}

/* Area below comic */
.after-comic-content
{
    text-align: center;
    padding: 3em 0 8em;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#000000", endColorStr="#777777", GradientType=0)';
    background: linear-gradient(black, #777);
}

.after-comic-content .backtoher-logo
{
    margin: 0;
}

.after-comic-content .blurb
{
    font-family: 'next-art-semibold', Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    padding: 2em 0 1.5em;
}

.after-comic-content .big-blurb
{
    padding: 3em 0;
    margin: 0 20%;
    font-size: 1.2em;
}

.after-comic-content .big-blurb .question
{
    display: block;
    font-size: 1.2em;
    padding: 0.2em;
    color: #1ec7ab;
    text-shadow: 0 0 0.1em #1ec7ab;
}

@media (max-width: 850px)
{
    .after-comic-content .big-blurb
    {
        margin: 0 5%;
    }
}

/*-------------------------------------------------------------------------------------------------
About Page
-------------------------------------------------------------------------------------------------*/
.page-about section { margin-bottom: 1.75em; }

.about-us-blurb
{
    text-align: center;
    margin: 4em 0;
    font-size: 1.2em;
    padding: 0 1em;
}

.page-about header
{
    text-align: center;
    margin-bottom: 1.75em;
}

.page-about header h1 { font-size: 2.25em; }

.team-profile
{
    padding: 1em 15%;
    box-sizing: border-box;
}

.team-profile:after
{
    display: block;
    clear: both;
}

/* Profile image, name, and title */
.team-profile .profile-image
{
    float: left;
    box-sizing: border-box;
    padding: 0.2em;
    height: 6.5em;
}

.team-profile h2
{
    font-size: 1.5em;
    line-height: 1;
}

.team-fbpvny-zrqvn a { margin-left: 0.15em; }
.team-fbpvny-zrqvn img { height: 0.8em; }

.team-profile .title
{
    color: #343434;
    font-family: 'leixo-bold', Arial, Helvetica, sans-serif;
    text-transform: lowercase;
    line-height: 1;
    padding-bottom: 0.25em;
}

.bio p:not(:first-of-type)
{
    padding-top: 0.8em;
}

/* Favorite Games */
.team-profile .favorite-games
{
    font-size: 0.8em;
    color: #656565;
}

/* Contact section */
.contact-email
{
    font-size: 1.7em;
    margin: 0.5em 0;
    display: block;
}

/* Mobile-specific */
@media (max-width: 800px)
{
    .team-profile
    {
        width: 100%;
        float: none;
        padding: 1em;
    }

    .about-us-blurb { margin-top: 1.75em; }
    .about-us-blurb p:not(:first-of-type) { margin-top: 1em; }
    .page-about header p { font-size: 0.8em; }
}