@font-face {
  font-family: 'PlastilinBoldATT';
  src: url('../../../common/fonts/PlastilinBoldATT.eot') format('embedded-opentype'),
       url('../../../common/fonts/PlastilinBoldATT.woff') format('woff'),
       url('../../../common/fonts/PlastilinBoldATT.ttf') format('truetype'),
       url('../../../common/fonts/PlastilinBoldATT.svg#PlastilinBoldATT') format('svg');
  font-weight: normal;
  font-style: normal;
}


body {
    margin: 0;
    font-family: 'Times New Roman';
}

/***
 * Game styles
 */
#game-wrapper {
    position: relative;
    width: 770px;
    height: 420px;
}

#game-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 770px;
    height: 420px;

    background: url('../img/game-preview.png') 0 0 no-repeat;

    z-index: 100;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    text-align: center;

    background: rgba(255,255,255,0.25);
    opacity: 1;

    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;

    z-index: 101;
}

.hide {
    opacity: 0;

    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.button {
    display: inline-block;
    position: absolute;
    top: 45%;
    left: 50%;
    width: 131px;
    height: 46px;
    padding: 16px 0 0 55px;
    margin: 0 0 0 -92px;
    color: #CF2D7B;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    text-align: center;

    text-shadow: rgb(239, 227, 97) 0px -1px 0px, rgb(239, 227, 97) 1px 0px 0px, rgb(239, 227, 97) 0px 1px 0px, rgb(239, 227, 97) -1px 0px 0px;

    background: url('../img/button.png') 0 0 no-repeat;
}

#level-screen {
    /*line-height: 100%;
    display: flex;
    justify-content: center;*/
    align-items: center;
}

#level-screen,
#game-over-screen {

    color: #FFF;
    font-weight: bold;
    font-size: 20px;
}

#level-text {
    padding-top: 130px;
    font-size: 50px;
}

#game-over-screen h1 {
    margin-top: 75px;
}

h1, h2 {
    color: #CF2D7B;
    text-shadow: rgb(239, 227, 97) 0px -1px 0px, rgb(239, 227, 97) 1px 0px 0px, rgb(239, 227, 97) 0px 1px 0px, rgb(239, 227, 97) -1px 0px 0px;
}

.preload {
    width: 770px;
    height: 420px;
    background: rgba(255,255,255,0.4)
}

.preload:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px;
    width: 64px;
    height: 64px;
    content: ' ';
    background: url('../img/preloader.gif') center center no-repeat;
}

/***
 * How to play elements
 */
.legend {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: url('../img/manual.png') bottom right no-repeat;
}

#manual-move,
#manual-shoot,
#btn-shoot {
    text-align: center;
    color: #622181;
    font-family: 'PlastilinBoldATT', sans-serif;
    font-size: 30px;
    text-shadow: 1px 0px 5px #fff;
}

#manual-shoot {
    position: absolute;
    bottom: 60px;
    right: 50px;
    width: 300px;
}

#btn-shoot {
    position: absolute;
    bottom: 20px;
    right: 50px;
    width: 300px;
    color: #f8d5e4;
    font-size: 14px;
    text-shadow: none;
}

#manual-move {
    position: absolute;
    bottom: 60px;
    left: 25px;
    width: 320px;
}
.score-holder {
    display: inline-block;
    color: #cf2d7b;
    font-family: 'PlastilinBoldATT', sans-serif;
    border-radius: 20px;
    /*background-color: black;*/
    font-size: 20px;
    padding: 0px 20px;
    margin-top: 90px;
    line-height: 20px;
}
.puddle {
    width: 87px;
    height: 92px;
    background: url('../img/puddle.png') bottom right no-repeat;
    position: absolute;
    top: 118px;
    left: 370px;
    z-index: 999;
}