*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

img {
  height: auto;
}

body {
  font-family: "Montserrat", serif;
  background-color: #FDFFFC;
}

.u-main-title {
  font-family: "Pacifico", serif;
  font-size: 2.5rem;
  color: #FDFFFC;
}
.u-main-title--title-extention {
  font-family: "Baloo 2", serif;
  color: #FF3366;
}

@media (max-width: 750px) {
  .u-main-title {
    font-size: 2.25rem;
  }
}
@media (max-width: 450px) {
  .u-main-title {
    font-size: 1.87rem;
  }
}
.c-mystery-card {
  position: relative;
  inline-size: 250px;
  block-size: 350px;
  border-radius: 25px;
  cursor: pointer;
  perspective: 1000px;
}
.c-mystery-card__sides {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 25px;
  transition: transform 0.8s ease-in-out;
  position: absolute;
  background-color: #FF9F1C;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
}
.c-mystery-card__front-side {
  font-family: "Pacifico", serif;
  color: #FDFFFC;
  font-size: 6.25rem;
}
.c-mystery-card__back-side {
  transform: rotateY(-180deg);
}
.c-mystery-card__back-side img {
  width: 50%;
}
.c-mystery-card__front-side.reveal {
  transform: rotateY(180deg);
}
.c-mystery-card__back-side.reveal {
  transform: rotateY(0deg);
}

@media (max-width: 1130px) {
  .c-mystery-card {
    inline-size: 225px;
    block-size: 315px;
  }
}
@media (max-width: 900px) {
  .c-mystery-card {
    inline-size: 185px;
    block-size: 259px;
  }
}
@media (max-width: 750px) {
  .c-mystery-card {
    inline-size: 150px;
    block-size: 210px;
  }
  .c-mystery-card__front-side {
    font-size: 3.75rem;
  }
}
@media (max-width: 625px) {
  .c-mystery-card {
    inline-size: 110px;
    block-size: 154px;
  }
}
@media (max-width: 500px) {
  .c-mystery-card {
    inline-size: 90px;
    block-size: 126px;
  }
  .c-mystery-card__front-side {
    font-size: 2.5rem;
  }
}
@media (max-width: 450px) {
  .c-mystery-card {
    inline-size: 65px;
    block-size: 91px;
  }
  .c-mystery-card__front-side {
    font-size: 2.0625rem;
  }
}
/* Header section */
.header {
  inline-size: 90%;
  max-inline-size: 1100px;
  margin-inline: auto;
  margin-block-start: 50px;
  margin-block-end: 50px;
  padding-block: 20px;
  padding-inline: 15px;
  background-color: #2EC4B6;
  border-radius: 15px;
}
.header__title {
  text-align: center;
}

@media (max-width: 750px) {
  .header {
    margin-block-start: 25px;
    margin-block-end: 25px;
    padding-block: 10px;
  }
}
@media (max-width: 450px) {
  .header {
    margin-block-start: 15px;
    margin-block-end: 15px;
    padding-block: 5px;
  }
}
/* Game section */
.game-section {
  inline-size: 90%;
  max-inline-size: 1100px;
  margin-inline: auto;
  padding-inline: 15px;
  padding-block: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

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