/* CSS reset and styles to apply to everything */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
}

/* Skybox blue background for everything */

body {
    /* background: linear-gradient(#9ff, #6cf) fixed; */
    /* background-image: url("../../assets/sprites/Vector/vector_backgrounds.svg"); */
    background-image: url("../../assets/sprites/PNG/Backgrounds/blue_grass.png");
    /* background-size: contain; */
    /* overflow: hidden; */
}

/* Size for the game field is currently fixed */
/* TODO: media queries for the size? */

#game {
    width: 1140px;
    height: 640px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* The blocks that are drawn into the world */

.grass-left, .grass-mid, .grass-right, .grass-center {
    height: 32px;
    width: 32px;
    position: absolute;
    background-size: cover;
}

.grass-left { background-image: url("../../assets/sprites/PNG/Ground/Grass/grassLeft.png"); }
.grass-mid { background-image: url("../../assets/sprites/PNG/Ground/Grass/grassMid.png"); }
.grass-right { background-image: url("../../assets/sprites/PNG/Ground/Grass/grassRight.png"); }
.grass-center { background-image: url("../../assets/sprites/PNG/Ground/Grass/grassCenter.png"); }

/* The player is drawn this way */

.player {
    height: 40px;
    width: 32px;
    position: absolute;
    background-image: url("../../assets/sprites/PNG/Players/128x256/Green/alienGreen_stand.png");
    background-size: cover;
    background-position-y: 40px;
}

.move {
    animation-name: move;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% { background-image: url("../../assets/sprites/PNG/Players/128x256/Green/alienGreen_walk1.png"); }
    50% { background-image: url("../../assets/sprites/PNG/Players/128x256/Green/alienGreen_walk2.png"); }
    100% { background-image: url("../../assets/sprites/PNG/Players/128x256/Green/alienGreen_walk1.png"); }
}

.left {
    transform: scalex(-1);
}

/* The goal the player is trying to reach */
/* Using SVG to make it a gold star shape */
/* Using CSS animations to make it rotate */

.goal {
    position: absolute;
    height: 32px;
    width: 32px;
    line-height: 32px;
    background-size: cover;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='210' width='500' fill='%23ffdd00'><polygon points='100,10 40,198 190,78 10,78 160,198'/></svg>");
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); }
}


/* for some reason this really lags the game... */
/* .goal {
    position: absolute;
    height: 32px;
    width: 32px;
    line-height: 32px;
    background-size: cover;
    background-image: url("../../assets/sprites/PNG/Tiles/signExit.png");
} */