@font-face {
    font-family: "Joystix";
    src: url(assets/fonts/joystix_monospace.ttf);
}

@font-face {
    font-family: "PacFont";
    src: url(assets/fonts/pac-font.ttf);
}


body {
  background: #000000;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#game-area {
  background: #00ff00;
  position: absolute;
  display: block;
  width: 576px;
  height: 736px;
  margin: auto;
  padding: 0;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15px;
}

#game-border {
  background: #0000;
  position: absolute;
  display: block;
  width: 596px;
  height: 756px;
  margin: auto;
  padding: 0;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15px;
  border: 4px solid #ffffff;
}

canvas {
  /* 
  display: block;
  width: 800px;
  height: 600px;
  */
  position: relative; 
  margin: auto;
  padding: 0;
  top: 50%;
  transform: translateY(-50%)
}

#marquee-outside {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  width: 596px; 
  height: 106px;
  margin: auto;
  background: #00ccff;
  border-radius: 25px;
  border: 4px solid #ffffff;
}

#marquee-inside {
  position: relative;
  top: 1%;
  text-align: center;
  font-family: "PacFont";
  font-size: 64px;
  color: #00ccff;
  text-shadow: 2px 2px #003366;
  margin: 10px;
  background: #ffffff;
  padding: 8px;
  border-radius: 15px;
  border: 2px solid #003366;
}

.start_button {
    position: absolute;
    left: 50%;
    top: 900px;
    transform: translateX(-50%);
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:7px 7px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.start_button:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
.start_button:active {
	position:relative;
	box-shadow: 2px 3px 0px 0px #8a2a21;
	top: 901px;
}