@font-face {
    font-family: normal;
    src: url(fonts/Roboto-Regular.ttf) format('truetype');
}

@font-face {
    font-family: bold;
    src: url(fonts/Roboto-Bold.ttf) format('truetype');
}

body {
    background-color: black;
    color: white;
    font-family : normal, sans-serif;
    margin: 10px 30px;
}

div#page {
    position: relative;
    z-index: 2;
}

div#upper_right {
    position: absolute;
    top: 0px;
    right: 0px;
}

h1#logo {
    font-family : bold;
    font-weight : normal;

    font-size: 60px;
    margin: 0px 0px 0px 50px;
    color: #090;
    letter-spacing: -1px;

    text-shadow:
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 100px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black
    ;
}

img#favico {
    position: absolute;
    top: 20px;
    left: 0px;
}


div#main_content {
    margin-top: calc( 50vh - 175px );
}

div#main_content p#prime {
    font-size: 86px;
    font-family : bold;
    font-weight : normal;

    margin: 0px;
    letter-spacing: -1px;
    word-spacing: -3px;
}

div#main_content p#subhead {
    font-size: 28px;
    text-transform: uppercase;
    margin: 0px;
    letter-spacing: 1px;
    word-spacing: 3px;
}

div#main_content p#prime,
div#main_content p#subhead {
    text-shadow:
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black,
        0px 0px 200px black
    ;
}

p.button {
    background-color: #060;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0px 0px 20px black;
    font-size: 18px;
}

div#main_content p.button {
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 3px;
}

div#image_grid {
    position: fixed;
    z-index: 1;
    overflow: hidden;

    width: calc( 100vw * 2.5 );
    height: calc( 100vh * 2.5 );

    left: calc( 100vw * -0.75 );
    top: calc( 100vh * -0.75 );

    transform:
        perspective( calc( calc(100vw) + calc(100vh) ) )
        rotateX(20deg)
        rotateY(-30deg)
        rotateZ(20deg)
    ;

    filter: brightness(66%);
}

div#image_grid img {
    height: calc( calc(10vw) + calc(10vh) );
    margin: calc(1vh);
}

@media (max-width: 900px) {
    div#main_content p#prime {
        font-size: 64px;
    }
    div#main_content p#subhead {
        font-size: 20px;
    }
}

@media (max-width: 660px) {
    div#main_content p#prime {
        font-size: 50px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    div#main_content p#subhead {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    div#upper_right {
        display: none;
    }
}

@media (max-height: 350px) {
    div#main_content {
        margin-top: 0;
    }
}