@charset "UTF-8";

:root {
  /* color */
  --pink-color: #B04D5D;
  --blue-color: #1A2E45;
  --black-color: #1C1C1C;
  --white-color: #ffffff;
  /*  */
}

/* common */
.game::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-image: url(/img/back.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

.home-link {
  background: var(--white-color);
  opacity: 1;
  transition: opacity 0.3s;
}

/*  */

/* game-start */
.title-area {
  background: var(--pink-color);
  border-radius: 20px;
}

.game-detail {
  background: var(--white-color);
  border: apx solid var(--black-color);
  border-radius: 20px;
}

.category-title {
  background: var(--blue-color);
  border-radius: 20px;
}

.start {
  background: var(--blue-color);
  border: none;
  border-radius: 30px;
}

/*  */

/* game-question */
.question-inner {
  background: var(--white-color);
}

.question-title {
  background: var(--blue-color);
  border-radius: 20px;
}

.card {
  background-color: var(--white-color);
  border: 1px solid var(--pink-color);
}

.action-banners {
  background: var(--white-color);
  border: 1px solid var(--black-color);
}

.result-correct-banner {
  background: var(--pink-color);
}

.result-incorrect-banner {
  background: var(--blue-color);
}

.result-next-banner,
.showresult-button {
  background: var(--white-color);
  border-radius: 30px;
  border: 1px solid var(--black-color);
}

.get-cards-count {
  background: var(--white-color);
  border: 1px solid var(--black-color);
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

/*  */


/* game-end */
.page-title {
  background: var(--white-color);
}

.acquisition-inner {
  background: var(--white-color);
  border: 1px solid var(--pink-color);
}

.not-earned-inner {
  background: var(--white-color);
  border: 1px solid var(--blue-color);
}

.acquisition-title {
  background: var(--pink-color);
  border-radius: 30px;
}

.not-earned-title {
  background: var(--blue-color);
  border-radius: 30px;
}

.result-all-banner {
  background: var(--pink-color);
}

.answer,
.one-more,
.home,
.end,
.next-page,
.return-page {
  background: var(--white-color);
  border: 1px solid var(--black-color);
  border-radius: 30px;
}

/*  */

/* game-answer */
.answer-block {
  background: var(--white-color);
}

.count-number {
  background: var(--blue-color);
  border-radius: 20px;
}

.answer-explanation {
  border: 1px solid var(--black-color);
}

.label {
  background: var(--white-color);
}

/*  */