@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap");
:root {
  --geologica: "Geologica", sans-serif;
  --withe: #fff;
  --withe_2: #ccc;
  --bg_color: #202232;
  --ch1: #05478a;
  --ch2: #0070e0;
  --cs1: #005e38;
  --cs2: #03a65a;
  --cw1: #c24914;
  --cw2: #fc8621;
  --ce1: #851d41;
  --ce2: #db3056;
  --ce3: #ff0072;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--geologica);
  background-color: var(--bg_color);
  color: var(--withe_2);
}
body main {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(/img/bg_1.jpg);
}
body main h1 {
  position: absolute;
  font-size: calc(0.95em + 3vw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body main h2 {
  color: #444;
  position: absolute;
  font-size: calc(0.95em + 1.9vw);
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body main .quest {
  position: absolute;
  width: 555px;
  height: 222px;
  background-color: var(--withe);
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}
body main .quest p {
  color: #000;
  font-size: 25px;
  font-weight: 700;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body main .quest .button_wrapper {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  width: 333px;
}
body main .quest .button_wrapper .yes,
body main .quest .button_wrapper .no {
  cursor: pointer;
  border: none;
  font-size: 19px;
  font-weight: 500;
  color: var(--withe);
  border-radius: 5px;
  width: 99px;
  height: 55px;
}
body main .quest .button_wrapper .yes {
  background-color: #269f42;
}
body main .quest .button_wrapper .no {
  background-color: #d02a3a;
}

@media (max-width: 424px) {
  body main h2 {
    font-size: 17px;
  }
}
@media (max-height: 759px) {
  body main h2 {
    top: 65%;
  }
}
@media (max-width: 767px) {
  body main .quest p {
    font-size: 22px;
    top: 30%;
  }
  body main .quest {
    width: 400px;
    opacity: 0.77;
  }
}
@media (max-width: 424px) {
  body main .quest p {
    font-size: 20px;
    top: 30%;
  }
  body main .quest {
    width: 355px;
  }
  body main .quest .button_wrapper {
    width: 277px;
  }
}
@media (max-width: 374px) {
  body main .quest p {
    font-size: 18px;
    top: 30%;
  }
  body main .quest {
    width: 300px;
  }
  body main .quest .button_wrapper {
    width: 277px;
  }
}/*# sourceMappingURL=main.css.map */