@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);

.landing {
    background-color: #3a78a1;
    background-image: linear-gradient(#83abc4 1px, transparent 1px), linear-gradient(90deg, #83abc4 1px, transparent 1px), linear-gradient(#3a78a1 1px, transparent 1px), linear-gradient(90deg, #3a78a1 1px, transparent 1px), linear-gradient(#4e86ab 1px, transparent 1px), linear-gradient(90deg, #4e86ab 1px, transparent 1px);
    background-position: -1px -1px, -1px -1px, 0 0, 0 0, -1px -1px, -1px -1px;
    background-size: 100px 100px, 100px 100px, 5px 5px, 5px 5px, 20px 20px, 20px 20px;
}

.landing h1 {
    display: none;
}

.landing p {
    font-family: 'Arial', sans-serif;
    font-size: 51px;
    font-weight: bold;
    line-height: 1.2;

    margin-left: 20px;
    padding: 90px 0;

    text-align: center;
    text-transform: uppercase;

    color: white;
    text-shadow: 1px 1px 1px black;
}

.landing p:after {
    content: 'Why so serious?';
}


/*  Common styles
==========================================================*/

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;

    background: #000;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(41, 42, 45, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background:     -ms-radial-gradient(center, ellipse cover, rgba(41, 42, 45, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background:      -o-radial-gradient(center, ellipse cover, rgba(41, 42, 45, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background:         radial-gradient(ellipse at center, rgba(41, 42, 45, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

header {
    width: 90%;
    min-height: 15%;
    /*border-bottom: 1px solid #eee;*/
    margin: 0 auto;
}

.content {
    width: 90%;
    max-width: 60rem;
    min-height: 65%;
    margin: 0 auto;
    padding: 10vh 0;
}
.content > div {
    margin-bottom: 10vh;
}


footer {
    width: 90%;
    min-height: 5%;
    margin: 0 auto;
}


/*  Loading
==========================================================*/

.loading ul {
    padding: 0;

    list-style: none;
}
.loading li {
    display: block;
    float: left;

    width: 19.6%;
    height: 10px;
    margin: 0 .2%;
}
.loading li:nth-child(-n+2) {
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 10px 2px rgba(117, 182, 255, .5),
    0 0 20px rgba(117, 182, 214, .5);
}
.loading li:nth-child(n+3) {
    box-shadow: inset 0 0 10px 1px rgba(117, 182, 255, .4),
    0 0 20px rgba(117, 182, 255, .1);
}
.loading li:nth-child(2) {
    -webkit-animation: pulse 1s alternate infinite;
       -moz-animation: pulse 1s alternate infinite;
}
@-webkit-keyframes pulse {
    0% {
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0 0 10px 2px rgba(117, 182, 255, .5),
        0 0 40px 2px rgba(105, 135, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
        box-shadow: inset 0 0 10px 2px rgba(117, 182, 255, .5),
        0 0 30px 2px rgba(105, 135, 255, .3);
    }
}
@-moz-keyframes pulse {
    0% {
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0 0 10px 2px rgba(117, 182, 255, .5),
        0 0 40px 2px rgba(105, 135, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
        box-shadow: inset 0 0 10px 2px rgba(117, 182, 255, .5),
        0 0 30px 2px rgba(105, 135, 255, .3);
    }
}


/*  inDevelopment
==========================================================*/

.indev {
    width: 88vmin;
    margin-right: auto;
    margin-left: auto;
}
.indev * {
    font-family: 'Anonymous Pro', monospace;
    font-size: 3.5vmin;

    display: inline-block;
}
.indev code {
    margin: 0 auto;

    color: white;
}
.indev span.blue {
    color: #48beef;
}
.indev span.comment {
    color: #7f8c8d;
}
.indev span.load {
    color: #f39c12;
}