@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Aclonica&display=swap");

/* ----------------------------------UNIVERSAL SELECTOR-------------------------------- */
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none !important;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Aclonica";
}

/* ---------------------------------------ROOT@----------------------------------------- */
:root {
  /* ----colors------ */
  --color_white: #ffffff;
  --color_black: #000000;
  --color_Night_Rider: #1d1b1b;

  /*------font family------*/
  --ff_frank_libre: "Frank Ruhl Libre";
  --ff_poppins: "Poppins";

  /*-------Font sizes----- */
  --fs_xs: 12px;
  --fs_mini: 14px;
  --fs_sm: 16px;
  --fs_md: 20px;
  --fs_base: 24px;
  --fs_regular: 32px;
  --fs_lg: 48px;
  --fs_xl: 54px;
  --fs_2xl: 64px;
  --fs_3xl: 98px;

  /*-------font weight--------*/
  --fw_small: 300;
  --fw_regular: 400;
  --fw_medium: 500;
  --fw_bold: 700;
}

.bg_Night_Rider {
  background-color: var(--color_Night_Rider);
}

.color_black {
  color: var(--color_black) !important;
}

.color_white {
  color: var(--color_white) !important;
}

.fw_small {
  font-weight: var(--fw_small);
}

.fw_regular {
  font-weight: var(--fw_regular);
}

.fw_medium {
  font-weight: var(--fw_medium);
}

.fw_bold {
  font-weight: var(--fw_bold);
}

.ff_frank_libre {
  font-family: var(--ff_frank_libre);
}

.ff_poppins {
  font-family: var(--ff_poppins);
}

.fs_xs {
  font-size: var(--fs_xs);
}

.fs_mini {
  font-size: var(--fs_mini);
}

.fs_sm {
  font-size: var(--fs_sm);
}

.fs_md {
  font-size: var(--fs_md);
}

.fs_base {
  font-size: var(--fs_base);
}

.fs_regular {
  font-size: var(--fs_regular);
}

.fs_lg {
  font-size: var(--fs_lg);
}

.fs_xl {
  font-size: var(--fs_xl);
}

.fs_2xl {
  font-size: var(--fs_2xl);
}

.fs_3xl {
  font-size: var(--fs_3xl);
}

/* -------------------------------------CUSTOM CSS-------------------------------------- */
p {
  margin-bottom: 0 !important;
}

ul,
ol {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0 !important;
}

.page_btn {
  display: inline-block;
}

.question_mark {
  background-color: var(--color_white);
  max-width: 200px;
  padding: 20px;
  margin: 0 auto;
  height: 172.28px;
}

.question_mark_container {
  max-width: 200px;
  background-color: var(--color_white);
  max-width: 200px;
  padding: 20px;
  margin: 0 auto;
  height: 172.28px;
}

.btn_1 {
  padding: 10px;
  font-size: var(--fs_md);
}

#input_decor {
  outline: none;
  height: 70px;
  width: 170px;
  text-align: center;
  font-size: var(--fs_lg);
}

.line_under_white {
  background-color: var(--color_white);
  height: 10px;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.yourNumber {
  font-size: var(--fs_3xl);
}

.hint {
  background-color: var(--color_white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: fixed;
  right: 50px;
  bottom: 30px;
  animation: bounce 1s alternate infinite;
  cursor: pointer;
}

@keyframes bounce {
  0% {
    transform: translateY(-6px);
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 1) 0%,
      rgba(29, 27, 27, 1) 90%
    );
  }

  50% {
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 1) 0%,
      rgba(29, 27, 27, 1) 85%
    );
  }

  100% {
    transform: translateY(6px);
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 1) 0%,
      rgba(29, 27, 27, 1) 80%
    );
  }
}

.hint_data {
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 1) 100%
  );
  border-radius: 10px;
  position: absolute;
  transform: translateY(-50%);
  bottom: 40px;
  font-size: var(--fs_md);
  cursor: grabbing;
}

.d_flex {
  display: flex;
}

.d_none {
  display: none;
}

.d_block {
  display: block;
}

/*------------------------------MEDIA-QUERY----------------------------------*/

@media (max-width: 992px) {
  :root {
    --fs_xs: 12px;
    --fs_mini: 14px;
    --fs_sm: 16px;
    --fs_md: 18px;
    --fs_base: 24px;
    --fs_regular: 28px;
    --fs_lg: 40px;
    --fs_xl: 54px;
    --fs_2xl: 64px;
    --fs_3xl: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs_xs: 12px;
    --fs_mini: 14px;
    --fs_sm: 16px;
    --fs_md: 16px;
    --fs_base: 22px;
    --fs_regular: 28px;
    --fs_lg: 36px;
    --fs_xl: 54px;
    --fs_2xl: 64px;
    --fs_3xl: 76px;
  }

  .question_mark,
  .question_mark_container {
    max-width: 150px;
    height: 120px;
  }

  .question_svg {
    width: 120px;
    height: 100px;
  }

  #input_decor {
    height: 60px;
  }
}

@media (max-width: 576px) {
  :root {
    --fs_xs: 12px;
    --fs_mini: 14px;
    --fs_sm: 16px;
    --fs_md: 16px;
    --fs_base: 20px;
    --fs_regular: 20px;
    --fs_lg: 26px;
    --fs_xl: 54px;
    --fs_2xl: 64px;
    --fs_3xl: 70px;
  }

  .d_none_sm {
    display: none;
  }
}