@font-face {
    font-family: KenneyFuture;
    src: url(../fonts/KennyFuture.ttf);
}

@font-face {
    font-family: CourierPrime;
    src: url(../fonts/courier.ttf);
}

body {
    font-family: KenneyFuture, monospace;
    overflow-x: hidden;
}

div.live-site {
    position: absolute;
    color: white;
    z-index: 100;
    display: flex;
    width: 100%;
    justify-content: center;
    top: calc(100vh - 250px);
    font-size: 3rem;
    color: white;
}

div.live-site p {
    text-align: center;
    margin: 0px;
}

div.live-site p a {
    text-decoration: none;
    color: white;
}

#splash-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

section.cover div.is-overlay p {
    padding: 10vh;
}

section.cover div.is-overlay p {
    padding: 10vh;
}

a.effects-toggle {
    z-index: 20;
    color: white;
    padding: 2vh;
    float: right;
    position: relative;
    font-size: 1rem;
}

#splash-parent div.is-overlay p, section.cover div.is-overlay p {
    font-family: KenneyFuture;
    font-size: 2rem;
    color: white;
}

#splash-parent div.is-overlay, section.cover div.is-overlay {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    top: 66%;

    /* Safari 5.1-6 */
    background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(8,21,23,1));
    /* Opera 11.1-12 */
    background: -o-linear-gradient(rgba(0,0,0,0),rgba(8,21,23,1));
    /* Firefox 3.6-15 */
    background: -moz-linear-gradient(rgba(0,0,0,0),rgba(8,21,23,1));
    /* Standard */
    background: linear-gradient(rgba(0,0,0,0), rgba(8,21,23,1));
}

#splash-parent canvas {
    overflow: hidden;
}

#splash-parent {
    color: white;
    position: absolute;
    overflow: hidden;
    left: 0px;
    right: 0px;
    height: 100vh;
}

div.event-info {
    color: white;
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    left: 0px;
    right: 0px;
    top: 100vh;
}

.box {
    font-family: CourierPrime, courier, monospace;
    width: 400px;
    padding: 1em;
    display: none;
    color: white;
    background-color: #052e37;
    box-shadow:
        1px 1px 1px 1px #b4fff3,
        -1px 1px 1px 1px #b4fff3,
        1px -1px 1px 1px #b4fff3,
        -1px -1px 1px 1px #b4fff3;
}

.box.visible {
    display: block;
}

.button {
    color: white;
    border-radius: 0px;
    border: 2px solid #b4fff3;
    background: none;
}

input[type="text"], input[type="email"] {
    font-family: KenneyFuture, monospace;
    font-size: 2rem;
    display: block;
    border: 0;
    background-color: transparent;
    border-bottom: 2px solid #b4fff3;
    color: #b4fff3;
    transition: border-color 0.5s;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="text"]:focus, input[type="email"]:focus {
    outline: none;
}

input[type="text"]::selection {
  background: #b4fff3; /* WebKit/Blink Browsers */
  opacity: 1.0;
  color: black;
}

input[type="text"]::-moz-selection {
  background: #b4fff3; /* Gecko Browsers */
}

body {
    margin: 0;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 200vh;
    background-color: #081517;
}

.hex-commands svg {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.hex-commands svg.draw, .hex-commands svg.selected {
    opacity: 1;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: offset 0.5s linear forwards;
}

@keyframes offset {
    to {
        stroke-dashoffset: 0;
    }
}

.hex-commands {
    margin-top: 50px;
    position: relative;
    width: 392px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type=text].prompt {
    margin-top: 0px;
    padding-top: 0px;
    max-width: 400px;
}

.about h2 {
    color: #b4fff3;
    font-family: KenneyFuture, monospace;
}

.faq-question {
    margin: 1em 0;
}

.faq-question > span.question {
    display: block;
    margin-bottom: .5em;
    color: #b4fff3;
}

.time {
    color: #b4fff3;   
}

.hex-commands > img {
    width: 64px;
    position: absolute;
    height: auto;
    bottom: 0px;
    right: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.hex-commands > p {
    font-family: KenneyFuture, monospace;
    color: #b4fff3;
    font-size: 1.5rem;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.hex-commands > p.fadeout {
    animation: fadeout 1s forwards;
}

.hex-commands > img.animate {
    -webkit-animation: fadein 1s; /* Safari 4.0 - 8.0 */
    animation: fadein 1s;
    animation-fill-mode: forwards;
}

.hex-commands > img.animate.register {
    -webkit-animation-delay: 0.1s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.1s;
}

.hex-commands > img.animate.sponsor {
    -webkit-animation-delay: 0.2s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.2s;
}

.hex-commands > img.animate.atl {
    -webkit-animation-delay: 0.3s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.3s;
}

.hex-commands > img.animate.social {
    -webkit-animation-delay: 0.4s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.4s;
}

.hex-commands > img.about, .hex-commands > img.about-on {
    top: 59px;
    left: 100px;
}

.hex-commands > img.register, .hex-commands > img.register-on {
    top: 115px;
    left: 132px;
}

.hex-commands > img.sponsor, .hex-commands > img.sponsor-on {
    top: 115px;
    left: 197px;
}

.hex-commands > img.atl, .hex-commands > img.atl-on {
    top: 59px;
    left: 228px;
}

.hex-commands > img.social, .hex-commands > img.social-on {
    top: 2px;
    left: 197px;
}

.hex-commands > img.register-on,
.hex-commands > img.about-on,
.hex-commands > img.sponsor-on,
.hex-commands > img.atl-on,
.hex-commands > img.social-on
{
    opacity: 0;
}

.hex-commands > img.register-on.selected,
.hex-commands > img.about-on.selected,
.hex-commands > img.sponsor-on.selected,
.hex-commands > img.atl-on.selected,
.hex-commands > img.social-on.selected
{
    opacity: 1;
}

.hex-commands > img.register-on:hover,
.hex-commands > img.about-on:hover,
.hex-commands > img.sponsor-on:hover,
.hex-commands > img.atl-on:hover,
.hex-commands > img.social-on:hover
{
    opacity: 1;
}

.hex-commands > img.register:hover,
.hex-commands > img.about:hover,
.hex-commands > img.sponsor:hover,
.hex-commands > img.atl:hover,
.hex-commands > img.social:hover
{
    opacity: 0 !important;
}

.hex-commands > img.register.selected,
.hex-commands > img.about.selected,
.hex-commands > img.sponsor.selected,
.hex-commands > img.atl.selected,
.hex-commands > img.social.selected
{
    opacity: 0 !important;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

section.hidden {
    opacity: 0;
    transition: 0.5s opacity;
}

.cover {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    height: 100vh;
    /* background-color: #081517; */
    /* background: url(../sky.jpg); */
    /* background-size: cover; */

    display: flex;
    justify-content: center;
    align-items: center;
}

.cover .star-sky {
    z-index: -1;
    height: 100%;
    width: auto;
}

#intro-text {
    background-color: initial;
    color: white;
    text-shadow: 0px 0px 25px #1c3093;
    font-family: KenneyFuture, monospace;
    font-size: 3.5em;
    padding: 0;
    line-height: 1.5em;
    user-select: none;
    text-align: center;
}

a.button.apply {
    width: calc(100% - 4px);
    text-align: center;
    font-size: 1.5rem;
    font-family: KenneyFuture, monospace;
}

#intro-text::after {
    display: inline-block;
    opacity: 1;
    content: "";
    width: 0.4em;
    height: 0.8em;
    background-color: white;
    position: relative;
    top: 0.1em;
}
#intro-text.idle::after {
    animation: 1s blink infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@media only screen and (max-width: 500px) {
    #splash-parent div.is-overlay p, section.cover div.is-overlay p {
        font-size: 1rem;
    }

    #intro-text {
        font-size: 2em;
    }

    input[type=text].prompt {
        width: 89vw;
    }

    div.event-info > div.content > div {
        width: 80vw;
    }
}

.is-overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
}

.is-overlay > p {
    margin: 0.25em;
}

a:link {
    color: #b4fff3;
}

a:visited, a:active {
    color: #81CCC0;
}

a:hover {
    color: white;
}

a.button, a.button:link, a.button:visited, a.button:active {
    color: #81CCC0;
    text-decoration: none;
}

p.no-line-height {
    line-height: 0px;
    /*so the button formats nicely*/
}

p.no-up-space {
    margin-top: 0px;
    padding-top: 0px;
}

.button {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.button::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    left: -100%;
    top: 0;
    transition: 0.25s all;
    z-index: -5;
}

#mlh-trust-badge {
    display: block;
    max-width: 100px;
    min-width: 60px;
    position: absolute;
    right: 5%;
    top: 0;
    width: 5%;
    z-index: 10000
}

.footer {
    margin-top: 100px;
    text-align: center;
}

/*
  - Bigger date
  - color match & registration reflect new color
  - application questions
*/

.button:hover::after {
    left: 0;
}

img.left-border {
    position: absolute;
    top: 101vh;
    left: 5%;
}

img.right-border {
    position: absolute;
    top: 104vh;
    right: 5%;
}

@media only screen and (max-width: 770px) {
    img.left-border {
        display: none;
    }

    img.right-border {
        display: none;
    }

    img.top-boarder {
        display: none;
    }
}

.clickable-img {
    cursor: pointer;
}

.clickable-text {
    cursor: pointer;
    z-index: 10;
}

.is-centered {
    text-align: center;
}

.hover-button {
    display: inline-block;
    border: solid white 3px;
    cursor:pointer;
    color: white;
    font-weight: bold;
    padding: 0.25em;
    position: relative;
    z-index: 40;
    margin-bottom: 1em;
}

.hover-button:hover {
    background-color: white;
}

.hover-button > p {
    font-size: 2em;
    padding: 0;
    margin: 0;
}

.hover-button > p > a:link, .hover-button > p > a:visited {
    color: white;
    z-index: 1;
    transition: 0.5s all;
}

.hover-button:hover > p > a:link, .hover-button:hover > p > a:visited {
    color: black;
    z-index: 1;
}

.sponsor-row {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    flex-wrap: wrap;
}

.sponsor-row img {
    padding: 1em;
    vertical-align: bottom;
}

.exo img {
    max-height: 3em;
}

.meso img {
    max-height: 2.5em;
}

.strato img {
    max-height: 2em;
}