@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
  min-height: 100vh;
  height: 100%;
  background-color: #fab26a;
}
.main {
  height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.scores-container,
.animal-container {
  flex: 1;
}
.game-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.canvas-container {
  position: relative;
  height: 700px;
  width: 600px;
  cursor: pointer;
}
.ghost-canvas {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 100px;
  height: 600px;
  width: 100%;
  background-color: rgb(249, 247, 219);
  opacity: 0.6;
}
.scores-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Impact, "roboto" Haettenschweiler, "Arial Narrow Bold",
    sans-serif;
  font-size: 25px;
  color: #333;
}
.high-score {
  font-family: Impact, "roboto" Haettenschweiler, "Arial Narrow Bold",
    sans-serif;
  font-size: 25px;
  color: #333;
  text-align: center;
  background-color: rgba(255, 255, 0, 0.729);
  border-radius: 20px;
  width: 35%;
  padding: 15px;
  margin-bottom: 30px;
}
.score-value {
  margin-bottom: 30px;
  padding: 15px;
  background-color: rgba(255, 255, 0, 0.729);
  border-radius: 20px;
  width: 45%;
  text-align: center;
}
.animal-container {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  font-size: 20px;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.next-animal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.center-animal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #f0e68c, #fab26a, white);
  border: 2px solid #d2965a;
  border-radius: 50%;
  opacity: 0.5;
  margin-top: 10px; /* spacing under heading */
  font-size: 32px;
  font-weight: bold;
}

.animal-evolution {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, #f0e68c, #fab26a, white);
  border: 2px solid #d2965a;
  border-radius: 50%;
  text-align: center;
  opacity: 0.5;
  margin-top: 20px;
}