@import url('https://fonts.googleapis.com/css2?family=Slackey&family=ZCOOL+QingKe+HuangYou&display=swap');
body{
      color: white;
      background: #051d21 url('../img/bg3.jpg') repeat; /*eb517041-background_100000000000000000001o*/
      background-size: cover;
      position: relative;
      background-position: center top -90rem;
}
/*--- fonts ---*/
.slackey-regular {
      /*font-family: "Luckiest Guy", cursive;*/
      font-family: "Slackey", "ZCOOL QingKe HuangYou", sans-serif;
      font-weight: 400;
      font-style: normal;
}
.fs-lg{
      font-size: 3rem !important;
}
.text-shadow{ text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); }

/*--- buttons ---*/
.btn-primary{
      background: linear-gradient(#0098DB, #0054a6);
      border-width: 0;
}
.btn-primary:active{
      background: linear-gradient(#0054a6, #0054a6);
}
.btn-success{
      background: linear-gradient(#10b088, #198754); /*linear-gradient(#a305a9, #5f0065)*/
      border-width: 0;
}
.btn-success:active{
      background: linear-gradient(#198754, #198754);
}
.btn-dark, .bg-dark{
      background: linear-gradient(#10b088, #198754); /*linear-gradient(#a305a9, #5f0065)*/
      border-width: 0;
}
.btn-danger, .bg-danger{
      background: linear-gradient(#d85100, #ff0000);
      border-width: 0;
}
.btn-dark:active{
      background: linear-gradient(#198754, #198754); /*linear-gradient(#65006a, #65006a)*/
}
button:focus:not(:focus-visible){ box-shadow: none; }
.text-success{ color: #37d0aa !important; }

/*--- accordion ---*/
.accordion-item{
      background-color: transparent;
      border: none;
}
.accordion-button{
      /*background: rgba(77, 6, 123, 1);
      color: rgb(245, 178, 239);*/
      background: #198754;
      color: white;
}
.accordion-button:after{
      background-image: none;
      content: '\002B';
      font-weight: 900;
}
.accordion-button:not(.collapsed) {
      background: #37d0aa; /*#7209B8*/
      color: #083636; /*white*/
}
.accordion-button:not(.collapsed):after{
      background-image: none;
      content: '\2212';
      transform: unset;
      animation-name: fadeInOpacity;
      animation-iteration-count: 1;
      animation-timing-function: ease-in;
      animtion-duration: 2s;
}
@keyframes fadeInOpacity {
      0% {
            opacity: 0;
      }
      100% {
            opacity: 1;
      }
}
.header-list{
      flex-wrap: wrap;
      position: relative;
}
/*.header-list:before,*/ .header-list:after{
      content: ' ';
      position: absolute; left: 15%; 
      width: 70%; height: 1px; 
      border-top: 1px dotted #ffffff;
}
.header-list:before{ top: 0; }
.header-list:after{ bottom: 0; }
.header-list > .header-list-item {
      position: relative;
      width: 100%;
      max-width: 33.33%; /*25%*/
      padding: 10px;
      text-align: center;
}

#logo{ width: 230px; }


/*--- Floating images ---*/
.floating-img-wrapper{ position: relative; z-index: 999;}
.floating-img-wrapper > img{ position: absolute; }
#header-img1{
      top: 0; right: 0;
      width: 96px;
}
#header-img2{
      z-index: 16;
      top: 72px; /*left: -41px;*/
}
#header-img2 > img{
      width: 110px; /*150px*/
}
#form-img1{
      
      /*left: 148px; top: 335px; width: 552px;*/
      /*z-index: 64; width: 470px; top: 400px; */

      position: absolute; left: 100px;
}
.mintinglive-wrapper{ position: relative; z-index: 10; }
#form-img2{
      z-index: 13;
      /*top: 319px; left: 612px;
      width: 298px;*/

      width: 80px;
      top: 350px;
      left: unset;
      right: 0;
}
#wakattaplanet-img1{
      top: 801px; left: -104px;
      z-index: 17;
      width: 336px;
}
#wakattaplanet-img2{
      z-index: 19; left: -341px;
      /*top: 784px; 
      width: 760px;*/

      width: 470px; top: 1300px;
}
#takoescape-img1{
      z-index: 21;
      /*top: 1524px;*/ left: 546px;
      width: 303px;
}
#takoescape-img2{
      z-index: 22;
      /*top: 1461px;left: 153px;*/
      width: 443px;
}
#takodilemma-img1{
      z-index: 25;
      width: 760px;
}
#takodilemma-img2{
      z-index: 29;
      width: 305px;
      top: -40%; left: -20%;
}
.nftfpf-wrapper{
      padding-top: 15rem;
      background: url('../img/1-bright.png') top right no-repeat; /*planet-earth.png*/
      background-size: 634px 647px;
}    



/*-- fixed content --*/
.fixed-content{
      position: relative;
      z-index: 1000;
}
.btnUnits{
      width: 65px;
}
.wakattaplanet-wrapper{
      margin-left: 229px;
}

/*-- Menu --*/
#menu{ background: linear-gradient(rgba(16, 176, 136,0.5), rgba(25, 135, 84,0.5)); }
.menu-item{ position: relative; text-align: center;}
.menu-item:not(:last-child):after{
      content: ' ';
      position: absolute;
      top: 20%; right: 0;
      width: 1px;
      height: 60%;
      border-right: dotted 1px #fff;
}
.menu-item > a{
      display: block;
      padding-top: 1rem;
      padding-bottom: 1rem;
      color: white;
      text-decoration: none;
      position: relative; z-index: 10;
      opacity: 0.7;
      transition: opacity .35s ease-in-out;
      -moz-transition: opacity .35s ease-in-out;
      -webkit-transition: opacity .35s ease-in-out;
}
.menu-item > a:hover{ opacity: 1; }
.menu-item > a:after{
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      content: " ";
      position: absolute; z-index: -1;
      z-index: 0;
      opacity: 0;
      transition: opacity .35s ease-in-out;
      -moz-transition: opacity .35s ease-in-out;
      -webkit-transition: opacity .35s ease-in-out;
      background: linear-gradient(5deg, #5ddd42 12.9254386713%, #b9e487 12%);
      -webkit-mask: radial-gradient(circle at 50% 80%, black 0%, transparent 50%);
}
.menu-item > a:hover:after{ opacity: 0.7; }

/*--- Form ---*/
#inputUnits{ height: 46px; }




@media only screen and (max-width: 600px) {
      body{ background-size: unset; }
      #header-img1{ width: 46px; left: 281px; top: 0; }
      #header-img2{ /*width: 89px; width: 170px; */ left: 0; top: 100px; }
      #header-img2 > img{ width: 89px; }
      #form-img1{ width: 227px; left: 80px; top: 250px; /*top: 550px;*/ }
      #form-img2{ /*width: 108px; left: 251px;*/ top: 500px;}
      #wakattaplanet-img1{ width: 183px; left: 195px; top: 503px;}
      #wakattaplanet-img2{ /*width: 411px; left: -0; top: 1420px;*/  width: 270px; left: 15%; top: 1350px;}
      #takoescape-img1{ width: 141px; left: unset; right: 0; top: 3rem; }
      #takoescape-img2{ width: 269px; }
      #takodilemma-img1{ width: 337px; }
      #takodilemma-img2{ width: 137px; left: 0; top: -20%;}
      #planetearth-img1{ width: 274px; }
      #top-token{
            position: absolute;
            top: 3.5rem;
            left: 0;                  
      }

      .fs-lg{ font-size: 1.8rem !important; }
      .fs-2{ font-size: 1.3rem !important; }
      .header-list:before, .header-list:after{
            width: 100%;
            left: 0;
      }
      .header-list > .header-list-item {
            max-width: 50%;
      }
      .wakattaplanet-wrapper{ margin-left: 0;  /*width: 275px;*/ padding: 0 15px; margin: 0 auto;}
      .wakattaplanet-wrapper > h3{ margin-bottom: 16rem !important; text-align: center;}
      .takoescape-wrapper > h3, .takodilemma-wrapper > h3{ margin: 0.75rem 0 !important; }
      .takoescape-content, .takodilemma-content{ margin: 0 auto;  padding: 0 15px; }
      .nftfpf-wrapper>.row, .faq-wrapper > .accordion{
            margin: 0 auto;
            width: 275px;
      }
      .nftfpf-wrapper{ background-size: 274px auto; padding-top: 4rem; }

      /*.faq-wrapper > h3{ margin-top: 0.5rem !important; }*/
}