:root {
  --body-font: "Poppins", sans-serif;
  --head-font: "Chakra Petch", sans-serif;
  --p1: 160, 32, 240;
  --p2: 128, 0, 128;
  --s1: 128, 0, 128;
  --s2: 240, 32, 216;
  --s3: 117, 12, 183;
  --n0: 255, 255, 255;
  --n1: 64, 12, 96;
  --n3: 226, 188, 250;
  --n4: 247, 247, 247;
  --n5: 254, 252, 254;
  --n6: 85, 85, 85;
  --gradient1: linear-gradient(218deg, #a020f0 0%, #300948 100%, #a020f0 100%);
  --gradient2: linear-gradient(1deg, #a020f0 0.43%, rgba(232, 81, 23, 0.20) 99.55%);
  --gradient3: linear-gradient(188deg, rgba(240, 32, 216, 0.15) 5.73%, rgba(246, 71, 28, 0.00) 92.87%, rgba(160, 32, 240, 0.15) 92.87%);
  --gradient4: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.80) 100%);
  --transition: all 0.5s ease-in-out;
}

/*=====================================
            light theme
===================================*/
.swiper-3d-section {
  margin-top: -180px;
  background: url(../img/bg-2-light.png) no-repeat center center;
}
.bgp-1 {
  color: rgb(var(--n5));
}
.btn2 {
  color: rgb(var(--n4));
}
.game-section .game-card-wrapper .game-card .game-card-border {
  background: rgb(var(--n3));
}
.custom-checkbox .checkmark {
  background-color: rgb(var(--n5));
  border: 2px solid rgb(var(--p1));
}
.top-head {
  background: #f7f7f7;
}
.control-side .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color: var(--bs-body-color);
}
.control-side li {
  border-right: 1px solid #ddd;
}