*{
    padding:0;
    margin:0;
}
html, body{
    overflow: hidden;
    background:#1e282c;
}

.mask{
    position: absolute;
    left:0;
    top: 0;
    right:0;
    bottom:0;
    text-align: center;
    background:rgba(0, 0, 0, .8);
    z-index: 99999;
}

@keyframes maskgo {
    0% {
        top: 0;
        opacity:1;
    }
    100% {
        top: -100%;
        opacity:0;
        z-index: -1;
    }
}

#btn-begin{
    border:1px solid #f10180;
    width: 143px;
    height: 43px;
    display: inline-block;
    border-radius: 5px;
    background: #f10180;
    color:#fff;
    font-weight:bold;
    font-size:18px;
    text-align: center;
    line-height: 43px;
    text-decoration: none;
    text-shadow:0 0 3px orange;
    opacity:0;
    animation: btnBegin 1s 0.5s ease-in-out forwards;
}

@keyframes btnBegin {
    0% {
        margin-top: -10%;
        opacity:1;
    }
    10% {
        margin-top: 50vh;
    }
    20% {
        margin-top: 40vh;
    }
    30% {
        margin-top: 50vh;
    }
    40% {
        margin-top: 44vh;
    }
    50% {
        margin-top: 50vh;
    }
    60% {
        margin-top: 46vh;
    }
    70% {
        margin-top: 50vh;
    }
    80% {
        margin-top: 48vh;
    }
    90% {
        margin-top: 50vh;
    }
    100% {
        margin-top: 50vh;
        opacity:1;
    }
}

#score-box{
    position: absolute;
    bottom:13px;
    left: 5px;
    z-index: 999;
    color:#aaa;
}

#gun{
    position:absolute;
    width: 30px;
    height: 20px;
    left: 50px;
    bottom: 50px;
    background:#0B7500;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
#gun:before{
    content: '';
    position: absolute;
    left: 13px;
    top: -5px;
    width: 5px;
    height: 5px;
    background: #0B7500;
}
#gun.fast{
    background:#c12e2a;
}
#gun.fast:before{
    background:#c12e2a;
}

.bullet{
    position:absolute;
    width: 4px;
    height: 14px;
    background:saddlebrown;
    border-radius: 50%;
}
.bubble{
    position: absolute;
    display:inline-block;
    border-radius: 50%;
}
.energy{
    position: absolute;
    display:inline-block;
    border-radius: 50%;
    background: rgb(200, 200, 100);
    color: #fff;
    text-align: center;
}
.explode{
    animation: mymove 5s;
    -webkit-animation: mymove 5s; /*Safari and Chrome*/
}

@keyframes mymove{
    from {
        left:0px;
    }
    to {left:200px;}
}

@-webkit-keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
#toolbar{
    width: 30px;
    position: absolute;
    top: 100px;
    right: 0;
    height:40px;
    text-align: center;
}
#toolbar button{
    width: 30px;
    height:50px;
    margin-top:20px;
    text-align:center;
}

.score-line{
    position: absolute;
    left: 0px;
    bottom: 49px;
    width: 100%;
    height: 4px;
    background: #0B7500;
}
#fast-shot-engry{
    display:inline-block;
    position:absolute;
    left:0;
    top:1px;
    height:2px;
    width: 0%;
    background:red;
}

@keyframes explode {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes over {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0.1;
    }
}

#talker{
    position:absolute;
    top: 40%;
    width: 100%;
    height:50px;
    text-align: center;
    color:red;
    font-size:20px;
    opacity: 0;
}

@keyframes talktext {
    0% {
        font-size: 12px;
        opacity: 0;
    }
    20% {
        font-size: 30px;
        opacity: 1;
    }
    30% {
        font-size: 30px;
        opacity: 1;
    }
    40% {
        font-size: 30px;
        opacity: 1;
    }
    50% {
        font-size: 30px;
        opacity: 1;
    }
    100% {
        font-size: 12px;
        opacity: 0;
    }
}

.faster{
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 80px;
    height: 40px;
    line-height: 45px;
    border-radius: 20px;
    background: #985f0d;
    text-align: center;
    color:#fff;
    font-weight: bold;
    text-shadow: #985f0d;

    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
}
.faster.up{
    -webkit-box-shadow: 0px 3px 3px #555;
    -moz-box-shadow: 0px 3px 3px #555;
    box-shadow: 0px 3px 3px #555;
    bottom: 6px;
}
