WorkingStyles.css

body {
  background-image: url('testmap.png');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem 2rem;
}

.workingContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 2rem;
  width: 100%;
}

.workingSpace {
  font-size: 0;
  padding: 20px;
  width: 600px;
  height: 600px;
  min-height: 600px;
  border: 4px red solid;
  white-space: pre-wrap;
}

.game-details {
  width: 470px;
  height: 100px;
  background-color: #000000;
  color:rgb(255, 255, 255);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.game-details .score {
  margin-right: 30px; /* Score와 High Score 사이 간격 조절 */
}

.game-details .high-score {
  margin-left: 40px; /* Score와 High Score 사이 간격 조절 */
}

.parent {
  position: relative;
}

.level {
  color:rgb(253, 249, 3);
  font-size: 2rem;
  width: 180px;
  height: 50px;
  font-weight: 800;
  text-align: center;
  background-color: #000000;
  position: absolute;
  top: 10px;
  left: 1px;
}

.buttonSpace {
  padding: 20px;
  align-items: center;
  border: 2px blue solid;
  width: 30%;
  height: 600px;
}

.codeSpace {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='100rem' height='100rem'><text x='0' y='20' fill='044B94' fill-opacity='0.1' font-size='30'>code</text></svg>");
  background-repeat:no-repeat;
  background-position: center;
  padding: 60px;
  width: 80%;
  height: auto;
  min-height: 200px;
  border: 4px rgb(0, 255, 76) solid;
  white-space: pre-wrap;
}

.errorSpace {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='100' height='100'><text x='0' y='50' fill='044B94' fill-opacity='0.1' font-size='20'>Error</text></svg>");
  background-repeat:no-repeat;
  background-position: center;
  padding: 20px 60px;
  text-align: center;
  font-style: italic;
  font-size: 200%;
  width: 80%;
  height: auto;
  min-height: 10px;
  border: 4px rgb(144, 211, 255) dotted;
  white-space: pre-wrap;
}

.workingText {
  font-family: 'Courier New', monospace;
  font-size: 30px;
}

.btn {
  padding: 10px;
  font-size: 20px;
  font-style: italic;
  background-color: white;
  margin: 10px;
}

.btn:hover {
  background-color: gray
}

.pageTitle{
  width: 100%;
  text-align: center;
}

.block {
	width: 28px; height: 28px; border: 1px black dotted;
	font-size: 12px;
	display: inline-block;
}
	
.blockRow {
	display: block;
	font-size: 0;
}

.wall {
  background: red;
  /*background-image: url('snake.jpg');
  background-size: cover;*/
}

.ground {
  background: white;
}

.user {
  background: blue;
}

.key {
  background: yellow;
}

.enemy {
  background: purple;
}