@font-face {
  font-family: "Roobert";
  src: url(../fonts/RoobertPRO-Regular.otf) format("opentype");
  src: url(../fonts/RoobertPRO-Regular.ttf) format("truetype");
  src: url(../fonts/RoobertPRO-Regular.woff2) format("woff2");
  src: url(../fonts/RoobertPRO-Regular.woff) format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Roobert";
  src: url(../fonts/RoobertPRO-SemiBold.otf) format("opentype");
  src: url(../fonts/RoobertPRO-SemiBold.ttf) format("truetype");
  src: url(../fonts/RoobertPRO-SemiBold.woff2) format("woff2");
  src: url(../fonts/RoobertPRO-SemiBold.woff) format("woff");
  font-weight: 600;
}
:root {
  font-family: "Roobert", serif;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html,
canvas {
  height: -webkit-fill-available;
  width: -webkit-fill-available;
}

body {
  font-weight: 600;
  font-style: normal;
  margin: 0;
  min-height: 100dvh;
  display: flex;
  width: 100dvw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  overflow-x: hidden;
}
body * {
  font-weight: 600;
  font-style: normal;
  font-family: "Roobert", serif;
  color: white;
}

.home {
  background-image: url(../img/bg/home.jpg);
}

.tasks {
  background-image: url(../img/bg/tasks.jpg);
  place-items: initial;
}

.invite {
  background-image: url(../img/bg/invite.jpg);
  place-items: initial;
}
.invite nav {
  box-shadow: 0px -15px 50px -15px rgb(33, 33, 33);
}

.quiz {
  background-image: url(../img/bg/quiz.jpg);
}

.leaderboard {
  background-image: url(../img/bg/leaderboard.jpg);
}

button, a {
  outline: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:focus,
button:focus-visible {
  outline: none;
}

nav {
  display: flex;
  width: 100vw;
  justify-content: space-around;
  background-color: black;
  position: fixed;
  bottom: 0;
  border-top: 1px solid white;
}

.nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
  padding: 16px 0;
  font-size: 12px;
}

.nav__link:last-child {
  padding: 0 10px;
}

.nav__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 6px;
}

.icon__home {
  background-image: url(../img/home.svg);
}

.icon__game {
  background-image: url(../img/game.svg);
}

.icon__invite {
  background-image: url(../img/invite.svg);
}

.icon__leaderboard {
  background-image: url(../img/leaderboard.svg);
}

.icon__quiz {
  background-image: url(../img/quiz.svg);
}

.icon__tasks {
  background-image: url(../img/tasks.svg);
}

.home__container,
.quiz__container,
.leaderboard__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - 91px);
}

.home__container {
  height: auto;
}

.user__container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 3% 0;
}

.user__img {
  width: 120px;
  height: 120px;
}

.user__name {
  font-size: 22px;
  margin: 20px 30px;
  text-align: center;
}

.points__container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.user__points {
  margin: 0;
  font-size: 50px;
  line-height: 80%;
}

.user__points__pts {
  margin: 0;
  background: #10C7FF;
  background: linear-gradient(to bottom right, #10C7FF 0%, #5122D8 55%, #FBB2FC 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 8px;
  font-size: 36px;
  font-weight: 600;
}

.card {
  width: 85%;
  display: flex;
  justify-self: center;
  flex-direction: column;
  border: 2px solid white;
  border-radius: 15px;
  padding: 2.5%;
  background-color: #212121;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: contain;
}
.card .card__header {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.card .card__paragraph {
  font-weight: 400;
  color: #a7a7a7;
  font-size: 14px;
}
.card .line-text {
  font-size: 16px;
  margin-bottom: 6px;
}
.card .line-text span {
  font-size: 12px;
  vertical-align: super;
}
.card .referrals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-bottom: 8px;
}
.card .referral-number {
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 12px 32px;
  border-radius: 50px;
  border: 2px solid white;
}
.card .card__link {
  font-size: 14px;
  font-weight: 400;
}

.refferal__card {
  background-image: url(../img/bg/ref_icon.svg);
  margin-bottom: 90px;
}

.wallet__card {
  background-image: url(../img/bg/wallet_icon.svg);
  flex-direction: row;
  justify-content: space-between;
  background-size: 30%;
  margin-top: 20px;
}
.wallet__card.active {
  flex-direction: column;
}
.wallet__card .card__paragraph {
  margin-bottom: 0;
}
.wallet__card .card__paragraph.active {
  margin-bottom: 12px;
}
.wallet__card .right__wallet {
  display: flex;
}
.wallet__card .wallet__input {
  background-color: #141414;
  outline: none;
  border: 1px solid white;
  border-radius: 50px;
  padding: 8px 16px;
  margin: 5px 0;
  width: 60%;
}
.wallet__card .wallet__input::-moz-placeholder {
  color: white;
  font-weight: 400;
}
.wallet__card .wallet__input::placeholder {
  color: white;
  font-weight: 400;
}
.wallet__card .wallet__input__wallet {
  margin-top: 14px;
}
.edit__wallet__bttn,
.popup__btn {
  display: block;
  margin: auto 0;
  color: #212121;
  background-color: white;
  border-radius: 100px;
  padding: 12px 20px;
  font-size: 14px;
  margin-bottom: 0;
  text-decoration: none;
  text-align: center;
  margin-left: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  background-color: #eaeaea;
  border: 2px solid white;
  border-radius: 100px;
}

.streak {
  font-size: 28px;
  color: #212121;
  padding-left: 20px;
}

.days {
  background-color: rgb(16, 199, 255);
  background-image: linear-gradient(135deg, rgb(16, 199, 255) 0%, rgb(81, 34, 216) 50%, rgb(251, 178, 252) 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 0px 500px 500px 0px;
  font-size: 32px;
  border-left: 2px solid white;
}

.popup__container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1550px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  width: 100vw;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.popup__container .popup {
  background-color: #f7f7f7;
  border-radius: 30px 30px 10px 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 90%;
  border: 1px solid white;
  position: absolute;
}
.popup__container .reward {
  font-size: 18px;
  color: #212121;
  margin-bottom: 10px;
  text-align: center;
}
.popup__container .task {
  padding: 20px;
  font-size: 14px;
  color: #212121;
  display: flex;
  justify-content: space-between;
}
.popup__container .task b {
  color: #212121;
  font-weight: 600;
}
.popup__container .task p {
  color: #212121;
  width: 70%;
  margin: 0;
  font-weight: 400;
}
.popup__container .task .points {
  color: #5e5eff;
  font-weight: bold;
  color: #212121;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.popup__container .card {
  position: initial;
}
.popup__container .second__popup {
  margin-top: 2vh;
  border-radius: 20px;
  padding: 20px 0;
}
.popup__container .popup__button {
  margin: auto;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}
.popup__container .points__container {
  padding: 14px 0;
}
.popup__container .user__points {
  color: #212121;
}

.tasks__container,
.popup__alter {
  width: 100%;
  display: flex;
  justify-content: center;
  height: -moz-fit-content;
  height: fit-content;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  margin-bottom: 50px;
}
.tasks__container .header,
.popup__alter .header {
  width: 90%;
  background-color: #212121;
  margin-top: 24px;
}
.tasks__container .streak,
.popup__alter .streak {
  padding: 10px 0;
  padding-left: 20px;
  color: white;
}
.tasks__container .quest__box,
.popup__alter .quest__box {
  display: flex;
  width: 90%;
  border-bottom: 1px solid white;
  align-items: center;
  padding: 6px 0;
}
.tasks__container .quest__box .quest__text,
.popup__alter .quest__box .quest__text {
  margin-left: 10px;
}
.tasks__container .quest__box .quest__text *,
.popup__alter .quest__box .quest__text * {
  margin: 10px 0;
}
.tasks__container .quest__box .quest__text .quest__paragraph,
.popup__alter .quest__box .quest__text .quest__paragraph {
  color: #a7a7a7;
  font-weight: 400;
}
.tasks__container .quest__box .edit__wallet__bttn,
.popup__alter .quest__box .edit__wallet__bttn {
  margin-left: auto;
  margin-bottom: auto;
}
.tasks__container .quest__box img,
.popup__alter .quest__box img {
  width: 50px;
  height: 50px;
}
.tasks__container .quest__box:last-child,
.popup__alter .quest__box:last-child {
  margin-bottom: 100px;
}
.tasks__container .last__quest,
.popup__alter .last__quest {
  border-bottom: 0;
}

.popup__alter {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99 !important;
}
.popup__alter .popup__content {
  background: #212121;
  border-radius: 20px;
  border: 2px solid white;
  height: 40%;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.popup__alter .popup__btn {
  margin: 0;
}
.popup__alter p {
  text-align: center;
  padding: 0 20px;
  font-size: 18px;
}
.popup__alter .popup__close {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 40px;
  cursor: pointer;
}

.home__popup__alter {
  background-color: rgba(0, 0, 0, 0.7);
}
.home__popup__alter .popup__content {
  height: auto;
  border-radius: 30px 30px 15px 15px;
}
.home__popup__alter .popup__content .header {
  width: 100%;
  margin: 0;
  position: relative;
  top: -2px;
  justify-content: flex-start;
}
.home__popup__alter .popup__content .header .streak {
  padding-left: 10px;
}
.home__popup__alter .popup__content .header .header__shop__img {
  width: 40px;
  margin-left: calc(5% + 10px);
}
.home__popup__alter .quest__paragraph {
  padding-left: 0;
  text-align: initial;
  font-size: 16px;
  margin: 8px 0;
}
.home__popup__alter .popup__close {
  position: initial;
  margin-right: 3px;
  margin-left: auto;
  background: white;
  color: black;
  border-radius: 100px;
  padding: 0 10px;
}
.home__popup__alter .home__popup__add {
  text-align: initial;
  color: #a7a7a7;
  font-weight: 400;
}
.home__popup__alter .home__confirm,
.home__popup__alter .home__cancel {
  padding: 12px 30px;
}
.home__popup__alter .popup__bigger__text,
.home__popup__alter .popup__smaller__text {
  margin: 2px 0;
}
.home__popup__alter .popup__bigger__text {
  font-size: 24px;
}
.home__popup__alter .popup__smaller__text {
  font-size: 18px;
}
.home__popup__alter .popup__first__text {
  margin-top: 20px;
}
.home__popup__alter .conf__button__container {
  display: flex;
  margin: 20px 0;
}
.home__popup__alter .conf__button__container .home__confirm {
  margin-right: 20px;
}
.home__popup__alter .quest__in__active {
  opacity: 0.4;
}

.third__popup h3 {
  border: 1px solid white;
  border-radius: 100px;
  color: #212121;
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: 20px;
}
.third__popup ul {
  list-style-type: none;
  padding: 10px 20px;
  margin: 0;
}
.third__popup p, .third__popup strong {
  color: #212121;
}
.third__popup strong {
  font-weight: 600;
}
.third__popup p {
  font-weight: 400;
}
.third__popup .popup__button {
  margin-bottom: 20px;
}
.third__popup a {
  color: #1f7ceb;
}

.invite .invite__container {
  width: 100%;
}
.invite .invite__header__img {
  display: flex;
  margin: auto;
  margin-top: 24px;
  width: 70px;
}
.invite .invite__header {
  text-align: center;
  margin-top: 10px;
  font-size: 28px;
  color: #212121;
  padding: 0 90px;
}
.invite .invite__graph {
  width: 39px;
  height: 178px;
}
.invite .info__container {
  display: flex;
  width: 80%;
  margin: auto;
}
.invite .text__box * {
  margin: 0;
}
.invite .text__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 205px;
  margin-left: 20px;
  margin-top: 6px;
}
.invite .text__invite__header {
  font-size: 20px;
  color: #212121;
}
.invite .text__invite__paragraph {
  color: #212121;
  font-weight: 400;
  font-size: 14px;
  margin-top: 4px;
}
.invite .table__container {
  width: 100%;
}
.invite .table__container .title {
  text-align: center;
  margin: 12px auto;
  margin-top: 30px;
  font-size: 20px;
  color: #212121;
}
.invite .table__container .table {
  width: 90%;
  border-collapse: collapse;
  margin: auto;
  box-shadow: 0px 0px 10px 0px rgba(33, 33, 33, 0.2);
}
.invite .table__container .table th, .invite .table__container .table td {
  padding: 10px;
  border: 2px solid white;
  background-color: #eeeeed;
  color: #212121;
  font-size: 14px;
}
.invite .table__container .note {
  font-size: 14px;
  color: #212121;
  margin-bottom: 20px;
  margin-left: 10%;
  margin-top: 10px;
  font-weight: 400;
}

.large__button {
  width: 90%;
  background-color: white;
  color: black;
  border-radius: 5px;
  padding: 16px 0;
  font-size: 16px;
  margin: 20px 0;
  margin-left: 5%;
  display: flex;
  text-decoration: none;
  justify-content: center;
}

.invite__reflink {
  margin-bottom: 100px;
}

.wallet__form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.error__logger {
  margin: 0;
  color: red;
  margin-top: 10px;
}

.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #000;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 1s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.quiz__container,
.leaderboard__container {
  height: calc(100dvh - 71px);
}
.quiz__container .info__box,
.leaderboard__container .info__box {
  margin-top: 20px;
  align-items: flex-start;
}
.quiz__container .info__box img,
.leaderboard__container .info__box img {
  width: 60px;
  height: 60px;
  margin: 0 20px;
  margin-top: 20px;
}
.quiz__container .info__box h2,
.leaderboard__container .info__box h2 {
  margin-bottom: 10px;
}
.quiz__container .info__box p,
.leaderboard__container .info__box p {
  color: #a7a7a7;
  font-size: 14px;
  font-weight: 400;
  margin-top: 0;
  margin-right: 30px;
}
.quiz__container .quiz__box,
.leaderboard__container .quiz__box {
  display: flex;
  width: 90%;
  border: 3px solid white;
  border-radius: 15px;
  background-color: #212121;
}
.quiz__container .quiz__box h3,
.leaderboard__container .quiz__box h3 {
  margin: 10px 20px;
  font-size: 16px;
  text-align: center;
  width: 100%;
}
.quiz__container .quiz__next,
.leaderboard__container .quiz__next {
  margin-left: 0;
}
.quiz__container .quiz__boxer,
.leaderboard__container .quiz__boxer {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  height: 55%;
}
.quiz__container .instruction,
.leaderboard__container .instruction {
  font-weight: 400;
  color: #a7a7a7;
  margin-top: 10px;
  margin-bottom: 4px;
}
.quiz__container .answer,
.leaderboard__container .answer {
  margin: 4px 0;
  font-weight: 400;
  font-size: 14px;
  display: flex;
}
.quiz__container .answer p,
.leaderboard__container .answer p {
  margin: 0;
  margin-left: 10px;
  width: 100%;
  display: flex;
  align-items: center;
}
.quiz__container input[type=checkbox],
.leaderboard__container input[type=checkbox] {
  display: none;
}
.quiz__container input[type=checkbox] + label,
.leaderboard__container input[type=checkbox] + label {
  cursor: pointer;
  display: inline-block;
  background: url(../img/checkbox.png) center no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
}
.quiz__container input[type=checkbox]:checked + label,
.leaderboard__container input[type=checkbox]:checked + label {
  background: url(../img/checkbox_ok.png) center no-repeat;
  background-size: contain;
}
.quiz__container .answers,
.leaderboard__container .answers {
  flex-direction: column;
}
.quiz__container .answers__box,
.leaderboard__container .answers__box {
  display: flex;
  flex-direction: column;
  margin: 10px 20px;
}

.leaderboard__container .info__box .total__player__box {
  margin-left: auto;
  margin-right: 20px;
}
.leaderboard__container .info__box h2 {
  font-size: 18px;
  margin-top: 20px;
}
.leaderboard__container .info__box .leaderboard__total__players {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
}
.leaderboard__container .info__box .leaderboard__player__counter {
  text-align: center;
  background-color: black;
  border-radius: 50px;
  border: 2px solid white;
  padding: 6px 0;
  width: 100%;
  color: white;
}
.leaderboard__container .leaderboard__table {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.leaderboard__container .leaderboard__table .leaderboard___record {
  display: flex;
  width: 90%;
  border-bottom: 1px solid white;
}
.leaderboard__container .leaderboard__table h3, .leaderboard__container .leaderboard__table p {
  margin: 10px 0;
}
.leaderboard__container .leaderboard__table .leaderboard__name {
  margin-left: 10px;
}
.leaderboard__container .leaderboard__table .leaderboard__score {
  margin-left: auto;
}
.leaderboard__container .leaderboard__bottom {
  margin-bottom: 20px;
  flex-direction: column;
}
.leaderboard__container .quiz__box h3 {
  width: auto;
}

.leaderboard__container .info__box p {
  margin-right: 0;
}

.leaderboard__my__score,
.leaderboard__before__score,
.leaderboard__next__score {
  margin-left: auto !important;
}

.leaderboard__position__box {
  display: flex;
}

.leaderboard__position__center {
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.multiplayer__bttn {
  border-radius: 150px;
  padding: 10px;
  margin-left: auto;
  margin-right: 5%;
  margin-top: 10px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.multiplayer__img {
  width: 40px;
}

.leaderboard__container__alt {
  height: calc(100dvh - 71px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.leaderboard__container__alt .edit__wallet__bttn {
  margin: 0;
  margin-top: 20px;
}

.popup__content .done__bonus__bttn {
  margin: 15px auto;
}

.lottery__kolo {
  width: 75%;
  transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
}

.lottery__indicator {
  width: 20%;
  position: relative;
  top: 5%;
  z-index: 10;
}

.spin__bttn {
  margin: 16px auto;
}

.home__popup__add__second {
  margin-bottom: 0;
  margin-top: 8px;
}

.spin__margin {
  margin-top: 12px !important;
}/*# sourceMappingURL=style.css.map */