@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
@keyframes skew-in {
  from {
    transform: translateX(0) skewX(0);
    opacity: 0;
  }
  to {
    transform: translateX(-60px) skewX(40deg);
    opacity: 0.6;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
}

html {
  font-size: 10px;
  color: white;
}

.hidden {
  display: none;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fade-in {
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}

.fade-out {
  animation: fade-out 1s;
  animation-fill-mode: forwards;
}

.fade-out-intro {
  animation: fade-out 4s;
  animation-fill-mode: forwards;
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
  z-index: 0;
}
body #set-img {
  border: 16px solid black;
  height: 100vh;
  z-index: 1;
}

#mirror {
  width: 650px;
  height: 750px;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  z-index: 2;
}
#battle-mirror {
  width: 650px;
  height: 750px;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  z-index: 40;
}
#battle-mirror h1 {
  font-size: 2.5rem;
}
#battle-mirror h2 {
  font-size: 2.2rem;
}
#battle-mirror h3 {
  font-size: 2rem;
}
#battle-mirror p {
  font-size: 1.9rem;
}
#battle-mirror img {
  z-index: 39;
}

#mirrorworld {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
#mirrorworld #narrator-div {
  padding: 4rem;
  padding-top: 6rem;
  grid-column: span 3;
  grid-row: 1/2;
}
#mirrorworld #narrator-div h2 {
  font-size: 2.3rem;
}
#mirrorworld #dialogue-div {
  padding: 4rem;
  grid-column: span 2;
  grid-row: 2/4;
  align-self: stretch;
}
#mirrorworld #dialogue-div h3 {
  font-size: 2.1rem;
  font-style: italic;
  line-height: 2.8rem;
}
#mirrorworld #stats-div {
  padding: 3rem;
  grid-column: 1/2;
  background-color: rgba(0, 0, 0, 0.479);
  grid-row: 4/7;
  align-self: end;
  padding-left: 6rem;
  padding-bottom: 6rem;
  font-size: 1.5rem;
}
#mirrorworld #stats-div h2 {
  font-size: 2rem;
}
#mirrorworld #advance-div {
  padding: 2rem;
  grid-column: 2/3;
  grid-row: 4/7;
  align-self: end;
}
#mirrorworld #character-div {
  align-self: end;
  grid-column: 3/4;
  grid-row: 2/7;
  margin: 0 3rem 3rem 0;
}
#mirrorworld #character-div #character {
  width: 100%;
}

button {
  width: 10rem;
  height: 4rem;
  margin: 3rem;
  background-color: black;
  color: white;
}

button:hover {
  color: black;
  background-color: white;
}

#intro {
  background: black;
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0.9;
  backdrop-filter: blur(20px);
  z-index: 50;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 4s ease-out;
}
#intro #title {
  position: relative;
  font-family: "Oswald", sans-serif;
  font-size: 15rem;
  color: white;
  z-index: 95;
  animation: fade-in 3s ease-in;
}
#intro #reflection {
  position: relative;
  bottom: 221px;
  font-family: "Oswald", sans-serif;
  font-size: 15rem;
  color: #939393;
  z-index: 90;
  animation: skew-in 6s linear;
  animation-fill-mode: forwards;
}
#intro button {
  position: relative;
  bottom: 200px;
  background-color: black;
  text-align: center;
  color: white;
  animation: fade-in 3s ease-in;
}
#intro button:hover {
  opacity: 1;
  color: black;
  background-color: white;
}

#opening-modal {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: black;
  width: 700px;
  height: 400px;
  border: 8px solid black;
  background: white;
  z-index: 20;
}
#opening-modal #opening-modal-div {
  width: 100%;
  padding: 2rem;
}
#opening-modal #opening-modal-div h2 {
  font-size: 2rem;
}
#opening-modal #opening-controls {
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
}

#modal-bkg {
  position: absolute;
  z-index: 30;
  height: 100vh;
  width: 100vw;
  background-color: rgba(17, 0, 71, 0.678);
  backdrop-filter: blur(15px);
}

#minigame-window {
  width: 800px;
  height: 500px;
  border: 8px solid black;
  background: white;
  z-index: 31;
  color: black;
  text-align: center;
}
#minigame-window h1 {
  font-size: 4rem;
}
#minigame-window h2 {
  font-size: 3rem;
}
#minigame-window p {
  font-size: 1.5rem;
}
#minigame-window #minigame-knowledge {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}
#minigame-window #minigame-knowledge #minigame-text {
  line-height: 4rem;
}
#minigame-window #minigame-knowledge #minigame-text h3 {
  font-size: 2rem;
  margin-top: 3rem;
}
#minigame-window #minigame-knowledge #minigame-controls #minigame-input {
  height: 4rem;
  width: 20rem;
  font-size: 2rem;
}
#minigame-window #minigame-knowledge #minigame-controls #text-warning {
  margin-top: 2rem;
  font-size: 1rem;
}
#minigame-window #minigame-knowledge #minigame-controls #minigame-next {
  position: absolute;
  bottom: 1rem;
  right: 0;
}
#minigame-window #weapon-upgrade-div {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

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