/*******************************/
/* global document body styles */
/*******************************/

body {
    background: black;
    color: #ccc;
    user-select: none;
    font-family: "Ubuntu", sans-serif;
    overflow: hidden;
}

/**************************/
/* unique id-based styles */
/**************************/

#delta {
    margin: 36px 6px 36px 6px;
    height: calc(100vh - 80px);
    width: calc(100vw - 12px);
    position: absolute;
    border: 1px solid grey;
    background: url("../images/background03.png");
    animation-name: ripple;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-iteration-count: infinite;
}

@keyframes ripple {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -200px;
    }
}

#booting {
    position: absolute;
    width: 6%;
    left: 47%;
    top: 47%;
}
#canvas {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
}

h1 {
    margin: 0px;
    font-weight: bold;
    color: white;
    display: block;
    width: 100%;
    text-align: center;
    vertical-align: center;
    z-index: 1;
    position: absolute;
}
h2 {
    margin: 0px;
    font-weight: normal;
    color: white;
    display: block;
    width: 100%;
    text-align: center;
    vertical-align: center;
    z-index: 1;
    position: absolute;
    top: 8em;
}
h1#title {
    font-size: 10em;
}
h1#prepare {
    font-size: 2em;
    color: #000;
}
h1#secondlevel {
    font-size: 2em;
    color: rgb(224, 17, 17);
}
h2#start {
    font-size: 1em;
    color: #a0a0ff;
}

#scoreboard {
    position: absolute;
    top: -36px;
    vertical-align: top;
    line-height: 36px;
    width: 100%;
    font-size: 18px;
    color: white;
}
#scoreboard .lives {
    visibility: hidden;
}
#scoreboard .lives .label {
    padding: 0 0.5em;
    color: #808080;
}
#scoreboard .lives img {
    margin-right: 0.5em;
}
#scoreboard .score {
    position: absolute;
    right: 12px;
}
#scoreboard .score .label {
    padding: 0 0.5em;
    color: #808080;
}
#scoreboard .score .value {
    display: inline-block;
}

#scoreboard .lives.zero img.one {
    display: none;
}
#scoreboard .lives.zero img.two {
    display: none;
}
#scoreboard .lives.zero img.three {
    display: none;
}
#scoreboard .lives.one img.two {
    display: none;
}
#scoreboard .lives.one img.three {
    display: none;
}
#scoreboard .lives.two img.three {
    display: none;
}

#instructions {
    position: absolute;
    bottom: -36px;
    right: 12px;
    text-align: right;
    line-height: 36px;
    font-size: 12px;
    width: 100%;
    color: #a0a0a0;
}

#sound {
    width: 36px;
    height: 36px;
    background-image: url(../images/mute.png);
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    right: 8px;
}
#sound.on {
    background-position: 12px 8px;
}
#sound.off {
    background-position: -24px 8px;
}

#delta.preparing #scoreboard .lives {
    visibility: visible;
}
#delta.playing #scoreboard .lives {
    visibility: visible;
}

h2#start {
    -webkit-animation: pulsate 1s ease-out infinite;
    -moz-animation: pulsate 1s ease-out infinite;
    -o-animation: pulsate 1s ease-out infinite;
    animation: pulsate 1s ease-out infinite;
}

@-webkit-keyframes pulsate {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes pulsate {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes pulsate {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulsate {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*****************************/
/* @media query based layout */
/*****************************/

@media screen and (min-width: 0px) and (min-height: 0px) {
    #delta {
        line-height: 384px;
        font-size: 7pt;
    }
}
@media screen and (min-width: 840px) and (min-height: 550px) {
    #delta {
        line-height: 480px;
        font-size: 9pt;
    }
}
@media screen and (min-width: 968px) and (min-height: 646px) {
    #delta {
        line-height: 576px;
        font-size: 11pt;
    }
}
@media screen and (min-width: 1096px) and (min-height: 742px) {
    #delta {
        line-height: 672px;
        font-size: 13pt;
    }
}
@media screen and (min-width: 1224px) and (min-height: 838px) {
    #delta {
        line-height: 768px;
        font-size: 15pt;
    }
}
@media screen and (min-width: 1480px) and (min-height: 1030px) {
    #delta {
        line-height: 960px;
        font-size: 17pt;
    }
}