body {
    font-family: "Menlo", Arial, Helvetica, sans-serif;
    color:white;
    overflow:hidden;
    margin:0px; padding:0px;
    background-color:#333;
    font-family: 'Press Start 2P', cursive;
}

game {
    width:100vw; height:100vh;
    background-color:black;
    overflow:hidden;
}

game * {
    position: absolute;
    display: block;
    margin:0px; padding:0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

car-component {
    width:224px; height:138px;
    background-image: url(../images/car.png);
    cursor: pointer;
}

bomb-component {
    width:142px; height:224px;
    background-image: url(../images/bomb.png);
    cursor: pointer;
}

ui {
    transform: translate(20px, 20px);
    pointer-events: none;
}

bar {
    background-image: url(../images/scorebar.png);
    background-repeat: no-repeat;
    width:290px; height:75px;
    overflow: hidden;
    background-position-x: 0px;
}

textfield {
    font-size: 1.4em;
    width:530px;
    text-shadow: 0px 4px 0px rgba(0,0,0,0.5);
    transform: translateY(80px);
}

cloud {
    background-image: url(../images/cloud.png);
    width:277px; height: 109px;
    animation: movecloud 8s linear infinite;
}

explosion {
    background-image: url(../images/explosion.png);
    width:150px; height: 157px;
}

background {
    width:100%; height:100%;
    background-color: #E69C5F;
    background-image: url(../images/bg.png);
    background-repeat: repeat-x;
    background-position: bottom;

}

@keyframes movecloud {
    from {
        transform:translate(-30vw, 50px);
    }
    to {
        transform:translate(100vw, 50px);   
    }
}