html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v5/8Lg6LX8-ntOHUQnvQ0E7o08SWvhA5BcWCS8xVZDIH7E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

* {
  box-sizing: border-box;
}

body, button {
  font-family: 'Press Start 2P';
}

body {
  padding: 50px 0;
  font-size: 18px;
  background: url('../img/space.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
}

h1 {
  font-size: 3em;
  color: white;
  text-shadow: 0 5px black;
}

button {
  color: black;
  font-size: 2em;
  border: 0;
  background-color: white;
  padding: 12px 20px 10px;
  box-shadow: 0 5px black;
  cursor: pointer;
  outline: none;
}

button::-moz-focus-inner {
  border: 0;
}

button:active {
  position: relative;
  top: 5px;
  box-shadow: none;
}

#control-panel {
  margin-top: 40px;
}

#scorebox {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 10px 10px;
  background-color: white;
}

#score {
  color: black;
}

#canvas-container {
  position: relative;
  margin: 50px auto;
  width: 500px;
  height: 500px;
}

#asteroids-canvas {
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid black;
  z-index: 1;
}

#stars-canvas {
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid black;
  z-index: 0;
}