/* Global Variables */
:root {
  /* Google Font	*/
  --font: "Oswald", serif;
  --font-headings: "Tilt Prism", sans-serif;
}

/* ********************** Resets ********************** */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ********************** Typography ***********************/
body {
  line-height: 1.4;
  font-family: var(--font);
}

h1,
h2,
h3,
nav a {
  font-family: var(--font);
}

body {
  background-color: #323284;
}

.wrapper {
  max-width: 600px;
  height: 800px;
  margin: 0 auto;
}

/* ********************** Start Page ***********************/

.uniform {
  fill: #000000;
}

svg path {
  stroke-width: 4px;
  fill: none;
  animation: stroke 5s infinite;
}

@keyframes stroke {
  0% {
    stroke: rgb(113, 5, 5);
  }
  25% {
    stroke: rgb(127, 85, 8);
  }
  50% {
    stroke: rgb(149, 149, 8);
  }
  75% {
    stroke: rgb(16, 128, 16);
  }
  100% {
    stroke: rgb(13, 13, 135);
  }
}

.start-menu {
  display: block;
  background-color: beige;
  height: 100%;
}
.start-game {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2.5rem;
  padding: 2rem;
  border-radius: 1rem;
  width: fit-content;
  margin: 0 auto;
  background-color: #a8a8da;
  cursor: pointer;
}

/*********************** Intro Scene ***********************/

.intro-scene {
  display: none;
  background-color: #181818;
  height: 100%;
  padding: 1rem;
}

.intro-scene p {
  color: #fff;
  padding: 1rem;
  font-size: 1.2rem;
}

.intro-scene p:last-of-type {
  padding-bottom: 5rem;
}

/*********************** Game  Box *********************** */

.game-box {
  height: 100%;
  width: 100%;
  display: none;
  flex-wrap: wrap;
}

.controls-box {
  background-color: #4848d5;
  height: fit-content;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.start,
.quit,
.level-info {
  color: #fff;
  font-size: 2rem;
}

.level-info {
  font-family: var(--font-headings);
}

.start {
  cursor: pointer;
}

.options-box {
  height: 50%;
  width: 100%;
  padding: 2rem;
  background-color: #a8a8da;
}
.game-bg-img {
  opacity: 0.6;
}

.action-box {
  position: relative;
}

#player-sprite {
  position: absolute;
  left: 2rem;
  bottom: 0;
}

.player-idle {
  background-image: url(../images/sprites/player-idle.png);
  width: 96px;
  height: 96px;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: playerIdle 1s steps(7) infinite;
}

@keyframes playerIdle {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -672px 0;
  }
}

.player-attack {
  background-image: url(../images/sprites/player-attack.png);
  width: 96px;
  height: 96px;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: playerAttack 1.5s steps(5) 1;
}

@keyframes playerAttack {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -480px 0;
  }
}

.player-hurt {
  background-image: url(../images/sprites/player-hurt.png);
  width: 96px;
  height: 96px;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: playerHurt 0.5s steps(4) infinite;
}

@keyframes playerHurt {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -384px 0;
  }
}

#player-health {
  position: absolute;
  bottom: 4rem;
  left: 5rem;
  /* width: 2rem; */

  text-align: center;
  font-size: 2rem;
  /* background-color: white; */
}

#gpt-sprite {
  position: absolute;
  right: 2rem;
  top: 2rem;
}

.gpt-idle {
  background-image: url(../images/sprites/gpt-idle.png);
  width: 96px;
  height: 96px;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: gptIdle 1s steps(4) infinite;
}

@keyframes gptIdle {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -384px 0;
  }
}

.gpt-attack {
  background-image: url(../images/sprites/gpt-attack.png);
  width: 96px;
  height: 96px;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: gptAttack 1.5s steps(8) 1;
}

@keyframes gptAttack {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -768px 0;
  }
}

.gpt-hurt {
  background-image: url(../images/sprites/gpt-hurt.png);
  width: 96px;
  height: 96px;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: gptHurt 0.3s steps(2) infinite;
}

@keyframes gptHurt {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -192px 0;
  }
}


#gpt-health {
  position: absolute;
  top: 2rem;
  right: 9rem;
  /* width: 2rem; */

  text-align: center;
  font-size: 2rem;
  /* background-color: white; */
}

/* CSS ANIMATIONS FOR:
- .gpt-attack
- .gpt-death
- .player-death
- .gpt-hurt
- .player-hurt
 */

.health {
  padding: 2px;
}

#timer {
  margin: 0 auto 1rem;
  text-align: center;
  font-size: 2rem;
}

#question {
  display: none;
}

.answer-btn {
  display: none;
  background-color: #4848d5;
  border: none;
  width: 100%;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  margin: 4px;
  cursor: pointer;
}

/*********************** Game Over + Winning Screen *******************/

.game-over-screen,
.you-win-screen {
  display: none;
  background-color: #221b1b;
  height: 100%;
}

.game-over-screen p,
.you-win-screen p {
  color: #fff;
  padding: 5rem 2rem 4rem;
  font-size: 1.3rem;
}

section .title {
  font-size: 4rem;
  text-align: center;
}

/* Below is just for styling purposes */

/* .start-menu,
.intro-scene,
.game-box,
.you-win-screen {
  display: none;
} */
/* .start-menu,
.intro-scene,
.game-box,
.game-over-screen {
  display: none;
} */