* {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
form {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 15%;
  left: 53%;
}
td, th {
  border: min(0.052svw, 0.11svh) solid black;
}
#body {
  background-image: url("bgMainPage.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-attachment: fixed;
  background-size: cover;
}
/* обнова переименовал */
#waiting {
  display: none;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 3%;
  width: 99.99svw;
}
/* обнова */
#wait1 {
  display: none;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  width: 15.625svw;
  height: 6.59svh;
  background-color: purple;
  border-radius: 7px;
  border: white min(0.104svw, 0.22svh) solid;
}
#wait2 {
  display: none;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  background-color: purple;
  padding: min(0.521svw, 1.099svh) min(0.3125svw, 0.659svh);
  border-radius: 7px;
  border: white min(0.104svw, 0.22svh) solid;
}
#wait2 > button {
  font-family: monospace;
  font-size: min(1.042svw, 2.2svh);
}
.dot {
    position: relative;
    color: whitesmoke;
    font-family: monospace;
    font-size: min(1.042svw, 2.2svh);
    font-weight: 600;
    clip-path: inset(0 3ch 0 0);
    animation: hideDot 2s steps(4) infinite;
}
@keyframes hideDot {
    to {
        clip-path: inset(0 -1ch 0 0)
    }
}

#divLegend {
  display: flex;
  align-items: center;
  justify-content: center;
}
#divLegend button {
  font-size: min(0.833svw, 1.76svh);
  font-weight: 600;
  border: 1px solid white;
  color: white;
  position: relative;
  z-index: 3;
}
#trialFight {
  display: none;
  background-color: rgb(16, 189, 25);
}
#buttLegend {
  background-color: black;
}
#stage2 {
  display: none;
  background-color: red;
}
#pvp {
  display: none;
  background-color: rgb(148, 6, 148);
}
#modalBG {
    display: none;
    /* display: flex; */
    flex-direction: column;
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
}
#modalChoice {
    display: flex;
    flex-direction: column;
    background-color: yellow;
    margin: 2% auto; 
}
#modalChoice button {
    margin: 3px;
    font-size: min(1.04svw, 2.2svh);
    font-weight: 600;
}
#modalChoice button:nth-child(1) {
  color: red;
}
#modalChoice button:nth-child(2) {
  color: green;
}
#modalChoice button:nth-child(3) {
  color: blue;
}

#top {
  visibility: hidden;
  font-size: min(0.806svw, 1.7svh);
  text-align: center;
  position: absolute;
  top: 0%;
  right: 0%;
  transition-property: opacity, visibility;
  transition-duration: 1s;
  opacity: 1;
  border-spacing: min(0.104svw, 0.22svh);
}
#top th, #top td { 
  font-family: Pacifico;
  padding: min(0.715svh, 0.5svw);
  /* 5px */
  border-radius: min(0.26svw, 0.55svh);
}
#top tr {
  color: #F5FDFF;
  background-color: rgba(56, 138, 254, 0.84);
}
#tr1 th {
  font-size: min(1.1375svw, 2.4svh);
}
#tr1 th:nth-child(1) {
  width: 15%;
}
#top2 {
  visibility: hidden;
  font-size: min(0.806svw, 1.7svh);
  text-align: center;
  position: absolute;
  top: 0%;
  right: 0%;
  transition-property: opacity, visibility;
  transition-duration: 1s;
  opacity: 0;
  border-spacing: min(0.104svw, 0.22svh);
}
#top2 th, #top2 td { 
  font-family: Pacifico;
  padding: min(0.715svh, 0.5svw);
  /* 5px */
  border-radius: min(0.26svw, 0.55svh);
}
#top2 tr {
  color: #F5FDFF;
  background-color: rgba(56, 138, 254, 0.84);
}
#tr2 th {
  font-size: min(1.1375svw, 2.4svh);
}
#tr2 th:nth-child(1) {
  width: 15%;
}
.lb {
  font-size: min(1.66svw, 3.5svh);
  color: #004272;
}
.pacifico {
  color: #F5FDDF;
  font-family: Pacifico;
}
#image-legend {
  background-image: url("black.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: cover;
  position: fixed;
  display: block;
  visibility: hidden;
  right: 0%;
  top: 0%;
  width: 44%;
  height: 99%;
}
#image-legend > div {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0%;
  justify-content: center;
  align-items: end;
}
#image-legend > span {
  display: block;
  overflow-y: auto;
  scrollbar-color: #696767 #000000;
  scrollbar-width: thin;
  position: relative;
  height: 80%;
  width: 87%;
  left: 10%;
  top: 9%;
}
#image-legend span > p > span {
  color: red;
}
#image-legend span > p {
  margin-right: 2.6vw;
  color: white;
  font-size: 16px;
  line-height: 22.7px;
  text-align: justify;
  text-indent: 28px;
}
#image-legend button {
  position: relative;
  left: 30%;
  top: 5%;
  font-size: 2vh;
}
#advice {
  display: flex;
  flex-direction: column;
  position: absolute;
  visibility: hidden;
  width: 47.4%;
  font-size: min(0.755svw, 1.6svh);
  line-height: min(0.948svw, 2svh);
  font-weight: 600;
  text-align: justify;
  border: 0.2vw solid red;
  background-color: white;
  color: blue;
  padding: 0.5vw 1.5vw;
}
p:first-child {
  color: black;
  text-align: center;
}
#xButt {
  position: absolute;
  top: 1%;
  right: 0.3%;
  color: grey;
  font-size: min(1.04svw, 2.2svh);
}
#xButt:hover {
  cursor: pointer;
  color: white;
  background-color: rgb(248, 69, 24);
}
#pokedex {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 624px;
  height: 445px;
}
#pokedex::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("Покедекс.png");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.85;
}
.forStats {
  z-index: 2;
  position: absolute;
  visibility: hidden;
  top: 31%;
  left: 12.3%;
  width: 180px;
  height: 120px;
  color: white;
}
.forStats th, .forStats td {
  border-width: 0;
}
#stats1 {
  visibility: visible;
}
#stats2 {
  visibility: hidden;
}
#stats2 table {
  position: absolute;
  top: 16%;
  height: auto;
}
#stats3 {
  visibility: hidden;
  font-size: 11px;
}
#stats3 tr :nth-child(1) {
  width: 30%;
}
.forStats table {
  position: absolute;
  width: 100%;
  height: 100%;
}
.forStats span {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  color: yellow;
}
#nickname {
  vertical-align: top;
}
#controlArrows {
  display: none;
  position: absolute;
  top: 72.5%;
  left: 33.9%;
  width: 70px;
  height: 70px;
  /* border: white 1px solid; */
}
#controlArrows > span {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
}
#controlArrows > :nth-child(1) {
  justify-content: start;
}
#controlArrows > :nth-child(2) {
  justify-content: end;
}
#leftArrow {
  justify-content: end;
}
.arrows {
  z-index: 10;
  display: flex;
  align-items: center;
  width: 35%;
  height: 25%;
  color: white;
  font-size: 24px;
}
.arrows i::before {
  position: relative;
  z-index: -1;
}
#password_div, #login_div {
  position: absolute;
  font-size: 12px;
}
#login_div {
  bottom: 64%;
  left: 20%;
}
#password_div {
  bottom: 51.5%;
  left: 20%;
}
input#username {
  width: 162px;
  height: 15.33px;
}
input#pass {
  width: 162px;
  height: 15.33px;
}
#btn {
  color: black;
  font-size: 18px;
  font-weight: 600;
  bottom: 6.7%;
  left: 15%;
  height: 32px;
  position: absolute;
  width: 84px;
  background-color: rgb(243, 243, 243);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
}
#btn:disabled {
  color: whitesmoke;
  background-color: gainsboro;
}
#divButtPick {
  display: none;
  position: absolute;
  height: 41px;
  width: 92px;
  top: 82.7%;
  left: 14%;
}
#divButtPick button {
  color: black;
  border: 0;
  background-color: rgb(0,197,125);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
#maxPlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: -1;
  position: absolute;
  right: 0%;
  bottom: 0%;
}
#figure {
  position: relative;
}
#soundName {
  color: red;
  -webkit-text-stroke: 0.02svh white;
  font-weight: 600;
  font-size: 18px;
}
#group {
  position: relative;
  bottom: 0.5%;
  right: 0.5%;
}
#group img {
  width: 25.26svw;
}

@media(max-width: 980px){
  #legend {
    font-size: 13.6px;
    left: 41%;
  }
  #image-legend button {
    left: 25.5%;
  }
  #advice {
    font-size: 2.1vh;
    line-height: 2.6vh;
  }
  #pokedex {
    width: 530.4px;
    height: 378.25px;
  }
  .forStats {
    left: 11.3%;
    width: 158px;
    height: 102px;
  }
  #stats1, #stats2 {
    font-size: 14.4px;
  }
  #stats3 {
    font-size: 9.9px;
  }
  #controlArrows {
    width: 59.5px;
    height: 59.5px;
  }
  .arrows {
    font-size: 20.4px;
  }
  #password_div, #login_div {
    font-size: 10.2px;
  }
  #login_div {
    bottom: 68.5%;
    left: 17%;
  }
  #password_div {
    bottom: 58%;
    left: 17%;
  }
  input#username {
    width: 137.7px;
    height: 13.03px;
  }
  input#pass {
    width: 137.7px;
    height: 13.03px;
  }
  input, label {
    margin-top: 1px;
  }
  #btn {
    font-size: 14.8px;
    bottom: 20%;
    left: 13.3%;
    height: 27.4px;
    width: 71.4px;
  }
 #divButtPick {
    top: 82.8%;
    left: 13.8%;
    height: 35px;
    width: 79.9px;
  }
  #divButtPick button {
    font-size: 14.45px;
  }
}
input[type='submit'],
label {
  color: white;
  display: block;
  margin-top: 8px;
}
/* cyrillic */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Pacifico font ru.woff2') format('woff2');
  /* src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6D6MmTpA.woff2) format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Pacifico font eng.woff2') format('woff2');
  /* src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2'); */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}