@import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap");

ul {
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
  padding: 0;
  background-color: bisque;
}
ul li {
  list-style: none;
  width: 10.4vw;
  border-radius: 10%;
}
ul li a {
  display: block;
  padding: 0.5vh;
  text-align: center;
  color: black;
  transition: 0.5s;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.9vh;
  letter-spacing: 1px;
}

.slide {
  position: absolute;
  width: 10.4vw;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #E0B179;
  z-index: -1;
  transition: 0.5s;
  opacity: 0;
  border-radius: 10%;
}

ul li.active a {
  color: #262626;
}

ul li:nth-child(1).active ~ .slide {
  left: 0;
  opacity: 1;
}

ul li:nth-child(2).active ~ .slide {
  left: 21.3vh;
  opacity: 1;
}

ul li:nth-child(3).active ~ .slide {
  left: 42.6vh;
  opacity: 1;
}

@font-face {
  font-family: Pufony;
  src: url(../files/Pufony-1.otf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

html {
  font-size: 1.5vh;
  font-family: "Press Start 2P", cursive;
  background-color: bisque;
}

.ch_lng {
  font-family: "Noto Sans SC", sans-serif;
}

.ch_size1 {
  font-size: 2vh;
}

body {
  min-width: 41vw;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

header,
footer {
  width: inherit;
  min-width: inherit;
  overflow-x: hidden;
  background-color: #E0B179;
}

header nav.header-nav {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5vh; /* Space between logo and text */
  padding: 2vh;
}

header .header-logo {
  height: 5.5vh; /* Slightly larger than h1 font-size for prominence */
  width: auto; /* Maintains original aspect ratio */
  max-height: 90%; /* Prevents overflow */
}

header h1,
footer h1 {
  font-size: 4.3vh;
  letter-spacing: 0.5vh;
  margin: 0; /* Remove default margin for alignment */
}

header {
  top: 0;
}

footer {
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.2vh;
  justify-content: space-between;
}

footer .autor {
  display: flex;
  align-items: center; /* Align logo and text vertically */
  gap: 1vh; /* Space between logo and text */
  padding: 2.2vh 0vh 0vh 0vh;
  font-size: 2.7vh;
  color: black;
  text-decoration: none;
  font-family: Pufony;
}

footer .autor a {
  color: black;
  text-decoration: none;
}

footer .autor a:hover {
  color: #A87B45; /* Hover color to match button active states */
}

footer .autor b {
  text-align: center;
}

footer .autor:hover {
  font-size: 3vh;
  transition: all 0.4s ease;
}

footer .footer-logo {
  height: 2.7vh; /* Matches autor font-size for consistency */
  width: auto; /* Maintains original aspect ratio */
  max-height: 90%; /* Prevents overflow */
}

main {
  flex-grow: 1;
  padding: 2.1vh;
  min-height: 76vh;
}

main .main-header {
  max-width: 39vw;
  margin: auto;
  justify-content: center;
  align-items: center;
}

main .main-header .notice {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 4.3vh;
}

@media (min-width: 320px) and (max-width: 850px) {
  main .main-header .notice {
    margin-top: 2.3vh;
    margin-bottom: 2vh;
  }
}

main .welcome_text {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 2.1vh;
  border: #000000 2px solid;
  border-radius: 2%;
  box-shadow: 0px 1px 3px black;
  line-height: 4.2vh;
}

@media (min-width: 619px) and (max-width: 640px) {
  main .welcome_text {
    padding: 1.5vh;
  }
}

@media (min-width: 510px) and (max-width: 540px) {
  main .welcome_text {
    padding: 1vh;
  }
}

@media (min-width: 360px) and (max-width: 509px) {
  main .welcome_text {
    padding: 1vh;
    line-height: 3.2vh;
    font-size: 0.7rem;
  }
}

@media (min-width: 320px) and (max-width: 359px) {
  main .welcome_text {
    padding: 1vh;
    line-height: 2.2vh;
    font-size: 0.6rem;
  }
}

main .the_start_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 22vh;
  line-height: 2.2vh;
}

main .the_start_button .start_btn {
  text-align: center;
  padding: 3.2vh 2.1vh;
  margin-top: 5.3vh;
  background-color: #E0B179;
  border: #000000 2px solid;
  border-radius: 2%;
  box-shadow: 0px 1px 3px black;
  text-decoration: none;
  color: black;
  font-size: 1.7vh;
  text-transform: uppercase;
}

main .the_start_button .start_btn__ch {
  font-size: 2vh;
}

main .the_start_button .start_btn:hover {
  font-size: 1.8vh;
  transition: all 0.4s ease;
}

main .the_start_button .start_btn__ch:hover {
  font-size: 2.1vh;
}

main .the_start_button .start_btn:active {
  background-color: #765C3D;
}

@media (min-width: 320px) and (max-width: 525px) {
  main .the_start_button .start_btn {
    padding: 3.2vh 2.1vh;
    margin-top: 5.3vh;
    font-size: 1.5vh;
    padding: 1.6vh 1.5vh;
  }
  main .the_start_button .start_btn:hover {
    font-size: 1.6vh;
  }
}

main .enemies {
  display: flex;
  margin-bottom: 6%;
  align-items: center;
  justify-content: center;
  max-width: 39vw;
}

main .enemies .enemy {
  background-image: url(../img/Muffin-Boss-Long.gif);
  background-repeat: no-repeat;
  background-size: contain;
  width: 180px;
  height: 180px;
}

main .enemies .enemy_muf_gif,
main .enemies .enemy_mil_gif {
  width: 160px;
  height: 160px;
}

main .enemies .enemy_mul_gif {
  width: 200px;
  height: 200px;
}

main .enemies .enemy-text {
  margin-left: 3.2vh;
  text-align: center;
}

main .enemies .enemy-text h2 {
  margin-bottom: 1vh;
}

main .enemies .enemy-text p {
  line-height: 2.7vh;
}

main .area-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6%;
}

main .area-wrapper #area {
  width: 32vh;
  height: 32vh;
  display: flex;
  flex-wrap: wrap;
}

main .area-wrapper #area .box {
  width: 10.6vh;
  height: 10.6vh;
  background-color: blanchedalmond;
  border: 2px solid black;
  box-sizing: border-box;
  font-size: 3.6vh;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 5%;
  border-color: #42231e;
  border-width: 3px;
  box-shadow: 0px 1px 5px black;
}

main .area-wrapper #area .box:hover {
  background-color: #E0B179;
}

main .area-wrapper #area .box:active {
  background-color: #765C3D;
}

main .thebuttons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

main .thebuttons ul {
  position: relative;
  transform: translate(0, 0); /* Override the default ul transform */
  display: flex;
  justify-content: center;
  align-items: center;
}

main .thebuttons ul li {
  margin: 0 0.5vw;
}

#modal-result-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

#modal-result-wrapper #overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

#modal-result-wrapper #overlay #modal-window {
  width: 300px;
  height: 180px;
  border: 3px solid black;
  background-color: bisque;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  box-shadow: 0px 1px 5px black;
}

#modal-result-wrapper #overlay #modal-window #content {
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 70px;
  padding: 1rem;
  font-size: 20px;
  line-height: 25px;
}

#modal-result-wrapper #overlay #modal-window #btn-close {
  width: 300px;
  height: 80px;
  background-color: #A87B45;
  color: black;
  cursor: pointer;
  font-size: 20px;
  border: 3px solid black;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (min-width: 641px) and (max-width: 707px) {
  main .area-wrapper #area {
    width: 29vh;
    height: 29vh;
  }
  main .area-wrapper #area .box {
    width: 9.6vh;
    height: 9.6vh;
  }
}

@media (min-width: 574px) and (max-width: 640px) {
  main .area-wrapper #area {
    width: 26vh;
    height: 26vh;
  }
  main .area-wrapper #area .box {
    width: 8.6vh;
    height: 8.6vh;
  }
}

@media (min-width: 507px) and (max-width: 573px) {
  main .area-wrapper #area {
    width: 23vh;
    height: 23vh;
  }
  main .area-wrapper #area .box {
    width: 7.6vh;
    height: 7.6vh;
    font-size: 2.6vh;
  }
}

@media (min-width: 441px) and (max-width: 506px) {
  main .area-wrapper #area {
    width: 20vh;
    height: 20vh;
  }
  main .area-wrapper #area .box {
    width: 6.6vh;
    height: 6.6vh;
  }
}

@media (min-width: 374px) and (max-width: 440px) {
  main .area-wrapper #area {
    width: 17vh;
    height: 17vh;
  }
  main .area-wrapper #area .box {
    width: 5.6vh;
    height: 5.6vh;
  }
}

@media (min-width: 320px) and (max-width: 373px) {
  main .area-wrapper #area {
    width: 14vh;
    height: 14vh;
  }
  main .area-wrapper #area .box {
    width: 4.6vh;
    height: 4.6vh;
  }
}

@media (min-width: 441px) and (max-width: 500px) {
  main .enemies .enemy,
  main .enemies .enemy_muf_gif,
  main .enemies .enemy_mil_gif {
    width: 140px;
    height: 140px;
  }
  main .enemies .enemy_mul_gif {
    width: 180px;
    height: 180px;
  }
}

@media (min-width: 385px) and (max-width: 440px) {
  main .enemies .enemy,
  main .enemies .enemy_muf_gif,
  main .enemies .enemy_mil_gif {
    width: 120px;
    height: 120px;
  }
  main .enemies .enemy_mul_gif {
    width: 160px;
    height: 160px;
  }
}

@media (min-width: 320px) and (max-width: 384px) {
  main .enemies .enemy,
  main .enemies .enemy_muf_gif,
  main .enemies .enemy_mil_gif {
    width: 100px;
    height: 100px;
  }
  main .enemies .enemy_mul_gif {
    width: 140px;
    height: 140px;
  }
}

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