body,
html {
  height: 100%;
  display: grid;
  padding: 0px;
  margin: 0px;
  background: #000000;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  /* copying the same properties as #game because they are needed when game runs on full screen */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* this is needed when game runs in a window */
#game {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#error {
  display: none;
  z-index: 1000;
  position: absolute;
  top: 10vh;
  left: 10vh;
  background: #000000;
  color: white;
  padding: 1em;
  overflow-y: auto;
}

.errorMessage {
  color: red;
  font-weight: bold;
}

.closeBtn {
  float: right;
  color: red;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  cursor: pointer;
}

/* load the fonts */
@font-face {
  font-family: Viper;
  src: url('../assets/fonts/Viper.ttf');
}

@font-face {
  font-family: SpaceMarine;
  src: url('../assets/fonts/space_marine.ttf');
}

@font-face {
  font-family: Spaceport1;
  src: url('../assets/fonts/Spaceport1.ttf');
}

@font-face {
  font-family: KenneySpace;
  src: url('../assets/fonts/KenneySpace.ttf');
}


/* Styles for credits page */
#credits-container {
  width: 100%;
  height: 100%;
}

#credits-inner {  
  width: 100%;
  color: darkgray;
  font-family: KenneySpace;
  font-size: 10px;
  font-stretch: expanded;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  padding: 20px;
}

#credits-inner table{
  width: 100%;
}


/* END of Styles for credits page */