/* 
* @Author: bbales
* @Date:   2015-02-23 11:51:56
* @Last Modified by:   bbales
* @Last Modified time: 2015-03-01 19:46:57
*/

.preload1 { background: url(../img/bullets.png) no-repeat -9999px -9999px; }
.preload2 { background: url(../img/shield.png) no-repeat -9999px -9999px; }

@font-face {
    font-family: karma;
    src: url(karma_future.ttf);
}

@font-face {
    font-family: pixel;
    src: url(Pixel.ttf);
}

body{
    margin: 0 0;
    padding: 0 0;
    overflow:hidden;
    border:none;
}

.battlesnake{
    border:none;
    overflow:hidden;
    background-color:black;
    width:100%;
    height:100vh;
    margin:0 0;
    padding: 0 0;
    position:fixed;
    top:0;
    left:0;
}

.overlay{
    position:fixed;
    height:100vh;
    width:100%;
    z-index:10;
    text-align:center;
    
    -webkit-transition: opacity 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    -moz-transition: opacity 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    -o-transition: opacity 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    transition: opacity 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);

    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.9) 36%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.6)), color-stop(1%,rgba(0,0,0,0.6)), color-stop(36%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#e6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: karma;
    color:white;
}

.gameover{
    font-size:7rem;
    margin-top:30vh;
}

.again{
    font-size: 2rem;
}

.clickable{
    font-size: 2rem;
    color:white;
    text-shadow:2px 2px 2px #FF7899;
    cursor:pointer;
}

.clickable:hover{
    text-shadow:2px 2px 2px red;
}

.clickable:active{
    color:#C9C9C9;
    text-shadow:2px 2px 2px #FF7899;
}

.paused{
    font-family: karma;
    color:white;
    font-size:5rem;
    text-align:center;
    padding-top:34vh;
    opacity:0.9;
    width:100%;
    height:100vh;
    position:fixed;
    display:none;
    z-index:11;

    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.9) 36%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.6)), color-stop(1%,rgba(0,0,0,0.6)), color-stop(36%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.9) 36%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#e6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gameresult{
    font-size:3rem;    
    margin-top:10vh;
    margin-bottom:10vh;
}

.hidden{
    opacity:0.0;
}

.shown{
    opacity:0.9;
}



.scores{
    position:fixed;
    z-index:11;
    bottom:0;
    height:40px;
    color:white;
    opacity:0.9;
    width:100%;
    font-family:pixel;
    font-size:0.8rem;
}

.score{
    position:absolute;
    bottom:5px;
    width:150px;
    text-shadow:1px 1px 2px #FF50B0;
}

.p1score{
    left: 10px;
}

.p2score{
    right: 10px;
    text-align:right;
}