* {
  box-sizing: border-box;

}
body {
  margin: 0;
  padding: 0;
  font-family: 'Saira', sans-serif;
  font-size: 10px;
}

@font-face {
  font-family: "main";
  src: url('fonts/Montserrat-Light.ttf');
}

@font-face {
  font-family: "subhead";
  src: url('fonts/BebasNeue-Regular.ttf');
}

@font-face {
  font-family: "mainhead";
  src: url('fonts/square_sans_serif_7.ttf');
}

@font-face {
  font-family: "maintext";
  src: url('fonts/Montserrat-Light.ttf');
}

.gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 45px 45px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header header header header header header header"
    "header header header header header header header header header header"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent";
  height: 100vh;
  width: 100vw;
  overflow-y: hidden;
  overflow-x: hidden;
}

#canvas {
  grid-area: gameContent;
  width: 100%;
  height: 100%;
  /* background-color: lightblue; */
  background-image: url('images/starBG.jpg');
}

/* .reset-button {
  grid-area: header;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 2rem;
} */

.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: #000000;
  font-family: 'main', sans-serif;
  letter-spacing: 1rem;
  font-size: 3rem;
  width: 100%;
  display: flex;
  margin-left: 1rem;
}

.gameContent {
  grid-area: gameContent;
}

/* .resetButton {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: red 0.2rem solid;
  margin-right: 1rem;
  padding: 0.6rem;
  font-family: main;
  font-size: 1rem;
  text-wrap: nowrap;
}

.resetButton:hover {
  background-color: red;
  color: white;
  border: red 0.2rem solid;
  margin-right: 1rem;
  padding: 0.6rem;
  cursor: pointer; */
/* } */

.navbar {
  grid-area: header;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar a {
  color: #ffffff;
  font-family: 'main', sans-serif;
  /* font-size: 1.5rem; */
  width: 100%;
  display: flex;
  text-decoration: none;
}

.navbar ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}

nav button {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: #dc133b 0.2rem solid;
  border-radius: 0.3rem;
  margin-right: 1rem;
  padding: 0.6rem;
  font-family: main;
  font-size: 1.5rem;
  text-wrap: nowrap;
}

nav button:hover {
  background-color: #dc133b;
  color: white;
  border: #dc133b 0.2rem solid;
  margin-right: 1rem;
  padding: 0.6rem;
  cursor: pointer;
}

.manualContent {
  color: #ffffff;
  width: 50%;
  margin-left: 1.2rem;
}

.manualContent h1 {
  font-family: 'subhead', sans-serif;
  font-size: 2.5rem;
  margin-top: 1rem;
}

.manualContent h2 {
  font-family: 'main', sans-serif;
  font-size: 1.5rem;
  margin-top: 1rem;
}

.manualContent p {
  font-family: 'maintext', sans-serif;
  font-size: 1.2rem;
  margin-top: 1rem;
}

.manualContent li {
  font-family: 'maintext', sans-serif;
  font-size: 1.2rem;
  margin-top: 1rem;
}

.manualContent li::marker {
  color: #dc133b;
}

#logo {
  width: 35rem;
  height: auto;
  margin-left: 1rem;
}

.clrAccent {
  color: #dc133b;
}

#canvas {
  display: block;
}