html, body {
  margin: 0;
  overflow: hidden;
  font-family: "Skullboy", sans-serif;
  color: #80542e;
}

p {
  font-size: 32px;
  margin-block-start: 15px;
  margin-block-end: 15px;
}

li {
  font-size: 32px;
}

h2 {
  font-size: 48px;
}

h1 {
  font-size: 64px;
}

@font-face {
  font-family: "Skullboy";
  src: url("../font/ChevyRay - Skullboy.ttf") format("truetype");
}
.container {
  position: relative;
}

.screen {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  height: 600px;
}

.title-bg {
  position: absolute;
  z-index: -1;
}

.title-text {
  position: absolute;
}

.instructions-text {
  max-width: 90%;
}

.centered-text {
  text-align: center;
}

.hidden {
  display: none;
}

.canvas {
  position: absolute;
  z-index: -1;
}

.score {
  position: absolute;
  top: 0;
  left: 4px;
}
.score p {
  margin-block-start: 5px;
  margin-block-end: 5px;
}

.status-bar {
  position: absolute;
  top: 100px;
  right: 6px;
}

.status-bar-cat {
  position: absolute;
  left: -4px;
  top: -10px;
  transition: top 0.1s;
}

.status-bar-house {
  position: absolute;
  left: -4px;
  top: 390px;
}

/*# sourceMappingURL=styles.css.map */