* {
  margin: 0;
  padding: 0;
  font-family: var(--primary-font);
}
:root {
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  --primary-font: "Silkscreen", serif;
  --primary-bg-color: #ffffff;
  --player-ui-bg-color: rgb(21, 101, 158);
  --player-health-bar-color: rgb(19, 157, 19);
  --player-mana-bar-color: rgb(32, 32, 175);
  --player-home-buttons-color: brown;
  --play-again-color: rgb(23, 137, 112);
  --dragon-health-bar: rgb(147, 10, 10);
  --text-container-bg-color: rgba(0, 0, 0, 0.3);
  --you-lose-bg-color: rgb(54, 6, 6);
  --you-win-bg-color: rgb(22, 152, 178);
}

body {
}
.container {
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
}
.game-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--primary-bg-color);
  background-image: url("../public/castle.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 80%;
  height: 90%;
  box-shadow: 1px 1px 1px grey;
  position: absolute;
}
.dragon-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  img {
    width: 300px;
  }
  h1 {
    background-color: var(--dragon-health-bar);
    width: 100%;
  }
  @media (max-width: 426px) {
    flex-direction: column;
  }
}
.text-container {
  color: white;
  grid-column: 1/3;
  grid-row: 1/3;
  height: 200px;
  overflow: auto;
  padding: 15px;
  background-color: var(--text-container-bg-color);
}

.player-sprite-container {
  grid-column: 3/4;
  grid-row: 1/3;
  img {
    width: 200px;
    animation: scale infinite 2s ease forwards;
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.player-stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.player-ui-container {
  grid-column: 1/ 5;
  grid-row: 3/5;
  background-color: var(--player-ui-bg-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.player-health {
  background-color: var(--player-health-bar-color);
}
.player-mana {
  background-color: var(--player-mana-bar-color);
}
.player-btns {
  grid-column: 1/5;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 100%;
  font-family: var(--primary-font);
  button {
    font-size: x-large;
    background-color: var(--player-home-buttons-color);
    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }
  @media (max-width: 426px) {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
.player-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.game-over {
  position: absolute;
  left: 25%;
  top: 214px;
  width: 50%;
  height: 300px;
  z-index: 100;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  animation: fadeIn 0.5s ease-in;
  gap: 20px;
  button {
    width: 50%;
    height: 50px;
    cursor: pointer;
    &:hover {
      transform: scale(1.2);
      transition: ease-in;
      transition-duration: 0.2s;
    }
  }
}

.you-lose {
  background-color: var(--you-lose-bg-color);
  border: 10px dashed rgb(64, 22, 13);
  box-shadow: inset 1px 1px 20px 5px #ad0505;
  button {
    background-color: var(--play-again-color);
    box-shadow: 0px -2px 17px 5px #694f57;
  }
}

.you-win {
  background-color: var(--you-win-bg-color);
  border: 10px dashed rgb(13, 128, 134);
  box-shadow: inset 1px 1px 20px 5px #26118e;
  button {
    background-color: var(--play-again-color);
    box-shadow: 0px -2px 17px 5px #694f57;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}