/*-----1. Global-----*/
html{
  background: #151515;
}
:root {
  --tg-bg-color: #151515; 
  background: #151515;
}
body {
  color: #fff;
  font-family: "Kode Mono", monospace;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  margin: 0;
  --bg-color: #151515;
  overscroll-behavior-y: contain;
  background: #151515;
}

main{
  position: relative;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

section{
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 70px;
}

.container{
  max-width: 600px;
  width: 100%;
  padding: 0 13px;
  margin: auto;
  position: relative;
}

section>.container{
  min-height: calc(100vh - 80px);
}

img {
  border-style: none;
  object-fit: contain;
}

button{
  cursor: pointer;
  padding: 4px;
  border-radius: 58px;
  font-family: Formular;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: center;
  background-color: #D8ED24;
  color: #000;
  border: none;
  transition: 0.3s;
}
button:active{
  background-color: #7950e5;
  color: #fff;
}
button.check{
  color: #EDB549;
  background: #EDB54930;
  pointer-events: none;
}
button.done{
  color: #08B56C;
  background: #08B56C30;
  pointer-events: none;
}
*{
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

a{
  text-decoration: none;
}

hr{
  margin: 19px 16px 16px;
  border: 1px solid #6E6E6E38;
}

.hidden{
  display: none!important;
}

h1, h2, h3, .h3{
  font-family: "Kode Mono", monospace;
  font-weight: 500;
  margin: 0;
  color: #fff;
  letter-spacing: 0;
}

h2{
  font-size: 24px;
  line-height: 24px; 
  letter-spacing: -0.02em;
  position: relative;
}
h3, .h3{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.05em;
  opacity: 0.6;
  margin-top: 5px;
}

.grid-flex{
    display: flex;
    flex-wrap: wrap;
}
.grid-center{
  justify-content: center;
  align-items: center;
}
.grid-between{
  align-items:center;
  justify-content: space-between;
}
.grid-item-2{
  width: calc(50% - 8px);
  margin: 0 4px;
}
.grid-item-3{
  width: calc((100% / 3) - 8px);
  margin: 0 4px;
}
.grid{
    margin: 0 -4px;
}

.center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.text{
  font-family: 'Formular';
  letter-spacing: -0.02em; 
}

.box-element{
  position: relative;
  padding: 4px 0;
}

.points{
  font-weight: 600;
}

.points::after{
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cg clip-path='url(%23clip0_394_3459)'%3E%3Cpath d='M6.00002 11.5C8.76144 11.5 11 9.26142 11 6.5C11 3.73858 8.76144 1.5 6.00002 1.5C3.23859 1.5 1.00002 3.73858 1.00002 6.5C1.00002 9.26142 3.23859 11.5 6.00002 11.5Z' fill='url(%23paint0_linear_394_3459)'/%3E%3Cpath d='M6.00002 10.5625C8.24367 10.5625 10.0625 8.74366 10.0625 6.5C10.0625 4.25634 8.24367 2.4375 6.00002 2.4375C3.75636 2.4375 1.93752 4.25634 1.93752 6.5C1.93752 8.74366 3.75636 10.5625 6.00002 10.5625Z' fill='url(%23paint1_linear_394_3459)'/%3E%3C/g%3E%3Cpath d='M8.11428 5.80134C8.22474 5.80134 8.31428 5.89088 8.31428 6.00134V6.59825C8.31428 6.65129 8.29321 6.70216 8.2557 6.73967L8.20405 6.79132L6.20088 8.79449C6.16338 8.832 6.11251 8.85307 6.05946 8.85307H4.62289H3.62859C3.51814 8.85307 3.42859 8.76352 3.42859 8.65307V6.15702C3.42859 6.10397 3.44966 6.0531 3.48717 6.0156L4.62289 4.87988L5.5156 3.98717C5.55311 3.94966 5.60398 3.92859 5.65702 3.92859H6.91998C7.03044 3.92859 7.11998 4.01813 7.11998 4.12859V4.92289C7.11998 5.03334 7.03044 5.12289 6.91998 5.12289H4.82289C4.71243 5.12289 4.62289 5.21243 4.62289 5.32289V7.45872C4.62289 7.56918 4.71243 7.65872 4.82289 7.65872H6.91998C7.03044 7.65872 7.11998 7.56918 7.11998 7.45872V7.19568C7.11998 7.08523 7.03044 6.99568 6.91998 6.99568H5.47541C5.36495 6.99568 5.27541 6.90614 5.27541 6.79568V6.00134C5.27541 5.89088 5.36495 5.80134 5.47541 5.80134H8.11428Z' fill='%23B8712F'/%3E%3Cpath d='M7.97287 7.45189C8.09886 7.3259 8.31429 7.41514 8.31429 7.59332V8.6364C8.31429 8.74686 8.22474 8.8364 8.11429 8.8364H7.31999C7.20953 8.8364 7.11999 8.74686 7.11999 8.6364V8.38766C7.11999 8.33462 7.14106 8.28375 7.17856 8.24624L7.57354 7.85122L7.97287 7.45189Z' fill='%23B8712F'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_394_3459' x1='2.40627' y1='1.5' x2='9.75001' y2='10.875' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBF275'/%3E%3Cstop offset='1' stop-color='%23D09E2B'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_394_3459' x1='8.32144' y1='11.2879' x2='4.11385' y2='0.841518' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F1D964'/%3E%3Cstop offset='1' stop-color='%23DD7541'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_394_3459'%3E%3Crect width='12' height='12' fill='white' transform='translate(1.52588e-05 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  margin-left: 5px;
  padding-top: 4px;
}

.card-element{
  border-radius: 12px;
  border: 1px solid #FFFFFF1A;
  background-color: #1F1F1E;
}
.box__points {
  padding: 2px 4px;
  border-radius: 3px;
  background-color: #7950E5;
  width: fit-content;
  font-size: 12px;
  line-height: 14.3px;
  letter-spacing: 0.05em;
  opacity: 1;
  transition: 0.3s;
}
.box__points:after{
  padding-top: 3px;
}

section>.container::before{
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='points-balans__ellipse' width='375' height='394' viewBox='0 0 375 394' fill='none'%3E%3Cg opacity='0.1' filter='url(%23filter0_f_266_37)'%3E%3Ccircle cx='187.5' cy='197' r='89' fill='%23D8ED24'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_266_37' x='-9.1' y='0.400002' width='393.2' height='393.2' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='53.8' result='effect1_foregroundBlur_266_37'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/*-----2. Footer-----*/

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #151515;
}

.menu-list{
  width: 20%;
  height: 72px;
  display: flex;
  position: relative;
}
.menu-list a{
  color: #7C7C7C;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.68px;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
}
.menu-list.activ a{
  color: #D8ED24;
}
.menu-list.activ svg:not(.stake) path{
  fill: #D8ED24;
}
.menu-list.activ svg.stake path{
  stroke: #D8ED24;
}
.menu-list span{
  margin-top: 10px;
}
.menu-list.soon a:after{
  content: 'soon';
  position: absolute;
  line-height: 15px;
  font-size: 10px;
  font-weight: 600;
  background-color: #FFFFFF2E;
  border-radius: 2px;
  color: #FFFFFF59;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  top: 29px;
}
@media only screen and (max-height: 950px) {
  section>.container {
    min-height: calc(100vh - 170px);
  }
}
@media only screen and (max-height: 690px) {
  section>.container{
    min-height: auto;
  }
}