*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
}
.thue_airdrop{
    width: 100%;
    height: auto;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 35px;
  height: 80px;
  position: relative;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0 0 20px;
  border-radius: 15px 15px 10px 10px;
  padding: 1px;
  background: repeating-linear-gradient(-45deg,#91d2e2 0 8px,#1296a7 0 12px) content-box;
  --c: radial-gradient(farthest-side,#000 94%,#0000);
  -webkit-mask:
    linear-gradient(#0000 0 0),
    var(--c) -10px -10px,
    var(--c)  15px -14px,
    var(--c)   9px -6px,
    var(--c) -12px  9px,
    var(--c)  14px  9px,
    var(--c)  23px 27px,
    var(--c)  -8px 35px,
    var(--c)   50% 50%,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0),
    var(--c) -10px -10px,
    var(--c)  15px -14px,
    var(--c)   9px -6px,
    var(--c) -12px  9px,
    var(--c)  14px  9px,
    var(--c)  23px 27px,
    var(--c)  -8px 35px,
    var(--c)   50% 50%,
    linear-gradient(#0000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude,add,add,add,add,add,add,add,add;
  -webkit-mask-repeat: no-repeat;
  animation: l2 3s infinite;
}
.loader:before {
  content: "";
  position: absolute;
  inset: 50% calc(50% - 4px) 0;
  background: #e0a267;
  border-radius: 50px;
}
@keyframes l2 {
 0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
 10%  {-webkit-mask-size: auto,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
 20%  {-webkit-mask-size: auto,25px 25px,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0}
 30%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,0 0,0 0,0 0,0 0,0 0}
 40%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,0 0,0 0,0 0,0 0}
 50%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,0 0,0 0,0 0}
 60%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,0 0,0 0}
 70%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,0 0}
 80%,
 100% {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,200% 200%}
}
@keyframes infer{
  0%{
      transform: translateX(-4px);
  }
  20%{
      transform: translateX(4px);
  }
  40%{
      transform: translateX(-4px);
  }
  60%{
      transform: translateX(4px);
  }
  80%{
      transform: translateX(-4px);
  }
  100%{
      transform: translateX(4px);
  }
}
.loading{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: transparent;
  z-index: 1000000;
  & .loaddiv{
      width: 100%;
      height: 100vh;
      background-color: #fff;
  }
}
.loading h4{
  color: #006666;
}
.load_content{
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
}
@keyframes loaddivnew {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes loaderop {
  0%{
      opacity: 1;
  }
  100%{
      opacity: 0;
  }
}
.loadingend{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: transparent;
  z-index: 1000000;
  & .loaddiv:nth-child(1){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(2){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(3){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(4){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(5){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(6){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(7){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
  & .loaddiv:nth-child(8){
      width: 100%;
      height: 12.5vh;
      background: linear-gradient(to right, #9f93b0, #006666);
      
  }
}
.loading h4{
  color: #006666;
}
.load_content{
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
}
@keyframes loaddiva {
  0%{
      transform: translateX(0);
  }
  100%{
      transform: translateX(100%);
  }
}
@keyframes loaderop {
  0%{
      opacity: 1;
  }
  100%{
      opacity: 0;
  }
}
