/* @import url('https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap'); */

@font-face {
    font-family: "DefaultText";
    src: url("/static/SpaceGrotesk-Regular.ttf") format("woff2");
}

*{
  --color0:#000;
 --color1: #fca311;
 --color3:#005f73;
 --color2:#e5e5e5;
}

*{
  box-sizing: border-box;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
h1{
   margin:0;
   padding:0;
}

/*selection animation*/
@keyframes selection {
  0%,100% {
    box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);

  }
  10%,70% {
    box-shadow: 0rem 0rem 0.6rem 0.1rem var(--color3);

  }


}

@keyframes pulseSelection {
  0% {
    box-shadow: 0rem 0rem 0.4rem 0.3rem var(--color3);

  }
  100% {
    box-shadow: 0rem 0rem 0.4rem 0.3rem var(--color1);

  }


}

.selectedPulse{
    animation: selection 1s 1;

}
.selected{
  box-shadow: 0rem 0rem 0.6rem 0.1rem var(--color1)!important;

}

.imageList{
    scroll-snap-type: x mandatory;
    overflow-x: scroll;    
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    width:auto;
    margin-bottom:3rem;
    justify-content: center;

}
.imageList img.avatar{
    width:80vw;
    height:80vw;
    margin:0.5rem;
    max-width: 256px;
max-height: 256px;
    filter: drop-shadow(0rem 0rem 0.4rem var(--color0));
 /*   border-radius:1rem;*/
    /* box-shadow: 0rem 0rem 0.4rem 0rem var(--color0); */
    /* max-width:300px; */
 }
/* .imageList img {
    scroll-snap-align: center; */

/* } */
/* .imageList img.avatar:first-child {
    margin-left: 15vw;
}
.imageList img.avatar:last-child {
    margin-right: 15vw; */
/* } */
video.antiTrigger{
   /* filter: saturate(200%) blur(1px) grayscale(100%) contrast(2)
  */
          animation: glitch 0.1s infinite alternate;
    filter: saturate(0%) sepia(100%)  
      saturate(180%) brightness(60%) contrast(107%) 
      saturate(80%) hue-rotate(155deg) blur(0.5px);
}

video{
    border-radius:2rem;
    box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);
    width:100%;
    max-width:80vw;
    max-width:min(500px,80vw);
}
.videoCroppedContainer{
    border-radius:2rem;
    width:80vw;
    height:80vw;
    /* max-width:500px;
    max-height:500px; */
    width:min(500px,80vw);
    height:min(500px,80vw);
    overflow:hidden;    
    margin:auto;
    box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);

}

@keyframes glitch {
  0% {
  transform: skew(0.2deg, 0.2deg);

  }
 10% {
  transform: skew(0, 0);

  }

   70% {
  transform: skew(-0.2deg, 0.2deg);

  }
  100% {
  transform: skew(0, 0);

  }




  }
body{
   padding:0rem;
   margin:0;
   font-size:1rem;
  color:var(--color2);
   font-family:"DefaultText";
   font-weight: bold;
   text-align: center;
   display: flex;
   flex-direction: column;
   min-height:100vh;
   top:0;
   left:0;
   
   box-sizing: border-box;
   background: rgb(2,48,71);
  background: linear-gradient(0deg, rgba(2,48,71,1) 0%, rgba(0,18,25,1) 80%, rgba(0,18,25,1) 100%); 
  background-attachment:fixed;
   text-shadow: 0 0 0.2rem var(--color0);
  

}

content{
  width:100%;
   margin-left:auto;
 margin-right:auto;
 padding-top:9rem;
 max-width: 1000px;
 margin-bottom:7rem;

}
footer{
  margin-bottom:7rem;

}
content > h1:first-child,
body > h1:first-child{
  display:block;
  position:fixed;
  top:0;
  padding-top:0.5rem;
  padding-bottom:1rem;
  width:100%;
  text-align:center;
  left:0;
  font-size:14vw;
  font-size:min(14vw,3.2rem);
  background: var(--color0);
  font-weight:bold;
  max-width:1000px;
  
left:auto;
}

content > h2:nth-child(2),
body > h2:nth-child(2){
  margin:0;
  padding:0;
  background:var(--color3);
  padding-top:0.38rem;
  padding-bottom:0.2rem;
  text-shadow:none;
  border-bottom-left-radius:3rem;
  border-bottom-right-radius:3rem;
    position:fixed;
  width:100%;
  max-width:1000px;
  top:23vw;
  top:min(23vw,5.4rem);
text-shadow: 0 0 0.2rem var(--color0);

  
}

content > h1:first-letter,
body > h1:first-letter{
    color:var(--color1);
}

h2{
  text-shadow: 
  0 0 0.3rem var(--color1),
    
    0 0 3rem var(--color1)
  ;
   text-transform: uppercase; 
  font-size:1.4rem;
}

/* .buttons button{
   all:unset;

   background:transparent;
   font-weight: bold;
   border:0.1rem solid rgb(141, 140, 140);
   border-radius: 1rem ;
   display:inline-block;
   flex-grow: 1;
   padding:1rem;
   font-size: 2rem;
}
.buttons{
   margin-top:auto;
   display:flex;
   flex-direction: row;
   align-items:stretch;

   
} */

i{
   font-size:1rem;
   font-weight: normal;
}
progress{
   width: 90%;
   height: 8vh;
}



#save{

  display:block;
  position:fixed;
  right:3vw;
  bottom:2vh;
  background:var(--color3);
    box-shadow: 0rem 0rem 0.4rem 0.3rem var(--color3);
  border-radius:100vw;
  padding:1vmax;
  padding-left:2.4vmax;
  padding-right:2.4vmax;
  /*text-shadow: 0 0 1vmax var(--color0)
  ,0 0 1vmax  var(--color0),0 0 1vmax  var(--color0),0 0 1vmax  var(--color0);*/
        animation: pulseSelection 1s infinite alternate;

}

#save i{
  font-size:0.4vmax;
}
#save i::before{
  display:block;
    margin-bottom:0.6vmax;

  font-size:4vmax;
  
}



section.targets .targetsList{
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
  text-align:center;
  
  justify-content:stretch
  
}

section.targets .targetsList i::before{
  display:block;
  font-size:4vmax;
      margin-bottom:1vmax;

  
}
section.targets .targetsList i{
  width:auto;
  display:block;
  flex-grow:1;
  font-size:1vmax;
  
}

.targetsList{
  color:var(--color1);
  opacity:1;
}

.disabled{
  filter: grayscale(100%);
  opacity:0.5;
}

h2,h3,p{
  margin:0.5rem;
  
}

h2{
  margin-top:1rem;
  margin-bottom:0.5rem;
  padding-top:0.5rem;
  border-top:0.05rem solid var(--color3)
}

section{
  margin-bottom:2rem;
}

/* */
/* .genContainer */

.itemsList{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    flex-wrap:wrap;
}

.itemsList.h{
    flex-direction:row;
    justify-content: center;
}


.genContainer > *{
    all: unset;
    display:block;
}

.item {
/*.genContainer > *{*/
    margin:0.4rem;
    display:flex;
    align-items: center;
    justify-content: stretch;
    max-width: 300px;
    width:90vw;
    min-height:10vmin;
    padding:0;
    border-radius:100vmax;
    border:0.05rem solid var(--color3);
    box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);
    background:var(--color3);
    margin:1rem;
    margin-left:0.5rem;
    margin-right:0.5rem;
     text-transform: uppercase; 
}

/* .genContainer > * > *{ */
.item > *{
    border-radius:100vmax;
  display:block;


}

/* .genContainer > * > img { */
.item > img {
        box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);

            height:14vh;
            height: min(96px,14vh);
            background: var(--color0);
        }

/* .genContainer > * > span */
.item > span {
  flex-grow:1;
  
}
.freeChallenge i {
    /* font-size:3rem;
    margin:1rem;
      box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);
      background:var(--color3);
        border-radius:100vmax;
  width:6rem;
    height:6rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
     */
   }

   a.button,a.button:hover,a.button:visited,button{
    all:unset;
 
    display:flex;
    flex-direction: column;
    font-size:0.6rem;
    cursor: pointer;
    margin:0.3rem;
    box-shadow: 0rem 0rem 0.4rem 0rem var(--color0);
    background:var(--color3);
    border-radius:100vmax;
    width:6rem;
    height:6rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-transform: uppercase;
    white-space: normal;
    text-overflow: clip;
    padding:0.2rem;
  }
  a.button i,button i {
    font-size:2rem;
    display:block;
    /* font-size:4vmax; */

  }

  a.button span,button span{
    margin-top:0.6vmax;
    width:90%;
    display:inline-block;

  }

  a.button.large,button.large{
    width:auto;
    font-size:1rem;
    
width: auto;
padding: 1.2rem;
height: auto;
flex-direction: row;

  }

  .buttonsInline{
    display:flex;
    flex-direction: row;
    align-items: stretch;
    width:100%;
    margin:auto;
    margin-top:1rem;
    margin-bottom:1rem;
    flex-wrap: wrap;
    justify-content:center;
  }

  .buttonsInline > button,.buttonsInline > a.button{
    width:40%;
  }

  a.button.large i,button.large i{
    display:inline-block;
    padding-right:1rem;
    padding-left:1rem;
    font-size:2rem;
  }
  a.button.large span,button.large span{
    flex-grow: 1;
    display:inline-block;
    text-align: center;
    margin:0;
    width:auto;
    text-align:right;
padding-right: 2.4rem;
  }

  *{
    user-select: none;
  }
  a.button:active,a.button:hover,button:hover,.item:hover,button:active,.item:active{
        box-shadow: 0rem 0rem 0.4rem 0rem var(--color3);
  filter:brightness(120%);
  }



.buttons{
    display:block;
    position:fixed;
    bottom:1rem;
    left:0;
    width:100%;
    
    display:flex;
    left:0;
    align-items:center;
    justify-content: center;
  }
  
  .buttons > *{
    margin:auto;
    
  }


  sub,sup,.sub{
    text-transform:uppercase;
    font-size:0.8rem;
    font-style:italic;
  }

  .left{
    text-align: left!important;
  }



  content > h1:first-child,content > h2:nth-child(2),
body > h1:first-child,body > h2:nth-child(2){
    z-index:4;
    }
    
    ul,li{
      all:unset;
      display:block;
      text-align:left;
      
    }
    
    ul{ 
      margin-left:2rem;
      font-size:0.9rem;
      
    }

    li i:first-child.fa-solid,li i:first-child.fa-brands {
        width:1.3rem;
        display:inline-block;

    }
    

a,a:hover,a:visited{
    all:inherit;
    text-decoration: underline;
    color:var(--color1);
    display:inline;
}
    

#loading{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:var(--color0);
  opacity:0.8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
   z-index:2;

}

#loading i{
  display:block;
  font-size:10vh;
  margin:4vh;
}


#showcase{
  display:flex;
  flex-direction:row;
  /* flex-wrap: wrap; */

  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0 1rem 0.1rem var(--color3);  
}

#showcase img{
  height:40vh;
}

.blinking {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
      opacity: 0;
  }
}

.highlighted{
  color:var( --color1)!important;
}

content.prrt h1{
  max-width:1000px;
  margin:auto;
  width:100%;
  max-width:1000px;
left:auto;
}


.paymentOptions{
  display:flex;
  flex-direction: row;
  justify-content: center;

}

#qrcontainer{
  max-width: 90vw;
  max-height: 90vw;
    background: #fff;
    display: inline-block;
    margin: auto;
    padding:1rem;
    border-radius: 1rem;
  }

  #qrcontainer > *{
    max-width: 100%;
     margin: 0;
  }

  .lightningChallenge input{
    width: 70%;
    font-size: 0.8rem;
     background: var(--color1);
    color: var(--color0);
    border: 1px solid var(--color1);
    border-radius: 0.55em;
    padding: 0.5rem;
    margin: 1rem;
    font-family: inherit;
    display: block;
    margin: auto;
      margin-top: auto;
      margin-bottom: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    }
  
  content > h2:nth-child(2),body > h2:nth-child(2) {
    display:flex;
    align-items: center;
    justify-content: center;;
  }
  content > h2:nth-child(2) ul,
  body > h2:nth-child(2) ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:90%;
  }

  content > h2:nth-child(2) ul li,
  body > h2:nth-child(2) ul li{
    display:flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1rem;
    flex-grow: 1;
  }

  content > h2:nth-child(2) ul li a,
  body > h2:nth-child(2) ul li a{
    display:flex;
    align-items: center;
    justify-content: center;
    padding-bottom:0.2rem;
  }
  content > h2:nth-child(2) ul li a,content > h2:nth-child(2) ul li a:hover,content > h2:nth-child(2) ul li a:visited,
  body > h2:nth-child(2) ul li a,body > h2:nth-child(2) ul li a:hover,body > h2:nth-child(2) ul li a:visited{
    color: var(--color2);
    cursor: pointer;
    text-decoration: none;

  }
  content.prrt{


  }

  @media only screen and (max-width: 800px) {
    content > h2:nth-child(2) ul span,
    body > h2:nth-child(2) ul span{
      display: none;
    }
  
    .buttonsInline{
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
    }

    .buttonsInline > a.button, .buttonsInline > button{
     width:auto;

    }

    
  }

  .buttonsInline.v{
    display: flex;
    width:100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .buttonsInline.v button,.buttonsInline.v a.button{
    width:auto;
  }

  footer{
    font-size: 0.8rem;
    color: var(--color3);
    margin-top: 3rem;
    text-transform: uppercase;
  }

  footer a,footer a:visited,footer a:hover{
    color: var(--color3);

  }


  #paysummary p b {
    color: var(--color1);
}
#paysummary p span {
    display: block;
    text-align: right;
}

img.gpayAcceptance {
  width: 60%;
}


#unavailable {
  margin-top: 2rem;
  color: var(--color3);
}

.vnotify-container{
  width: 100%!important;
  display: flex!important;
  flex-direction: column!important;
  left: 0!important;
  right: 0!important;
  align-items: center!important;
  z-index: 999!important;
}

.vnotify-info {
  background: var(--color0)!important;
  color:inherit!important;
}

.vnotify-item{
  width:90%!important;
  max-width:600px!important;
}

 a.button,button,a.button:hover,button:hover{
  margin-left: 0.5rem;
    margin-right: 0.5rem;
    cursor:pointer;
}


.buttons > button,.buttons > button:hover{
  margin:auto;
  
}

.goog-te-banner,.goog-te-banner-frame{
  display:none!important;
}

#google_translate_element{
  position:fixed;
  z-index:99;
  bottom:0;
  right:0;
  text-shadow: none;
}

body,html {
  background-position: center bottom;
}

html{
  background-color:rgb(2,48,71);
}
.no-click{
  pointer-events: none;
}

.toggle, .toggle i {
  font-size: 1.2rem;
  margin: 0.4rem;
  font-weight: bold;
  color: var(--color1);
}

.selectBtn{
  position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color3);
    border-radius: 22rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0.3rem 0.01rem var(--color0);
    border: 0.1rem solid var(--color0);
}

.imgCnt[selected="true"] .selectBtn{
  color: var(--color1);
}

.imgCnt{
  position:relative;
}

.disabled{
  pointer-events: none;
  filter: grayscale(100%);
}

.vnotify-container a.button.large, .vnotify-container button.large{
  padding:0.3rem;
}