.section_neutral {
  background-image: url('../images/bg_hero.jpg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.block_aura {
  mix-blend-mode: screen;
  height: 70%;
}

.aura {
  height: 100%;
}

.block_chara {
  z-index: 2;
  aspect-ratio: 1;
  mix-blend-mode: screen;
  height: 65%;
  position: absolute;
}

.chara1 {
  height: 100%;
}

.bg_stars {
  opacity: .46;
  mix-blend-mode: lighten;
  background-image: url('../images/stars1.gif');
  background-position: 0 0;
  background-size: auto 700px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.section_study {
  background-image: url('../images/bg_hero.jpg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: none;
  position: relative;
}

.chara2 {
  height: 100%;
}

.block_chara2 {
  z-index: 2;
  aspect-ratio: 1;
  mix-blend-mode: screen;
  height: 55%;
  position: absolute;
}

.section_gym {
  background-image: url('../images/bg_hero.jpg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: none;
  position: relative;
}

.block_chara_3 {
  z-index: 2;
  aspect-ratio: 1;
  mix-blend-mode: screen;
  height: 65%;
  position: absolute;
}

.chara3 {
  height: 100%;
}

.header {
  z-index: 50;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.block_socials {
  justify-content: flex-end;
  align-items: center;
  margin: 25px;
  display: flex;
}

.block_button {
  width: 50px;
  height: 52px;
  margin-left: 10px;
  box-shadow: 0 2px 20px 1px #e4f6fc80;
}

.block_button:hover {
  box-shadow: 0 2px 20px 1px #e4f6fc;
}

.x {
  background-color: #9dcceb;
  background-image: url('../images/x.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px solid #fff;
  border-bottom-width: 6px;
  border-radius: 3px;
  width: 100%;
  height: 100%;
}

.x:hover {
  border-top-width: 6px;
  border-bottom-width: 2px;
}

.ca {
  background-color: #9dcceb;
  border: 2px solid #fff;
  border-bottom-width: 6px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  padding: 0 50px;
  font-family: Changa One, Impact, sans-serif;
  font-size: 20px;
  line-height: 20px;
  display: flex;
}

.ca:hover {
  border-top-width: 6px;
  border-bottom-width: 2px;
}

.pf {
  background-color: #9dcceb;
  background-image: url('../images/pf.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 80%;
  border: 2px solid #fff;
  border-bottom-width: 6px;
  border-radius: 3px;
  width: 100%;
  height: 100%;
}

.pf:hover {
  border-top-width: 6px;
  border-bottom-width: 2px;
}

.block_logo {
  margin: 25px;
}

.logo {
  height: 90px;
}

.block_ca {
  z-index: 50;
  width: auto;
  height: 52px;
  margin: 25px;
  position: relative;
  inset: auto auto 0% 0%;
  box-shadow: 0 2px 20px 1px #e4f6fc80;
}

.block_ca:hover {
  box-shadow: 0 2px 20px 1px #e4f6fc;
}

.dex {
  background-color: #9dcceb;
  background-image: url('../images/dex.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border: 2px solid #fff;
  border-bottom-width: 6px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font-family: Changa One, Impact, sans-serif;
  font-size: 22px;
  line-height: 22px;
  display: flex;
}

.dex:hover {
  border-top-width: 6px;
  border-bottom-width: 2px;
}

.section_ca {
  z-index: 50;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.ca_mobile {
  background-color: #9dcceb;
  border: 2px solid #fff;
  border-bottom-width: 6px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  padding: 0 50px;
  font-family: Changa One, Impact, sans-serif;
  font-size: 20px;
  line-height: 20px;
  display: none;
}

.ca_mobile:hover {
  border-top-width: 6px;
  border-bottom-width: 2px;
}

.section_welcome {
  z-index: 1000;
  background-color: #04030c;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.logo_welcome {
  height: 130px;
  position: relative;
}

.block_enter {
  z-index: 50;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 52px;
  margin: 25px;
  display: flex;
  position: static;
  inset: auto auto 0% 0%;
  box-shadow: 0 2px 20px 1px #e4f6fc80;
}

.block_enter:hover {
  box-shadow: 0 2px 20px 1px #e4f6fc;
}

.button_enter {
  background-color: #9dcceb;
  border: 2px solid #fff;
  border-bottom-width: 6px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  padding: 0 50px;
  font-family: Changa One, Impact, sans-serif;
  font-size: 20px;
  line-height: 20px;
  display: flex;
}

.button_enter:hover {
  border-top-width: 6px;
  border-bottom-width: 2px;
}

@media screen and (max-width: 991px) {
  .block_aura {
    height: 600px;
  }

  .block_chara {
    height: 650px;
  }

  .section_study {
    display: flex;
  }

  .block_chara2 {
    height: 600px;
  }

  .section_gym {
    display: flex;
  }

  .block_chara_3 {
    height: 600px;
  }

  .block_socials {
    margin: 40px;
  }

  .ca {
    display: none;
  }

  .ca_mobile, .button_enter {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .block_aura {
    height: 380px;
  }

  .block_chara {
    height: 450px;
  }

  .block_chara2 {
    height: 400px;
  }

  .block_chara_3 {
    height: 450px;
  }
}

@media screen and (max-width: 479px) {
  .block_aura {
    height: 200px;
  }

  .block_chara {
    height: 450px;
  }

  .header {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .block_socials {
    justify-content: center;
    align-items: center;
    margin: -28px 0 0;
  }

  .block_button {
    width: 40px;
    height: 42px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .logo {
    height: 70px;
  }

  .logo_welcome {
    height: 120px;
  }
}