* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  transition: 500ms;
}
:root {
  --black: #030303;
  --red: #710707;
  --yellow: #edf948;
  --gray: #616161;
  --light-gray: #a1a1a1;
  --white: #ffffff;
}
html {
  scroll-behavior: smooth;
}
html::-webkit-scrollbar {
  display: none;;
}
body {
  background-color: var(--gray);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
header {
  position: fixed;
  top: 0;
  background-color: var(--black);
  border-radius: 0 0 25% 25%;
  height: 100px;
  width: 100%;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
nav {
  color: var(--white);
  font-size: 2rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 50%;
}
.header-menu {
  cursor: pointer;
  margin: 0 15px;
  color: var(--white);
}
.header-menu:hover {
  color: var(--yellow);
}
#menu-start {
  flex-grow: 1;
}
section {
  position: absolute;
  top: 140px;
  left: 5vw;
  width: 90vw;
  border: 3px var(--black) solid;
  height: 80%;
}
.setting, .fight {
  display: none;
}
h3 {
  color: var(--black);
  font-size: 2em;
  font-weight: 500;
}
/* ----------------------------------------------- start ----------------------------------------------- */
.start {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 6;
}
.input-name, .input-setting-name {
  height: 1.2em;
  font-size: 0.8em;
}
.chouse-fighter {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 500px;
}
.chouse-fighter-button {
  padding: 10px 20px;
  margin: 0 10px;
  background-color: var(--light-gray);
  border: 2px black solid;
  border-radius: 10px;
  cursor: pointer;
}
.chouse-fighter-button-active {
  background-color: var(--yellow);
  border: 2px rgb(251, 251, 251) solid;
}
.chouse-fighter-img {
  margin-top: 20px;
  width: 200px;
  height: 250px;
}
.start-button {
  padding: 10px 20px;
  margin: 10px;
  background-color: var(--light-gray);
  border: 2px var(--black) solid;
  border-radius: 10px;
  cursor: pointer;
}
/* ----------------------------------------------- main ----------------------------------------------- */
.main {
  display: flex;
  justify-content: center;
  align-items: center;
}
.div-fight {
  padding: 10px;
  cursor: pointer;
  font-size: 2em;
  border: 2px black solid;
}
.div-fight:hover {
  border: 2px var(--yellow) solid;
  color: var(--yellow);
}
/* ----------------------------------------------- profile ----------------------------------------------- */
.profile {
  display: flex;
}
.profile-box {
  width: 50%;
  height: 100%;
}
.profile-left, .profile-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-name {
  margin: 25px;
}
.profile-img {
  width: 204px;
  height: 254px;
  border: 2px var(--black) solid;
}
.profile-score {
  width: 200px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.profile-score span {
  width: 50%;
  font-size: 1.1em;;
}
.frofile-wins, .frofile-loose {
  color: var(--yellow);
  text-align: end;
}
h4 {
  margin: 15px 0;
  font-size: 1.5em;
  color: var(--yellow);
}
.profile-classes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 15px 15px 0;
}
.profile-classes-card {
  color: var(--white);
  width: 104px;
  text-align: center;
  cursor: pointer;
}
.profile-classes-card:hover {
  color: var(--yellow);
}
.profile-classes-card:hover .profile-classes-card-img{
  border: 2px var(--yellow) solid;
}
.profile-classes-card-img {
  width: 104px;
  height: 127px;
  border: 2px var(--black) solid;
  background-size: 100%;
}
/* ----------------------------------------------- setting ----------------------------------------------- */
.setting {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.setting-change {
  border: 2px var(--black) solid;
  margin: 15px;
  padding: 7px;
  cursor: pointer;
}
.setting-change:hover {
  border: 2px var(--yellow) solid;
  color: var(--yellow);
}
.settig-popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--gray);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.input-setting-ok {
  border: 2px var(--black) solid;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
}
.cheat-setting {
  position: absolute;
  width: 100%;
  bottom: 5px;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: space-around;
}
.cheat-setting-div {
  font-size: 18px;
  border: 1px var(--black) solid;
  padding: 2px;
  cursor: pointer;
}
/* ----------------------------------------------- fight ----------------------------------------------- */
.fight {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.fight-log {
  width: 100%;
  height: 200px;
  margin: 5px 10px;
  background-color: var(--light-gray);
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}
.fight-div {
  max-height: 350px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fight-img-enemy, .fight-img {
  width: 204px;
  height: 254px;
  border: 2px var(--black) solid;
}
.fight-hp-bar {
  width: 204px;
  height: 24px;
  border: 2px var(--black) solid;
  margin-top: 10px;
  background-color: var(--white);
  text-align: center;
  position: relative;
}
.fight-hp-enemy, .fight-hp {
  height: 21px;
  background-color: var(--red);
  position: absolute;
  top: 0;
  left: 0;
}
.fight-div h3 {
  text-align: center;
}
.combat-menu-content {
  display: flex;
}
.fight-div p{
  text-align: center;
  margin-bottom: 10px;
}
.combat-menu-attack {
  width: 150px;
  border-right: 1px var(--black) solid;
  padding-right: 5px;
}
.combat-menu-defense {
  width: 150px;
  border-left: 1px var(--black) solid;
  padding-left: 7px;
}
.menu-div {
  display: flex;
  justify-content: space-between;
  margin: 9px 0;
  font-size: 20px;
}
.run-fight {
  padding: 10px 15px;
  font-size: 1.5em;
  border: 2px var(--black) solid;
  color: var(--black);
  cursor: pointer;
  margin-top: 20px;
}
.run-fight-active {
  border: 2px var(--yellow) solid;
  color: var(--yellow);
}
/* ----------------------------------------------- pop-ups fight ----------------------------------------------- */
.screen {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  font-size: 8em;
  text-align: center;
}
.win {
  color: var(--yellow);
}
.loose {
  color: var(--red);
}
/* ----------------------------------------------- other ----------------------------------------------- */
.paladin {
  background: url(https://sun9-87.userapi.com/s/v1/ig2/bwtpUQNpBZFQMMMIcH4FbeCB6CfVFsAaT8QI-UzEM5n_gnu_3YhW6vvIgPBoy9e-JFU_-0pto6-B1wDoSJmzCFNf.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.ranger {
  background: url(https://sun9-84.userapi.com/s/v1/ig2/m34gE2jTY9Hx_n7gJGVHaVgNEtk8dSF4XXyxMx-MdEBntQfSLLiRXH-9wytkFnxHdaxMBLHwv06yMlhL_JfR-Sv6.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.fighter {
  background: url(https://sun9-55.userapi.com/s/v1/ig2/d80evbs6GPtnaQ9At1jE50kqWBpdm-qaZ75dnhVSwNSILmtq_M7tEl8Wg9Cmbt0PHBL8VoDYK44a4YkKyPqIyE2W.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.artificer {
  background: url(https://sun9-42.userapi.com/s/v1/ig2/XXZ9gvcyo8_ugIaNz6uk-4NYOv20QfsKAJ_QED7DlQ4ykbroi4QaWL8xKzOUhbHZS-QORSOH0VmuBCIdrpOIy9pN.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.barbarian {
  background: url(https://sun9-13.userapi.com/s/v1/ig2/pEJtsXwa8rkP7pmtciurYtBiZQRcvWA-3vTZLz3M9DKvjCM-8hY-DWctAfW6TxxMrzJedKVa-bAc_NMdvorLd_zx.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.bard {
  background: url(https://sun9-58.userapi.com/s/v1/ig2/iStgN_1gilKMRog7JByiKmVvlK_P3dNy9RSILLkFvXmmzDlE4v5ZiO3uiVm-hX8GR-HJN4O8dl2fzXMVIzmXwxlw.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.cleric {
  background: url(https://sun9-20.userapi.com/s/v1/ig2/2Y8CU4vmNIDNpg3HVnfsXUbUPFNyI2FY1TBWHDsPon_ARpdBHqWf6VNU9xaAArkFXMtXwiww857xp6JSIXuN5P5v.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.druid {
  background: url(https://sun9-52.userapi.com/s/v1/ig2/RvmiiciXu8DgVzeamtlkAXg5WDPuQKRAZWcJTeY8U5B7k78_RAdrDAbEq_Ps2ZQcpgGTDaCwD107GtpqNpUFjsLh.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.monk {
  background: url(https://sun9-73.userapi.com/s/v1/ig2/aHOjwQWnduM8GbLIMIQoQ6q6G6YLt0ulCl4X_j14zMJO0mU1QVuSDWGCVzhZNMfUrwsqMLDGzy6G_OkYOkXGc_oU.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.rouge {
  background: url(https://sun9-40.userapi.com/s/v1/ig2/TqsXCTtyBYI9dTYZyuxZk1xUP20HL1TaOE_qnxO9G0Y_NgqVzVtcd57_dUNWI6Nf9j29IpRdT-lXS5yQVCbzFlS2.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.sorcerer {
  background: url(https://sun9-57.userapi.com/s/v1/ig2/Slbx9noz4yjbYUumq_jMkWERAk-Q8kzShEmThB-jo6FAT45JNb33k0mAYGG9YVDsjeZtz9JHEFdY1Twmc-YI6uwh.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.warlock {
  background: url(https://sun9-3.userapi.com/s/v1/ig2/1mhhXEEiy-sayOzryEmsUBMFBlT8mwAMLbqnu5kG40l_cRmoWMAt-FpwebWTXqTNhMOv962p-9h6hVv68VjW5mPJ.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.wizard {
  background: url(https://sun9-57.userapi.com/s/v1/ig2/oxWxSt2H7uNzIxE2KGxENlUdhtyVt2NZ7vS9GwY0KzcRmAO14wDc_3qHbQVXGnkO8CSJUzPeQGPBPielcTvYPdCP.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.goblin {
  background: url(https://sun9-72.userapi.com/s/v1/ig2/kw5P12IM6XMIAFVBOS51ckMQ-xG9lvgy3aZ5RantZa49wBXvRdzhA-UQUiHfUyyP1Zy17dWhRC9W7iQvuGgd1LX-.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.orc {
  background: url(https://sun9-37.userapi.com/s/v1/ig2/2jdWmZyfqBfJ2Sbnmw-9owQ6tQhMPRqn8bWrZz61sP76p2bA3xYSHCSh7pl8YTJnXpjJyqRlKnSU-UujVCmuwDe_.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.knight {
  background: url(https://sun9-36.userapi.com/s/v1/ig2/kHzK_8j8kg0_GSIC3NtAne-zLxhP7kP4mT0zH__-6XFtDnbiF3IyRcsNNRwEa9FGAK8FaTaSY4ThVDH7ezSm8K0o.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.bandit {
  background: url(https://sun9-53.userapi.com/s/v1/ig2/cvQ18or4iBlJpd1CVnqBRALYgnX1YZ-hdDYjatcbdNNjbgLoU3k17AxyhYoB6okqWHKyWP7H8oxV4FLXXO856OUU.jpg?quality=95&as=32x40,48x60,72x90,108x135,160x200,200x250&from=bu&cs=200x0) no-repeat;
  background-size: 100%;
  background-position: center;
}
.over-left {
  left: -100vw;
}
.over-top {
  top: -50vw;
}
.hidden {
  display: none;
}