@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
canvas {
  /* margin: auto; */
  border:2px solid #ffffff;
  background-color: #000000;
}

#headline {
  color: "white";
}
body {
  color: #fff;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
  height: 100%;
  margin: 0px;
}

html {
  height: 100%;
}

.container-class {
  background-image: url('images/space.jpg');

  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/*div {
  margin: auto;
}*/

#bodyContainer {
  display: flex;
  width: 100%;
  grid-template-columns: auto auto auto;
  justify-content: space-around;
  align-items: center;
}

#playerMarker {
  margin: 0px;
}

#container {
  width:auto;
  overflow: hidden;
}

#title {
  text-align: center;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#playerMarker {
  margin-top: 200px;
}

#alien {
  margin: 100px, 10px, 10px, 10px;
}

#instructsTitle {
  text-align: center;
}

#instructsBody {
  display: grid;
  width: 100%;
  grid-template-columns: 48% 52%;
}

#upIcon,
#downIcon,
#rightIcon,
#leftIcon,
#spacebarIcon {
  text-align: right;
  float: right;
}

#upInstructs,
#downInstucts,
#rightInstructs,
#leftInstructs,
#spacebarInstructs {
  text-align: left;
}