@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
.flex-center, .main #userOptions, #gameOver, .impact-disclaimer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute-center, #savorContainer #petHeart, #savorContainer, #opponentContainer, .main, #threeItemContainer, #impact-container .userImpactChoice:before, #chaptersContainer, #parameterContainer, #newItemDisplay, #pauseMenu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.quit-menu, #chaptersContainer #closeChapterBtn, #parameterContainer #closeOptBtn, #pauseMenu #closePauseMenuBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: 1.2em;
}

.options {
  background-color: #212529;
  transition: 200ms;
}
.options:hover {
  background-color: black;
}

#pauseBtn {
  position: fixed;
  bottom: 1em;
  right: 1em;
  opacity: 0.4;
  transition: 200ms;
}
#pauseBtn:hover {
  opacity: 1;
}

#pauseMenu {
  display: none;
  width: 60%;
  max-width: 750px;
  padding: 2em 1em;
}
@media (max-width: 600px) {
  #pauseMenu {
    font-size: 0.8em;
  }
}
#userInput {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #212529;
  padding: 1rem;
}
#userInput button {
  margin-top: 1em;
}

.impact-disclaimer {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0 4em;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2;
}

#lifeContainer {
  padding: 0.5em;
}
@media (max-width: 600px) {
  #lifeContainer .heart {
    margin: 0 12px 12px 0;
    transform: scale(2.5);
  }
}

#newItemDisplay {
  pointer-events: none;
}

#whiteScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0;
  transition: 3000ms;
}

#blackScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: 3000ms;
}

#blackScreenWithMessage {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: 6000ms;
  pointer-events: none;
}

#swordSlash {
  position: absolute;
  top: 0;
}

#parameterContainer {
  display: none;
  width: 90%;
  max-width: 750px;
}
#parameterContainer h3 {
  text-align: center;
  margin-bottom: 2em;
}
#parameterContainer .nes-select {
  margin-bottom: 2em;
}
@media (max-width: 600px) {
  #parameterContainer .nes-select select {
    font-size: 0.8em;
    width: 90%;
  }
}
#parameterContainer .checkbox-container {
  display: flex;
  flex-direction: column;
}
#parameterContainer .checkbox-container input {
  margin-bottom: 2em;
}
#parameterContainer #userRename {
  margin-top: 2em;
}

#chaptersContainer {
  display: none;
  width: 90%;
  max-width: 750px;
  max-height: 90vh;
  overflow: scroll;
}
#chaptersContainer h3 {
  text-align: center;
}
#chaptersContainer h4 {
  margin-top: 3em;
}
#chaptersContainer .chapitreDisplay a {
  margin-left: 2em;
}
@media (max-width: 600px) {
  #chaptersContainer .chapitreDisplay a {
    font-size: 0.8em;
  }
}
#chaptersContainer .chapitreDisplay #chapterSelectionPartOne a {
  color: aqua;
}
#chaptersContainer .chapitreDisplay #chapterSelectionPartTwo a {
  color: burlywood;
}

#charactersContainer {
  position: relative;
}
#charactersContainer #characterOne {
  position: absolute;
  left: 0;
  bottom: -8em;
  opacity: 0;
  transition: 1000ms;
}
@media (max-width: 600px) {
  #charactersContainer #characterOne {
    bottom: -4.5em;
  }
}
#charactersContainer #characterOne img {
  object-fit: cover;
  width: 15em;
}
@media (max-width: 600px) {
  #charactersContainer #characterOne img {
    width: 8em;
  }
}
#charactersContainer #characterTwo,
#charactersContainer #characterThree {
  position: absolute;
  right: 0;
  bottom: -2em;
  opacity: 0;
  transition: 1000ms;
}
@media (max-width: 600px) {
  #charactersContainer #characterTwo,
#charactersContainer #characterThree {
    bottom: -1em;
  }
}
#charactersContainer #characterTwo img,
#charactersContainer #characterThree img {
  object-fit: cover;
  width: 16em;
}
@media (max-width: 600px) {
  #charactersContainer #characterTwo img,
#charactersContainer #characterThree img {
    width: 8em;
  }
}

#impact-container {
  position: relative;
  z-index: 9;
}
#impact-container .userImpactChoice {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 0;
  top: -2em;
  border-radius: 50%;
  border-top: 6px solid red;
  animation: rotator 2s linear infinite;
  animation-direction: all;
  z-index: 9;
  opacity: 0;
}
#impact-container .userImpactChoice:before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  z-index: 9;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  75% {
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
#actualSword {
  width: 70px;
}
@media (max-width: 600px) {
  #actualSword {
    width: 60px;
  }
}

#actualSword {
  width: 70px;
}
@media (max-width: 600px) {
  #actualSword {
    width: 60px;
  }
}

#threeItemContainer {
  width: 92%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
@media (max-width: 600px) {
  #threeItemContainer .itemChoice {
    width: 33%;
  }
  #threeItemContainer .itemChoice h3 {
    font-size: 0.6em;
  }
}
#threeItemContainer .itemChoice img {
  height: 8em;
  width: 9em;
  object-fit: cover;
  transition: 200ms;
}
@media (max-width: 600px) {
  #threeItemContainer .itemChoice img {
    transform: scale(0.6);
  }
}
#threeItemContainer .itemChoice img:hover {
  transform: scale(1);
}

#petWalkContainer {
  position: absolute;
  left: -10%;
  width: 100%;
  bottom: 0;
}
#petWalkContainer #petWalking img {
  height: 8em;
  animation: walkingPet 22s infinite ease-in-out;
}

@keyframes walkingPet {
  0% {
    transform: translateX(-12vw);
  }
  100% {
    transform: translateX(110vw);
  }
}
#gameOver {
  position: absolute;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: black;
  opacity: 0.9;
}
#gameOver p {
  font-size: 4em;
}
#gameOver p span {
  color: red;
}
#gameOver .u-dead {
  font-size: 1em;
  margin-bottom: 8em;
}
#gameOver button {
  margin-bottom: 1em;
}

.background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

h1 {
  color: black;
  font-size: 5em;
  text-align: center;
  padding-top: 1em;
}
@media (max-width: 600px) {
  h1 {
    font-size: 3em;
  }
}

.home-main {
  display: flex;
  justify-content: space-around;
  margin: 4em auto 0;
}
.home-main button {
  min-width: 9em;
  transition: 200ms;
}
@media (max-width: 600px) {
  .home-main button {
    font-size: 0.9em;
  }
}
@media (max-width: 600px) {
  .home-main button {
    min-width: unset;
  }
}
.home-main button:hover {
  transform: scale(1.02);
}
.home-main .home-btn {
  background-color: black;
}

#saveBtnContainer {
  margin-top: 1em;
  display: flex;
  justify-content: center;
}

#changeName {
  margin-bottom: 1em;
  padding: 4px;
  color: black;
}

footer {
  display: flex;
  flex-direction: column;
  width: 16em;
  justify-content: space-around;
  margin: 12em auto 0;
  font-size: 0.7em;
}
@media (max-width: 600px) {
  footer {
    margin: 1em auto 0;
  }
}
footer #homeOptionsBtn {
  margin-bottom: 3em;
}
@media (max-width: 600px) {
  footer #homeOptionsBtn {
    margin-bottom: 1em;
  }
}

.header {
  display: flex;
  justify-content: space-between;
}

.main {
  width: 90%;
}
.main #charactersContainer {
  display: flex;
  justify-content: space-between;
  padding: 0 2em;
}
.main #dialogContainer {
  margin: 1.5em 0;
  min-height: 8.5em;
}
@media (max-width: 600px) {
  .main #dialogContainer {
    font-size: 0.9em;
  }
}
@media (max-width: 600px) {
  .main #dialogContainer .title {
    font-size: 0.9em;
  }
}
.main #userOptions {
  flex-direction: column;
}
@media (max-width: 600px) {
  .main #userOptions {
    font-size: 0.9em;
  }
}
.main #userOptions .options {
  color: white;
  width: 80%;
  max-width: 500px;
  margin-bottom: 1em;
}

.background1-1 {
  background: linear-gradient(90deg, #020024 0%, #030334 14%, black 100%);
}

main {
  max-width: 999px;
}

#portalsContainer {
  position: absolute;
  display: flex;
  justify-content: space-around;
  margin-top: 22em;
  width: 100%;
  height: 10em;
}
@media (max-width: 600px) {
  #portalsContainer {
    margin-top: 21em;
  }
}
#portalsContainer .entitiPortal img {
  width: 200px;
  object-fit: cover;
}
@media (max-width: 600px) {
  #portalsContainer .entitiPortal img {
    width: 100px;
  }
}

#entitiesContainer {
  position: absolute;
  display: flex;
  justify-content: space-around;
  top: 28em;
  width: 100%;
  height: 10em;
}
@media (max-width: 600px) {
  #entitiesContainer {
    top: 23em;
  }
}
#entitiesContainer .entitiesImg img {
  height: 220px;
}
@media (max-width: 600px) {
  #entitiesContainer .entitiesImg img {
    height: 143px;
  }
}

#lightContainer {
  position: absolute;
  display: flex;
  justify-content: space-around;
  top: 22em;
  width: 100%;
  max-width: 100%;
  height: 10em;
}
@media (max-width: 600px) {
  #lightContainer {
    top: 15em;
  }
}
#lightContainer .lightImg {
  transform: rotate(-90deg);
}

#sainRembrionContainer {
  position: absolute;
  display: flex;
  justify-content: space-around;
  top: 22em;
  width: 100%;
}
@media (max-width: 600px) {
  #sainRembrionContainer {
    top: 15em;
  }
}
#sainRembrionContainer img {
  transform: scale(2);
}
@media (max-width: 600px) {
  #sainRembrionContainer img {
    transform: scale(1);
  }
}

#storyOption {
  position: absolute;
  bottom: 6em;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 600px) {
  #storyOption {
    bottom: 2em;
  }
}
#storyOption .options {
  color: white;
  width: 100px;
}

@media (max-width: 600px) {
  #characterDialog {
    font-size: 0.8em;
  }
}
@media (max-width: 600px) and (max-width: 600px) {
  #characterDialog {
    min-height: 6em;
  }
}

#opponentContainer {
  animation: opponentMovement 15s infinite ease-in-out;
}
@media (max-width: 600px) {
  #opponentContainer {
    animation: opponentMovementMobile 15s infinite ease-in-out;
  }
}

#savorContainer img {
  transform: scale(1.8);
}
@media (max-width: 600px) {
  #savorContainer img {
    transform: scale(1);
  }
}
#savorContainer #petHeart {
  transform: scale(16) translate(-55%, -55%);
}
@media (max-width: 600px) {
  #savorContainer #petHeart {
    transform: scale(8) translate(-55, -55);
  }
}

#opponentLifeBar {
  width: 98%;
  max-width: 700px;
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 600px) {
  #opponentLifeBar {
    width: 90%;
  }
}

#divinilameFight {
  position: absolute;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9;
}

#teolameFight {
  position: absolute;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9;
}

#swordPerimter {
  cursor: none;
}

@keyframes opponentMovement {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(30%, 10%);
  }
  50% {
    transform: translate(-90%, 70%);
  }
  75% {
    transform: translate(-90%, 20%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
@keyframes opponentMovementMobile {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-55%, -55%);
  }
  50% {
    transform: translate(-46%, -56%);
  }
  75% {
    transform: translate(-46%, -45%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
#battleContainer {
  position: relative;
  width: 95%;
  max-width: 900px;
  height: 100vh;
  margin: 0 auto;
}
@media (max-width: 600px) {
  #battleContainer {
    font-size: 0.7em;
  }
}
#battleContainer #battleOpponentContainer {
  display: flex;
  justify-content: space-between;
  height: 35%;
  margin-bottom: 3em;
}
#battleContainer #battleOpponentContainer #battleOpponentLifeAndName {
  width: 40%;
  height: 50%;
  margin: 2em 0 0 2em;
}
@media (max-width: 600px) {
  #battleContainer #battleOpponentContainer #battleOpponentLifeAndName {
    padding: 0.5em;
  }
}
#battleContainer #battleOpponentContainer #battleOpponentLifeAndName #battleOpponentLife progress {
  height: 1.5em;
  width: 95%;
}
#battleContainer #battleOpponentContainer #battleOpponentImg {
  position: relative;
  width: 40%;
  min-width: 12em;
}
#battleContainer #battleOpponentContainer #battleOpponentImg img {
  width: 100%;
}
#battleContainer #battleOpponentContainer #battleOpponentImg .chevrette-atck-sprite {
  position: absolute;
  left: 0;
  top: 2em;
}
#battleContainer #battleChevretteContainer {
  display: flex;
  justify-content: space-between;
  height: 35%;
}
#battleContainer #battleChevretteContainer #battleChevretteLifeAndName {
  width: 40%;
  height: 50%;
  margin: 4em 2em 0 0;
  text-align: right;
}
@media (max-width: 600px) {
  #battleContainer #battleChevretteContainer #battleChevretteLifeAndName {
    padding: 0.5em;
  }
}
#battleContainer #battleChevretteContainer #battleChevretteLifeAndName #battleChevretteLife progress {
  height: 1.5em;
  width: 95%;
}
#battleContainer #battleChevretteContainer #battleChevretteImg {
  position: relative;
  width: 40%;
  min-width: 12em;
}
#battleContainer #battleChevretteContainer #battleChevretteImg img {
  width: 80%;
}
#battleContainer #battleChevretteContainer #battleChevretteImg .opponent-atck-sprite {
  position: absolute;
  top: -4em;
  right: -2em;
  transform: scale(2);
}
#battleContainer #battleChevretteAttackContainer {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  bottom: 0;
  height: 20%;
  width: 100%;
}
#battleContainer #battleChevretteAttackContainer button {
  width: 48%;
  margin: 0;
  margin-bottom: 1em;
  height: 45%;
}
#battleContainer #battleChevretteAttackContainer #OpponentMsg {
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.moon-chevrette {
  animation: moon-chevrette 120s infinite;
}

@keyframes moon-chevrette {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(25vh, 25vw) rotate(72deg);
  }
  20% {
    transform: translate(25vh, -22vw) rotate(144deg);
  }
  30% {
    transform: translate(45vh, 30vw) rotate(216deg);
  }
  50% {
    transform: translate(-10vh, 5vw) rotate(288deg);
  }
  70% {
    transform: translate(42vh, -5vw) rotate(360deg);
  }
  100% {
    transform: translate(0, 0);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Press Start 2P", cursive;
  font-weight: 500;
  scroll-behavior: smooth;
  color: white;
}

body {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff8f8f;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0px;
  box-shadow: inset 0px 0px 0px 0px #f0f0f0;
}

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