@font-face {
    font-family: 'coalition_regular';
    src: url('Coalition_v2.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aguda_regular';
    src: url('aguda_regular-webfont.woff2') format('woff2'),
    url('aguda_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'enigmatic_regular';
    src: url('enigmatic.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* latin-ext */
@font-face {
    font-family: 'Coda';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Coda Regular'), local('Coda-Regular'), url('Coda-Regular-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Coda';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Coda Regular'), local('Coda-Regular'), url('Coda-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* { margin: 0; padding: 0; color: white;  }
html {
    font-size: 16px;
    font-family: aguda_regular;
    background-color: #333;
}
@media only screen and (min-width: 720px)
{
    html { font-size: 24px; }
}
@media only screen and (min-width: 2000px)
{
    html { font-size: 32px; }
}
@media only screen and (min-width: 3600px)
{
    html { font-size: 48px; }
}

@media only screen and (max-width: 420px)
{
    html { font-size: 12px; }
}
/* High res portraits should be larger */
/* @media only screen and (orientation: portrait) */
/* { */
/*     @media only screen and (min-width: 1000px) */
/*     { */
/*         html { font-size: 32px; } */
/*     } */
/*     @media only screen and (min-width: 2000px) */
/*     { */
/*         html { font-size: 48px; } */
/*     } */
/*     @media only screen and (min-width: 3600px) */
/*     { */
/*         html { font-size: 64px; } */
/*     } */
/* } */

html, body {
    width: 100%; height: 100%;
}
body {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background: #333 url('SplitBackground_1920x1080.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-style: hidden;
}
.semiblack {
    background-color: rgba(0, 0, 0, .7);
}
.aguda {
    font-family: aguda_regular;
}
.enigmatic {
    font-family: enigmatic_regular;
}
.coda {
    font-family: 'Coda', serif;
}
.coalition {
    font-family: coalition_regular;
}
.blackglow {
    text-shadow: 0 0 16px black, 0 0 24px black, 0 0 32px black;
}

#nav_container {
    position: absolute;
    width: 100%;
    z-index: 100000;
}
nav {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    font-size: 1.5rem;
    padding: 1rem 0;
}
nav > a { margin: 0 0.5rem; }
@media only screen and (orientation: portrait)
{
    nav { font-size: 1.5rem; }
}

#title-image {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    /* Align title left at less that half screen width for landscape */
    margin-top: 2.5%;
    margin-left: 3%;
    width: 40%;
    height: auto;
}
@media only screen and (orientation: portrait)
{
    /* Center title image at top for portrait */
    #title-image {
        width: 90%;
        height: auto;
        margin: 2rem auto;
    }
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.15rem; }
p {
    font-size: 1rem;
    text-align: left;
    max-width: 50rem;
    padding: 1rem;
}
a {
    text-decoration: none;
    color: white;
}

#trailer { position: absolute; top: 0; left: 0; width: 640px; height: 385px; }
#closetrailer {
    margin-top: 0.5rem;
    font-size: 40px;
    cursor: pointer;
    text-align: right;
    width: 100%;
}
#closetrailer > img {
    margin-bottom: -0.3rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

hr { border-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0); color: rgba(0,0,0,0); }

.wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 1080px; /* keep things centered in a column nicely even on really high resolutions */
    padding: 0;
}

#buttonscontainer {
    position: absolute;
    width: 100%;
    bottom: 5%;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
}
.nicebutton {
    background-color: black;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 1.5rem;
    /* The following margin settings are to mitigate a slightly imperfect background image split */
    margin-left: 1rem;
    margin-right: 1.3rem;
}
.nicebutton > span {
    height: 100%;
    vertical-align: center;
}
.nicebutton > img {
    height: 2.5rem;
    vertical-align: middle;
    margin-right: 1rem;
}
br.nicebutton-separator { display: none; }
@media only screen and (orientation: portrait)
{
    .nicebutton { margin-left: 0; margin-right: 0; }
    br.nicebutton-separator { display: block; }
}

.wrapper2 {
    margin: 0 auto;
    background-color: #333;
    width: 100%;
    height: auto;
}

.section-container {
    background-color: #222;
    padding-top: 2em;
}
section {
    width: 100%;
    position: relative;
    background-color: #222;
    margin-top: -2px; /* hiding wierd line artifact */
}

/* The main description section */
section > center { padding: 0.5rem; }
#game-description > h1 { font-size: 4.35rem; }
#game-description > p { font-size: 1.35rem; }
@media only screen and (max-width: 500px)
{
    section > center { padding: 0.25rem; }
    #game-description > h1 { font-size: 3rem; }
    #game-description > h3 { font-size: 1.5rem; }
    #game-description > p { font-size: 1rem; }
}

/* These overlay images on PC, and appear above images on mobile */
.section-text {
    position: absolute;
    top: 0em;
    padding: 1rem 1.5rem;
    max-width: 55%;
    min-width: 55%;
    max-height: 100%;
}
/* the section text title/tagline container */
.section-text > div {
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: center;
    width: 100%;
}
/* the section text title */
.section-text > div > h1 {
    vertical-align: top;
    display: inline-block;
    margin-right: .7em;
    width: 25rem;
    line-height: 1em;
    overflow: hidden;
}
/* the section text tagline */
.section-text > div > h3 {
    position: absolute;
    display: inline-block;
    word-wrap: break-word;
    font-size: 1.6rem;
    text-align: left;
    height: 2rem;
    /* right: .1rem; */
    top: 1.75rem; /* faking vertical-align center */
    width: 16.5rem;
    font-family: "Coda";
}
/* Special case for when a section title doesn't wrap to 2 lines */
.section-text > div > h3.oneline { top: auto; }
.section-text > p.oneline { margin-top: 2.5rem; }
/* the section text body */
.section-text > p {
    font-size: 1.3rem;
    line-height: 1.2em;
    text-align: left;
    padding: 0;
    margin-top: 1em;
    font-family: "Coda";
}
/* Some special underlines for one of the sections */
.section-text > p > u {
    font-size: 1.15em;
    margin-right: 0.1em;
}

/* Primary section image (one that gets overlaid) */
.section-bg {
    width: 100%;
    height: auto;
}
/* Secondary section image (one that comes AFTER section text) */
.section-bg2 { display: none; } /* Hide by default (only intended for when section text isn't an overlay) */

/* These need to come before the media settings otherwise they may supercede them, but after initial section text definitions so that it overrides their default positionings. */
.put-leftside {
    left: 0;
    right: auto;
}
.put-rightside {
    left: auto;
    right: 0;
}
.put-bottom {
    top: auto;
    bottom: 0;
}

/* This undoes the section overlay effect for anything less than standard 1080p */
@media only screen and (max-width: 1820px)
{
    /* Swap to the second section image by default (only indended for when section text isn't an overlay) */
    .section-bg {display: none;}
    .section-bg2 {display: block;}
    /* Sections and text now fit the screen width */
    section { min-width: 100%; max-width: 100%; }
    .section-text {
        position: relative;
        /* Don't know why this works but it works */
        min-width: revert;
        max-width: revert;
        min-width: auto;
        max-width: auto;
        height: auto;
        margin: auto;
        max-width: 100%;
        padding: 1rem .75rem;
    }
    .section-text > div > h1 {
        position: relative;
        margin-right: 0;
        min-width: revert;
        max-width: revert;
        width: 100%;
        height: auto;
    }
    .section-text > div > h3 {
        position: relative;
        display: block;
        min-width: revert;
        max-width: revert;
        width: 100%;
        height: auto;
        top: auto;
        margin-left: .1em;
    }
    .section-text > p.oneline { margin-top: 1rem; }
}

/* MEDIA section */
.mediacontainer {
    margin-top: 0.5em;
}
.mediacontainer > a > img {
    width: 30%;
    height: auto;
}

.connectcontainer {
    font-size: 1.5rem;
    margin: 0.5em;
    max-width: 100%;
}
.connectcontainer > a {}

/* Mailchimp stuff */
#mc_embed_signup{ background:rgba(0,0,0,0); clear:left; width:80%; font-size: 2.5em; }
#mc_embed_signup_scroll > div { display: inline; }
input { display: inline; color: black; font-size: 0.5em; padding: 0.5em; width: 70%; }
input.button { background-color: black; border-color: white; color: white; display: inline-block; max-width: 10rem; }
@media only screen and (orientation: portrait)
{
    #mc_embed_signup{ width:100%; font-size: 2.5em; }
    input { max-width: 800%; width: 80%; }
    input.button { max-width: 800%; width: 80%; }
}
.copyright { font-size: 1rem; }

/* Social icons */
.bigicon {
		margin: 1rem 1rem;
    display: inline-block;
}
.bigicon > img {
    height: 5rem;
    width: auto;
    max-width: 100%;
}
.littleicon {
    display: inline-block;
    /* These somehow get small icons to align nicely on smaller screens without looking too weird in landscape mode */
		margin: 1rem 3rem;
    padding: 0rem -1rem;
}
.littleicon > img {
    height: 3rem;
    width: auto;
}