/******************************************************************************
 *                                Main layout
 */

body, div, p, h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #e9e9e9;
    background-image: url("background.jpg");
}

.desktop-center {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* Used for temporarily hide things to avoid flicker,
 * or wait until animation is done to avoid slowing down
 * the animation
 */
.defer-display {
    display: none;
}

/******************************************************************************
 *                            Text font and color
 */

h2 {
    color: #1b5faa;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
}

p, td {
    font-family: 'Source Sans Pro', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

/******************************************************************************
 *                         Style common to all buttons
 */

.button {
    display: table;
}

.button.tipeee-button {
    background-color: #d84759;
    border-radius: 2px;
}

.button.patreon-button {
    background-color: #f96854;
}

.button a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.button.tipeee-button a {
    font-family: 'Alfa Slab One', cursive;
    color: white;
    font-weight: normal;
    font-size: 1em;
    letter-spacing: 0.02em;
}

.button.patreon-button a {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: bold;
    font-size: 1em;
}

.button:hover {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.button.tipeee-button:hover {
    background-color: #c3293c;
}

.button.patreon-button:hover {
    background-color: #fa7664;
}

.button:active {
    box-shadow: none;
}

/******************************************************************************
 *                                 Navigation bar
 */

#navbar {
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 50px;
    background-color: transparent; /* controlled in Javascript based on scroll */
}

/* turn navbar box-shadow on and off */
#navbar {
    transition: box-shadow 0.8s;
    box-shadow: 0px 0px 0px #000000;
}

#navbar.box-shadow-on {
    box-shadow: 0px 0px 20px #000000;
}

#navbar-logo {
    margin: 5px;
    height: 40px;
}

#navbar .tipeee-button {
    margin: 10px 12px;
    height: 30px;
    float: right;
}

#navbar .tipeee-button a {
    padding: 0px 16px;
}

/******************************************************************************
 *                                       Header
 */

#header {
    width: 100%;
    background-image: url("background-blue.jpg");
    background-repeat: repeat-x;

    /* compensate for fixed navbar */
    background-position-y: 50px;
    padding-top: 50px;

    /* dark blue matching navbar when scroll = 0 (see doOnscroll()) */
    background-color: rgb(21, 77, 137);

    /* We use this to horizontally crop out #header-logo-pen during the
     * animation (we don't want horizontal scrollbar). Note that header
     * extend up to top of page (overlapping navbar), so this doesn't
     * crop the #header-logo-pen vertically
     */
    overflow: hidden;
}

#header-logo {
    width: 100%;
    overflow: visible;  /* #header-logo-pen goes out of #header-logo. We want to see it, but don't want scrollbars. */
    position: relative; /* #header-logo-{pen|nopen} are absolutely */
                        /* positionned relative to this div        */

    height: 0px; /* computed using Javascript */
}

#header-logo-pen {
    position: absolute;

    left: 0px;   /* computed using Javascript */
    top: 0px;    /* computed using Javascript */
    width: 0px;  /* computed using Javascript */
    height: 0px; /* computed using Javascript */

    filter: drop-shadow(2px 2px 0px #124173);
}

#header-logo-nopen {
    position: absolute;

    left: 0px;   /* computed using Javascript */
    top: 0px;    /* computed using Javascript */
    width: 0px;  /* computed using Javascript */
    height: 0px; /* computed using Javascript */

    filter: drop-shadow(2px 2px 0px #124173);
}

#header-slogan {
    margin: 30px 0px;
    color: #ffffff;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    text-shadow: 2px 2px #124173;
}

/* Manual line breaks of slogan based on media queries,
 *  to break exactly where we want on all device sizes.
 *
 *  This also fixes the issue that Chrome wouldn't break
 *  correctly at word boundary when transforming individual
 *  letters using the CSS transform attribute.
 *
 *  See https://stackoverflow.com/questions/46889445/
 */

#header-slogan br {
    display: none; /* No line break for large screens */
}

@media screen and (max-width: 760px) {
    #header-slogan br#header-slogan-br-2 { /* Yes, we need to explicitly use this long selector here.
                                            * The simpler selector "#header-slogan-br-2" wouldn't be
                                            * specific enough to override "#header-slogan br". See:
                                            * https://css-tricks.com/specifics-on-css-specificity/
                                            */
        display: inline-block; /* break here if width < 760px */
    }
}

@media screen and (max-width: 420px) {
    #header-slogan br#header-slogan-br-1 {
        display: inline-block; /* also break here if width < 420px */
    }
}

#header-release-date {
    margin: 30px 0px 80px 0px;
    color: #9ec6f0;
    font-family: 'Niconne', cursive;
    font-weight: 400;
    font-size: 1.5em;
    text-align: center;
    text-shadow: 1px 1px #124173;
}

.header-release-date-dash {
    display: inline-block;
    margin: 0px;
    padding: 0px;

    border-bottom: solid 1px #9ec6f0;
    margin-bottom: 4px;
    width: 20px;
}

.header-release-date-dash:first-child {
    margin-right: 10px;
}

.header-release-date-dash:last-child {
    margin-left: 10px;
}

/* The slogan and release date is divided into "chunks". Each
 *  chunk is a block of text where there is no line break. Note
 *  that we don't enforce the "no line break" in CSS: it would be
 *  redundant because we already manually break using media queries.
 *
 *  Then, each individual letter of each chunk is wrapped in its
 *  own span in order to 'transform' it separately from the other
 *  letters. This "spanification" is performed in Javascript.
 */

.header-slogan-chunk {
    /* Prevents blinking before wrapLetters is called.
     * This is set back to 1 in Javascript once the individual letters
     * are wrapped in their own span.
     */
    opacity: 0;
}

.header-slogan-chunk span {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: rotate(-60deg) scale(3,3);
}

.header-slogan-chunk span.triggered {
    opacity: 1;
    transform: scale(1,1);
    transition: opacity 0.5s, transform 0.5s;
}

/* TODO Have a .no-js, like so:
.header-slogan-chunk span.no-js {
    opacity: 1;
} */

.header-release-date-chunk {
    /* Prevents blinking before wrapLetters is called.
     * This is set back to 1 in Javascript once the individual letters
     * are wrapped in their own span.
     */
    opacity: 0;
}

.header-release-date-chunk span {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: rotate(-60deg) scale(3,3);
}

.header-release-date-chunk span.triggered {
    opacity: 1;
    transform: scale(1,1);
    transition: opacity 0.5s, transform 0.5s;
}

.header-release-date-dash {
    opacity: 0;
    transition: opacity 2s;
}

.header-release-date-dash.triggered {
    opacity: 1;
}

/******************************************************************************
 *                                   Content
 */

#content {
    width: 100%;
    overflow: visible;
    position: relative; /* for animation purposes (content appears from bottom) */
    transition: opacity 1s, top 1s;

    /* move content up to overlap header */
    top: -30px;
}

#content-left {
    float: left;
    margin: 0% 0.5% 0% 1%; /* right = 0.5% for left column because horizontal margins don't collapse */
    width: 63.5%;
}

@media screen and (max-width: 900px) {
    #content-left {
        float: none;
        margin: 0px 9px 0px 9px; /* = 1% of 900px, for smooth transition between middle-size and large screens */
        width: auto;
    }
}

@media screen and (max-width: 450px) {
    #content-left {
        float: none;
        margin: 0px;
        width: auto;
    }
}

#content-right {
    float: right;
    margin: 0% 1% 0% 0.5%; /* left = 0.5% for right column because horizontal margins don't collapse */
    width: 32%;
}

@media screen and (max-width: 900px) {
    #content-right {
        float: none;
        margin: 0px 8px 0px 8px;
        width: auto;
    }
}

@media screen and (max-width: 450px) {
    #content-right {
        float: none;
        margin: 0px;
        width: auto;
    }
}

.clear {
    clear: both;
}

/******************************************************************************
 *                     Content boxes general layout
 */

/* We need this to have the ".content-box-title img" (that is, the small images
 * on the top-left of content boxes to overflow out of the .content-box.
 */
.content-box {
    overflow: visible;
}

/* Force .content-box-content height to include the margin-bottom of
 * its last child, that is, prevent margin collapsing. This is important
 * otherwise the background color of .content-box stop right at the bottom
 * of its last child, not including its maring-bottom.
 *
 * Ideally, we would like this to be defined in .content-box rather than
 * .content-box-content, but we need this extra nesting because we also
 * need "overflow: visible;" for .content-box (see above).
 */
.content-box-content {
    overflow: auto;
}

.content-box {
    background-color: white;
    border-bottom: solid 2px #d9d9d9;
}

/* In 2-column mode, we have margin-top for all .content-boxes
 * except the first of the column.
 *
 * In 1-column mode, we also add the margin-top for the first
 * child of #right-content
 *
 * In tiny 1-column mode, we replace the margins with padding
 * and border in order to separate content boxes using plain
 * color instead of background image.
 */

#content-left  .content-box,
#content-right .content-box {
    margin-top: 30px;
}

#content-left  .content-box:first-child,
#content-right .content-box:first-child {
    margin-top: 0px;
}

@media screen and (max-width: 900px) {
    #content-right .content-box:first-child {
        margin-top: 30px;
    }
}

@media screen and (max-width: 450px) {
    #content-left  .content-box,
    #content-right .content-box,
    #content-left  .content-box:first-child,
    #content-right .content-box:first-child {
        margin-top: 0px;
    }

    #content-left  .content-box,
    #content-right .content-box,
    #content-right .content-box:first-child {
        border-top: solid 30px #e9e9e9
    }

    #content-left .content-box:first-child {
        border-top: none;
    }

    #content-right .content-box:last-child {
        border-bottom: none;
    }

}

/******************************************************************************
 *                                  Content box titles
 */

.content-box-title {
    width: 100%;
    position: relative; /* .content-box-title img is positionned relative to this */
}

.content-box-title img {
    position: absolute; /* we use absolute instead of relative to not create a gap with following content */

    /* These values are the default, but are tweaked on a per-case basis */
    top: -25px;
    left: 10px;
    width: 80px;
}

/* tweaking for images cropped as a circle */
.content-box-title img.circle-crop {
    width: 70px;
    height: 70px;
    border: solid 5px white;
    border-radius: 50%;
}

/* tweaking for the heart */
#content-box-title-heart {
    top: -12px;
    left: 18px;
    width: 65px;
}

/* tweaking for the V */
#content-box-title-v {
    top: -15px;
    left: 10px;
    width: 80px;
}

/* tweaking for the dollar sign */
#content-box-title-dollar-sign {
    top: -20px;
    left: 25px;
    width: 55px;
}

/* tweaking for the history icon */
#content-box-title-history {
    top: -20px;
    left: 16px;
    width: 80px;
}

/* tweaking for the community icon */
#content-box-title-community {
    top: -16px;
    left: 18px;
    width: 65px;
}

.content-box-title h2 {
    padding-top: 5px;
    margin: 0px 0px 10px 95px;
}

.content-box-title .clear {
    padding-top: -30px;
}

/******************************************************************************
 *                              Content box text
 */

.content-box-content p {
    margin: 12px 20px;
}

.content-box-content h3 {
    margin: 12px 20px;
}

.content-box-content p:last-child {
    margin: 12px 20px 20px 20px;
}

.content-box-content a {
    color: #1b5faa;
    font-weight: bold;
}

/******************************************************************************
 *                              Content box other media
 */

/* We want a video that is centered, with at least a 20px margin on the left and
 * the right, respect the 16:9 aspect ratio, and have a given max-width.
 * Somehow, I couldn't find how to do this without adding three layers of
 * wrapping HTML markup. Duh. Oh well, it's ugly but it works. Please let me
 * know if you have a better way.
 */

.content-box-content .wrap-video-1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;

    margin-top: 30px;
    margin-bottom: 30px;
}

.content-box-content .wrap-video-2 {
    margin-left: 20px;
    margin-right: 20px;
    border: solid 1px #e9e9e9
}

.content-box-content .wrap-video-3 {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 56%;
}

/* Crop 1% out to avoid black borders from aspect ratio numerical errors */
.content-box-content .wrap-video-3 iframe {
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
}

.content-box-content .wrap-image-1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;

    margin-top: 30px;
    margin-bottom: 30px;
}

.content-box-content .wrap-image-2 {
    margin-left: 20px;
    margin-right: 20px;
}

.content-box-content .wrap-image-2 img {
    width: 100%;
}

/******************************************************************************
 *                                  Donate box
 */

.content-box-content .button.tipeee-button,
.content-box-content .button.patreon-button {
    margin: 10% auto;
    height: 40px;
    width: 80%;
    max-width: 180px;
    text-align: center;
}

.paypal {
    margin: 5% 0%;
    width: 100%;
    text-align: center;
}

.paypal table {
    width: 100%;
}

.paypal tr {
    font-weight: bold;
    margin-bottom: 10px;
}

.paypal input {
    font-weight: bold;
    margin-top: 10px;
}

/******************************************************************************
 *                                    Footer
 */

#footer {
    background-color: #cccccc;
    border-top: solid 1px #b7b7b7;
    overflow: auto; /* extends footer's height, thus background color, to include margins of children */
    margin-top: 20px;
}

@media screen and (max-width: 450px) {
    #footer {
        margin-top: 0px; /* remove margin-top for small screens otherwise background-image shows up */
    }
}

#footer p {
    color: #969696;
    margin: 5px;
}


#header-boxes {
    width: 80%;
    max-width: 350px;
    margin: 30px auto 20px auto;
}

.header-box {
    width: 45%;
}

.header-box img {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.header-box p {
    margin: 10px 0px;
    /*color: #1b5faa;*/
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
}

#header-vgc-illustration-box {
    float:left;
}

#header-vgc-animation-box {
    float: right;
}