:root {
  --game-width: 900px;
  --block-width: 300px;
  --game-height: 600px;
}

*{
    padding: 0;
    margin: 0;
}

body{
	background: #161111 !important;
    color: ghostwhite!important;
}

#game{
	width:var(--game-width);
    height: var(--game-height);
    border: solid;
    margin: 20px auto;
    box-sizing: border-box;
	background-image: url('images/space.gif');
	background-repeat: no-repeat;
    background-size: 900px 600px;	
}
#character{
    width: var(--block-width);
    height: 100px;
    background-image: url('images/rocket.png');
	background-size: 100px;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative;
    top: 400px;
    left: 0px;
}
.blocks{
    width: var(--block-width);
    height: 100px;
    top: var(--game-height);
    position: relative;
	display: inline-block;
    animation: slide 2s infinite linear;
	background-image: url('images/obstacle.png');
	background-size: 100px;
    background-repeat: no-repeat;
    background-position-x: center;
}
@keyframes slide{
    0%{top:-100px};
    100%{top:var(--game-height)};
}
#left, #right{
    width:50%;
    position: absolute;
    height: var(--game-height);
}
#right{
    left: 50%;
}
#resetButton{
	color: inherit;
    background: inherit;
    border-radius: 30%;
    border: solid;
    margin: -10px;
    padding: 10px;
}

.dashboard{
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  padding: 10px;
  flex: 20%;
  justify-content: space-evenly;
  margin-top:20px;
}

#message{
	font-size: 20px;
}