main.css

@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

div.gameContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 5px solid #c1950e;
  border-radius: 20px;
  padding: 5% 3%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100vh;
  width: 100vw;
  max-width: 56vh;
  max-height: 177vw;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../../photo/containerBg.jpg");
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../photo/containerBg.jpg");
  background-size: cover;
  color: #dcdcdc;
}

.gameContainer h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c1950e), to(red));
  background-image: linear-gradient(#c1950e, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 5vh;
  margin-bottom: 2%;
}

.titleWrapper {
  width: 100%;
  height: 90%;
}

.menu {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

#p1,
#p2 {
  height: 100%;
  width: 100%;
  -ms-flex-item-align: center;
      align-self: center;
}

.imageContainer {
  height: 100%;
}

.p1Info,
.p2Info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 45%;
  height: 100%;
}

#p1Name,
#p2Name {
  background-image: -webkit-gradient(linear, left top, right top, from(#733fa1), to(#e5adff));
  background-image: linear-gradient(to right, #733fa1, #e5adff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3vh;
  padding: 5px 0;
}

#p1Health,
#p2Health {
  font-size: 5vh;
  margin: 5% 0;
}

.playerControls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  height: 20%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.attackDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  height: 100%;
  margin: 5% 0 2% 0;
  font-size: 2vh;
}

.attackDiv button,
.healDiv button {
  font-size: 1.5vh;
}

.healDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  height: 100%;
  width: 100%;
  margin: 2% 0 5% 0;
  font-size: 2vh;
}

#attack {
  height: 80%;
  width: 35%;
  border-radius: 10px;
  padding: 3% 0;
  border: none;
  background: #1f9c6d;
  color: #dcdcdc;
  border: 2px solid #dcdcdc;
  outline: none;
  font-family: "Fira-sans", sans-serif;
  font-weight: 700;
}

#heal {
  height: 80%;
  width: 35%;
  border-radius: 10px;
  padding: 3% 0;
  border: none;
  background: #175f7a;
  color: #dcdcdc;
  border: 2px solid #dcdcdc;
  outline: none;
  font-family: "Fira-sans", sans-serif;
  font-weight: 700;
}

#attack:active {
  background: #dcdcdc;
  color: black;
  border: 2px solid #1f9c6d;
}

#heal:active {
  background: #dcdcdc;
  color: black;
  border: 2px solid #175f7a;
}

#result {
  font-size: 4vh;
  color: #3dff3d;
  height: 15%;
  margin-bottom: 3%;
}

#vs {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c1950e), to(red));
  background-image: linear-gradient(#c1950e, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vh;
  -ms-flex-item-align: center;
      align-self: center;
}

#reset,
#back,
#play {
  font-family: "Fira-sans", sans-serif;
  font-weight: 700;
  height: 20%;
  width: 45%;
  border-radius: 10px;
  background: #555a56;
  outline: none;
  color: #dcdcdc;
  font-size: 2vh;
  border: 2px solid #dcdcdc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

#back {
  background: #3e4943;
}

#play {
  background: #5e785d;
}

#play:hover {
  background: #dcdcdc;
  color: black;
  border: 2px solid #5e785d;
  -webkit-box-shadow: inset -1px -1px 10px 0px rgb(94, 120, 93);
          box-shadow: inset -1px -1px 10px 0px rgb(94, 120, 93);
}

#back:hover {
  background: #dcdcdc;
  color: black;
  border: 2px solid #3e4943;
  -webkit-box-shadow: inset -1px -1px 10px 0px rgb(62, 73, 67);
          box-shadow: inset -1px -1px 10px 0px rgb(62, 73, 67);
}

#reset:hover {
  background: #dcdcdc;
  color: black;
  border: 2px solid #555a56;
  -webkit-box-shadow: inset -1px -1px 10px 0px rgb(85, 90, 86);
          box-shadow: inset -1px -1px 10px 0px rgb(85, 90, 86);
}

.resultContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 35%;
  width: 90%;
}

#gameContainer.active h1,
#gameContainer.active #p1Health,
#gameContainer.active #p2Health {
  font-size: 8.88vw;
}
#gameContainer.active #vs,
#gameContainer.active #result {
  font-size: 7.08vw;
}
#gameContainer.active #p1Name,
#gameContainer.active #p2Name {
  font-size: 5.31vw;
}
#gameContainer.active .attackDiv,
#gameContainer.active .healDiv,
#gameContainer.active #reset,
#gameContainer.active #back,
#gameContainer.active #play,
#gameContainer.active #attack,
#gameContainer.active #heal {
  font-size: 3.54vw;
}

div.pickContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 5px solid #c1950e;
  border-radius: 20px;
  padding: 5% 3%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100vh;
  width: 100vw;
  max-width: 56vh;
  max-height: 177vw;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("./photo/containerBg.jpg");
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./photo/containerBg.jpg");
  background-size: cover;
  color: #dcdcdc;
}

.pickContainer h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c1950e), to(red));
  background-image: linear-gradient(#c1950e, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 5vh;
  margin-bottom: 2%;
}

.titleWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.playersWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
}

.vs {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c1950e), to(red));
  background-image: linear-gradient(#c1950e, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 4vh;
  padding: 0 2%;
}

.pickTitle {
  margin-top: 5%;
  margin-bottom: 5%;
  font-size: 2vh;
}

.player1Wrapper,
.player2Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}

.innerContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 5%;
}

#newHeroButton,
#newHeroButton2,
#searchButton,
#searchButton2 {
  font-size: 1.5vh;
  font-weight: 700;
  background-image: -webkit-gradient(linear, left top, right top, from(#e5adff), to(#733fa1));
  background-image: linear-gradient(to right, #e5adff, #733fa1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 0 2%;
  border: 1px solid #733fa1;
  border-radius: 5px;
}

#newHeroButton,
#newHeroButton2 {
  width: 90%;
  padding: 4px;
}

#searchInput,
#searchInput2 {
  font-size: 1.5vh;
  padding: 4px;
  border-radius: 5px;
  width: 75%;
}

#newHeroButton:hover,
#newHeroButton2:hover,
#searchButton:hover,
#searchButton2:hover {
  opacity: 0.6;
  cursor: pointer;
}

#heroImage,
#heroImage2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 8%;
}

#heroImage img,
#heroImage2 img {
  max-width: 95%;
  height: auto;
  -ms-flex-item-align: center;
      align-self: center;
  margin-top: 2%;
  margin-bottom: 5%;
}

#heroImage h2,
#heroImage2 h2 {
  background-image: -webkit-gradient(linear, left top, right top, from(#733fa1), to(#e5adff));
  background-image: linear-gradient(to right, #733fa1, #e5adff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 5px;
  padding-top: 5px;
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 3vh;
}

#heroImage2 p,
#heroImage p {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e5adff), to(#733fa1));
  background-image: linear-gradient(#e5adff, #733fa1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 3px;
  text-align: center;
  font-size: 2vh;
}

#heroImage p span,
#heroImage2 p span {
  background-image: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.nextButtons {
  width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nextButtons a {
  cursor: pointer;
  margin: 1% 0;
  font-size: 2vh;
}

#wrapper.active h1 {
  font-size: 8.88vw;
}
#wrapper.active .vs {
  font-size: 7.08vw;
}
#wrapper.active .buttons,
#wrapper.active #heroImage h2,
#wrapper.active #heroImage2 h2 {
  font-size: 5.31vw;
}
#wrapper.active .nextButtons a,
#wrapper.active .pickTitle,
#wrapper.active #heroImage2 p,
#wrapper.active #heroImage p {
  font-size: 3.54vw;
}
#wrapper.active #newHeroButton,
#wrapper.active #newHeroButton2,
#wrapper.active #searchButton,
#wrapper.active #searchButton2,
#wrapper.active #searchInput,
#wrapper.active #searchInput2 {
  font-size: 2.65vw;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "VT323", monospace;
  background-image: url("./photo/background.jpg");
  background-size: cover;
}

div.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 5px solid #c1950e;
  border-radius: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100vh;
  width: 100vw;
  max-width: 56vh;
  max-height: 177vw;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("./photo/containerBg.jpg");
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./photo/containerBg.jpg");
  background-size: cover;
  color: #dcdcdc;
}

div.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 10%;
  font-size: 3vh;
}

div.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5%;
}

a {
  font-family: "Fira-sans", sans-serif;
  color: #dcdcdc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 3% 0;
  padding: 3% 3%;
  text-decoration: none;
  border: 4px solid #dcdcdc;
  border-radius: 5px;
  background-color: transparent;
  outline: none;
  width: 75%;
  font-weight: 900;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

a:hover {
  background-color: #dcdcdc;
  color: black;
}

.container h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c1950e), to(red));
  background-image: linear-gradient(#c1950e, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 5vh;
}

.container h2 {
  margin-top: 2%;
  margin-bottom: 3%;
  font-size: 4vh;
}

.container h3 {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin: 2%;
  font-size: 2.5vh;
}

.wrapper.active h1 {
  font-size: 8.88vw;
}
.wrapper.active h2 {
  font-size: 7.08vw;
}
.wrapper.active h3 {
  font-size: 4.425vw;
}
.wrapper.active .buttons {
  font-size: 5.31vw;
}/*# sourceMappingURL=main.css.map */