.uppercase {text-transform: uppercase}
  .text-sm {
      font-size: .875rem;
      line-height: 1.25rem;
  }
  @keyframes button_hover {
  0% {
      left: -100%;
  }
  50% {
      left: 200%;
  }
  100% {
      left: -100%;
  }
  }
  
  /* Default */
  
  .default {
      display: flex;
      max-width: 1170px;
      margin: 72px auto;
      padding: 57px;
      border: 1px dashed #5f5f5f;
      align-items: center;
      justify-content: center;
  }

  temawart {
    background: linear-gradient(0deg, #0000005e, #120f1a87) no-repeat;
    background-attachment: fixed;
    display: block;
    width: 100%;
    height: 100%;
}
  
  /* Main */
  
  main-tema {
    position: relative;
    display: flex;
    z-index: 0;
    overflow: hidden;
  }
  
  /* Main - block1 */
  
  .block1 {
      display: flex;
      margin: 7rem 0;
      flex-direction: column;
  }
  .bk1_box {
      display: flex;
      width: 100%;
      height: 700px;
      align-items: center;
      z-index: 1;
  }
  .bk1_info {
      display: flex;
      width: 100%;
      max-width: 400px;
      flex-direction: column;
      align-items: flex-start;
  }
  .bk1_info h1 {
      margin: 5px 0 1rem;
      font-size: 40px;
      font-weight: 600;
  }
  .bk1_info h2 {
      font-size: 1.25rem;
  }
  .demo {
      background: var(--c1);
      display: inline-flex;
      margin: 1rem 0 0;
      padding: 11px 16px;
      font-size: 20px;
      font-weight: 600;
      color: var(--w);
      border: 1px solid var(--c1);
  }
  .demodown {
      display: inline-flex;
      margin: 0 0 0 14px;
      padding: 11px 16px;
      font-size: 20px;
      font-weight: 300;
      border: 1px solid var(--c1);
      color: var(--w);
  }
  .bk1_img {
      position: relative;
      display: flex;
      margin: 0 0 0 6rem;
      z-index: 3;
  }
  .bk1_img:before {
      content: '';
      background: url(/img/temawart/desktop.webp);
      background-repeat: no-repeat;
      background-position: center top;
      position: absolute;
      width: 200%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      transform: skew(352deg, 0deg);
      animation: move 30s infinite ease;
      filter: blur(6rem) drop-shadow(0px 0px 1px);
      color: #4100ff42;
  }
  .bk1_img:after {
      content: '';
      background: url(/img/temawart/desktop.webp);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
      position: absolute;
      width: 100%;
      height: 100%;
      min-width: 457px;
      min-height: 626px;
      top: -4rem;
      left: 8rem;
      transform: skew(352deg, 0deg);
      border-radius: var(--br);
      z-index: -1;
      animation: move 30s infinite ease;
  }
  .bk1_img:hover:after {
      -webkit-animation-play-state: paused;
  }
  @keyframes move {
  0% {
      background-position: 0% 0%;
  }  
  50% {
      background-position: 0% 100%;
  }
  100% {
      background-position: 0% 0%;
  }
  }
  .bk1_img div {
      position: relative;
      width: 245px;
      height: 490px;
  }
  .bk1_img div:after {
      content: '';
      position: absolute;
      background: url(/img/temawart/mobile.webp);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      border: 1px solid #ffffff38;
      border-radius: 26px;
      box-shadow: 13px 11px 38px -25px black;
  }
  @media (min-width: 768px) {
  .bk1_info h1 {
      font-size: 2.25rem;
      line-height: 2.5rem;
  }
  .bk1_info h2 {
      font-size: 1.125rem;
      line-height: 1.75rem;
  }
  }
  @media (min-width: 1024px) {
  .bk1_info h1 {
      font-size: 3rem;
      line-height: 1;
  }
  .bk1_info h2 {
      font-size: 1rem;
      line-height: 1.75rem;
  }
  }
  @media (max-width:768px) {
  .block1 {margin: 0 0 18rem}   
  .bk1_box {
      margin: 5rem 0 22rem;
      padding: 0;
      flex-wrap: wrap;
      border: 0;
      box-shadow: 0 0 0;
  }  
  .bk1_info {
      max-width: 100%;
      margin: 0 0 6rem;
  }
  .bk1_img {
      width: 100%;
      margin: 0;
  }
  .bk1_img div {
      display: flex;
      width: 100%;
      height: 312px;
      justify-content: center;
  }
  .bk1_img div:after {
      width: 155px;
      top: 115%;
      right: 14px;
      border-radius: 15px;
  }
  .bk1_img:before, .bk1_img:after {
      width: 100%;
      min-width: 100%;
      top: -2rem;
      left: 0;
      transform: none;
  }
  }
  
  /* Main - block2 */
  
  main-tema .block2 {
    background: linear-gradient(90deg, transparent 10%, #00b8ff29 50%, transparent 90%);
    position: relative;
    display: flex;
    padding: 60px 0;
    align-items: center;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #00000000 0%, #00a1ff, #00000000 100%) 1;
    box-shadow: 0rem -5rem 6rem -9rem #02efff, 0rem 6rem 6rem -9rem #02c5ff;
 }
  main-tema .block2:after {
      content: '';
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      border-top: 1px solid;
      border-image: linear-gradient( to right, #00000000 0%, #00dcff, #00000000 100% ) 1;
  }
  main-tema .video_section {
      background: white;
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 600px;
      border-radius: var(--br);
      overflow: hidden;
  }
  main-tema .video_wrapper {
      position: relative;
      padding-top: 56.26%;
  }
  main-tema .video_play {
      background: linear-gradient(45deg, #1c859d70, #833bb769);
      display: flex;
      vertical-align: middle;
      justify-content: center;
      align-items: center;    
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 2;
  }
  main-tema .video_play a {
      display: flex;
      width: 136px;
      height: 136px;
      color: #ffffffad;
      border-radius: 100%;
      border: 1px solid #ffffff45;
      box-shadow: 0 0 26px -16px #000000;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      align-items: center;
      justify-content: center;
  }
  main-tema .video_play svg {
      width: 80px;
      height: 80px;
  }
  main-tema .video_wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  main-tema .video_title {
      max-width: 600px;
      padding: 0 0 0 3rem;
  }
  main-tema .video_title h1 {
      margin: 0 0 1rem;
      font-size: 40px;
      font-weight: 600;
  }
  main-tema .video_title h2 {
      font-size: 1.25rem;
  }
  main-tema .canal {
      background: var(--c1);
      display: inline-flex;
      margin: 1rem 0 0;
      padding: 11px 16px;
      font-size: 20px;
      font-weight: 500;
      color: var(--w);
  }
  
  @media (min-width: 768px) {
    main-tema .video_title h1 {
      font-size: 2.25rem;
      line-height: 2.5rem;
  }
  main-tema .video_title h2 {
      font-size: 1.125rem;
      line-height: 1.75rem;
  }
  }
  @media (min-width: 1024px) {
    main-tema .video_title h1 {
      font-size: 3rem;
      line-height: 1;
  }
  main-tema .video_title h2 {
      font-size: 1.25rem;
      line-height: 1.75rem;
  }
  }
@media (max-width:768px) {
main-tema .block2 {
    padding: 25px 0;
    flex-wrap: wrap
}
main-tema .video_title {
      margin: 3rem 0 0;
      padding: 0;
  }
  }
  
  /* Main - block3 */
  
  main-tema .block3 {
      margin: 10rem 0;
  }
  .bk3_text {
      display: flex;
      margin: 0 0 6px 0;
      flex-direction: column;
  }
  .bk3_text h2 {
      display: flex;
      flex-direction: column;
  }
  .bk3_title {
    margin: 5px 0 0;
    font-size: 40px;
    font-weight: 600;
    line-height: 45px;
  }
  .bk3_description {
      margin: 10px 0 0;
      font-size: 1.25rem;
  }
  .bk3_container {
    display: flex;
    margin: 30px 0;
    flex-wrap: wrap;
  }
  .bk3_box {
    position: relative;
    width: 100%;
    max-width: 30%;
    min-width: 250px;
    margin: 10px;
  }
  .bk3_block {
    height: 100%;
    padding: 10px;
    border: 1px solid #ffffff26;
    border-radius: var(--br);
    overflow: hidden;
  }
  .bk3_img {
      position: relative;
      width: 100%;
      height: 250px;
  }
  .bk3_img:after {
      content: '';
      background-color: #ffffff14;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: left;  
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: var(--br);
      -webkit-filter: contrast(1.15);
      filter: contrast(1.15);
  }
  .img1:after {
      background-image: url(/img/temawart/tools/lp.webp);
  }
  .img2:after {
      background-image: url(/img/temawart/tools/pwa.webp);
  }
  .img3:after {
      background-image: url(/img/temawart/tools/voz.webp);
  }
  .img4:after {
      background-image: url(/img/temawart/tools/parcela.webp);
  }
  .img5:after {
      background-image: url(/img/temawart/tools/bundle.webp);
  }
  .img6:after {
      background-image: url(/img/temawart/tools/cart.webp);
  }
  .bk3_content {
      position: relative;
      display: flex;
      width: 100%;
      padding: 20px 10px 0;
      box-sizing: border-box;
      transition: .5s;
      flex-direction: column;
  }
  .bk3_content .bk3_box_title {
      color: var(--w);
      margin: 0 0 7px;
      padding: 0;
      font-size: 23px;
      font-weight: 600;
  }
  .bk3_content .bk3_box_description {
      font-size: 14px;
      color: #fff;
      margin: 0;
      padding: 0;
  }
  .bk3_content .bk3_box_description a {
    color: #c1abff;
}
  @media (min-width: 768px) {
  .bk3_title {
      font-size: 2.25rem;
      line-height: 2.5rem;
  } 
  .bk3_description {
      font-size: 1.125rem;
      line-height: 1.75rem;
  }
  }
  @media (min-width: 1024px) {
  .bk3_title {
      font-size: 3rem;
      line-height: 1;
  } 
  .bk3_description {
      font-size: 1rem;
      line-height: 1.75rem;
  }
  }
  
  @media (max-width: 768px) {
  .bk3_box {
    max-width: 100%;
    margin: 15px 0 15px 9px;
    border-radius: var(--br);
    box-shadow: 0 0 15px -7px black;
}
.bk3_container {
    margin: 30px 0 0;
    flex-wrap: nowrap;
    overflow: auto;
}
main-tema .block3 {margin: 5rem 0}
.bk3_description {
    font-size: 1rem;
    line-height: 24px;
}
}
  
  /* Main - Pricing */
  
  .block4 {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: flex-start;
  }
  .title_price {
      display: flex;
      width: 100%;
      margin: 0rem 0 14rem 0;
      flex-direction: column;
      align-items: center;
      line-height: 49px;
      text-align: center;
  }
  .title_price h1 {
    max-width: 900px;
}  
  .title_price h2 {
      margin: 1rem 0 0;
  }
  .bk4_block {
    background: linear-gradient(0deg, #4e486569, transparent);
    position: relative;
    display: flex;
    width: 100%;
    max-width: 335px;
    margin: 0 0 45px;
    padding: 20px;
    border-radius: var(--br);
    border: 1px solid #ffffff17;
    box-shadow: 0 10px 25px -15px black;
    flex-wrap: wrap;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transform: translateY(0px);
    transition: .5s;

    &:hover {
        border: 1px solid var(--c1);
    }
    &:hover .bk4_img:after {
        transform: translateY(-10px);
        transition: .5s;
    }
  }
  .info_theme {
      padding: 10px 17px;
      font-size: 14px;
  }
  .bk4_img {
      width: 100%;
      height: 141px;
      margin: -8rem 0 11rem;
  }
  .bk4_img:after {
      content: '';
      background-image: url(/img/temawart/pricing/box.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      max-height: 300px;
      left: 0;
      border-radius: var(--br);
      transition: .5s;
  }
  .bk4_img.image1:after {
    filter: hue-rotate(316deg);
}
  .bk4_text {
      display: flex;
      height: 100%;
      margin: 0 0 6px 0;
      flex-direction: column;
      align-items: flex-start;
  }
  .bk4_title {
      margin: 0 0 20px;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
  }
  .bk4_description {
      margin: 0 0 25px;
      font-size: 15px;
  }
  .b4k_benefits {
      display: flex;
      margin: 10px 0 0;
      align-items: center;
  }
  .b4k_benefits a {
      padding: 0 5px;
  }
  .b4k_benefits i {
      margin: 0 8px 0 0;
  }
  .box_buy {
      display: flex;
      width: 100%;
      margin: 1rem 0 0;
      align-items: center;
      justify-content: center;
  }
  #compraTema, #compraTemaVip {
      background: #00000059;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: var(--br);
      -webkit-backdrop-filter: blur(7px);
      backdrop-filter: blur(7px);
  }
  .buy {
    background: none;
    display: inline-flex;
    width: 100%;
    padding: 11px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--w);
    border: 1px solid #ffffff2b;
    border-bottom: 1px solid var(--c1);
    box-shadow: 0 -15px 30px -21px var(--c1) inset;
    justify-content: center;
    transition: all 1s linear;
  }
  .buy:hover {
    border: 1px solid var(--c1);
    box-shadow: 0 0px 30px -3px var(--c1)inset;
    transition: all 1s linear;
  }
  .buy:before {
      content: '';
      position: absolute;
      background: linear-gradient(0deg, #ffffff1f, transparent);
      width: 100%;
      height: 100%;
      top: -1rem;
      border-radius: 100%;
  }
  .payments {
      display: flex;
      margin: 25px 0;
      align-items: flex-start;
      flex-direction: column;
  }
  .valor {
    display: flex;
    margin: 0 10px 0 0;
    font-size: 35px;
    font-weight: 700;
    flex-direction: column;
  }
  .priceDesc {
    font-size: 18px;
}
  .pix {
      background: var(--c1);
      margin: 10px 0 0;
      padding: 0 5px;
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      transform: skewX(-10deg);
  }
  .buydemo {
      margin: 0 0 0 15px;
      font-size: 17px;
      font-weight: 500;
      color: var(--w);
  }
  .payments img {
      width: 140px;
      margin: -10px 0 8px 0;
  }
  
  @media (max-width:768px) {
  .block4 {margin: 0 0 -2rem}  
  .bk4_block {
    margin: 0 auto 10rem;
  }
  .info_theme {display: none}
  }


  /* PIX */

#content {
        width: 100%;
    }
         #uservip_qrcode {
             margin: 2rem 0 0;
         }    
#paypix_themewart {
         background: white;
         position: fixed;
         width: 100%;
         max-width: 700px;
         top: -50%;
         left: 50%;
         border: 1px solid #c9c9c9;
         border-radius: var(--br);
         flex-direction: column;
         box-shadow: 0 0 20px -8px black;
         transform: translate(-50%, -50%);
         overflow: hidden;
         z-index: 2000;
         transition: all 1s ease;
         }
.openpop #paypix_themewart {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         transition: all 1s ease;
     }  
#pay-vip_close {
         background: none;
         position: absolute;
         top: 10px;
         right: 12px;
         padding: 0;
         border: 0;
         font-size: 20px;
         cursor: pointer;
         }    
         .section_pix {
         display: flex;
         align-items: center;
     }  
.title_themewart {
             display: block;
             margin: 0 0 17px;
             font-size: 20px;
             font-weight: 500;
             text-align: center;
             color: black;
         }
         #qrcode_text {
             word-break: break-word;
             font-size: 13px;
             font-weight: 400;
             color: black;
             line-height: 22px;
         }
         .info_pix {
             display: flex;
             padding: 15px;
             justify-content: space-between;
             flex-direction: column;
             align-items: flex-start;
         }
     .copy_code {
         margin: 1rem 0 0;
         padding: 15px 50px;
         font-size: 15px;
         font-weight: 600;
         color: white;
         border: 0;
         border-radius: var(--br_button);
         text-transform: uppercase;
         transition: all 1s ease;
     
     &:hover {
         transition: all 1s ease;
     }
     
         }
         .pix_footer {
             background: whitesmoke;
             display: flex;
             padding: 16px;
             font-size: 15px;
             font-weight: 600;
             color: black;
             border-top: 1px solid #c8c8c8;
             justify-content: space-between;
         }
         #timer {
         margin-left: 10px;
         color: red;
     }
     #show_themewart {
         background: #2e2933 url(/img/mkBg.webp) no-repeat;
         background-size: cover;
         position: relative;
         display: flex;
         max-width: 400px;
         margin: 0 auto 1rem;
         padding: 15px;
         border: 0;
         border-radius: var(--br);
         text-align: center;
         color: white;
         justify-content: space-between;
     }
     #result_themewart {
         display: none;
         width: 100%;
         background: #ffffff21;
         margin: 0 15px 0 0;
         padding: 10px;
         border-radius: var(--br);
         justify-content: center;
         border: 1px solid #ffffff0a;
         backdrop-filter: blur(3px);
         -webkit-backdrop-filter: blur(3px);
     }
     #downloadButtonWART a {
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        text-transform: none;
        color: white;
     }
     #aviso {
         display: none;
         font-size: 14px;
     }
     #aviso_telegram {
         display: none;
         font-size: 12px;
         color: #d5d5d5;
         text-align: center; 
     }
     #telegramLink {
         display: none;
         margin: 1rem 0 0;
         justify-content: center;
     }
     #telegramLink a {
         padding: 10px;
         font-size: 14px;
         color: #ffffff;
         border-top: 1px solid #ffffff2e;
     }
     #telegramLink a:hover {
         color: #ffffffa3;
     }
     #linkfile {
         text-align: left;
         font-size: 14px;
         color: #ffffff;
     }
     #downcode {
        display: inline-flex;
        width: 50px;
        font-size: 30px;
        padding: 4px;
        stroke: white;
        border-radius: 10em;
        cursor: no-drop;
        background: none;
        border: 1px solid #ffffff2b;
        border-bottom: 1px solid var(--c1);
        box-shadow: 0 -15px 30px -21px var(--c1) inset;
        justify-content: center;
        transition: all 1s linear;
        align-items: center;
     }

/* Backup Code */
#txid {
    background: #0000005c;
    display: none;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid var(--bo);
    border-radius: var(--br);
    flex-direction: column;
    align-items: center;
    word-break: break-word;
}
.bcbox {
    margin-bottom: 15px;
    padding: 0 0 10px;
    border-bottom: 1px #ffffff24;
    border-style: dashed;
}
.bcbox div {
    color: #a6ff00;
}
#txid span {
    display: block;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #ff0039;
}

     #boxdiv {
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .blockLink {
         display: flex;
         width: 100%;
         align-items: center;
         justify-content: space-between;
     }
     #totalPriceFooter {
         display: flex;
         flex-direction: column;
         align-items: flex-end;
     }
     temawart select {
        background: none;
        display: flex;
        color: #fff;
        padding: 11px 30px 11px 15px;
        font-size: 20px;
        font-weight: 700;
        border: 1px solid var(--bo);
        border-radius: var(--br_button);
        outline: none;
        transition: all 0.3s ease;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ffffff" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px;
        cursor: pointer;

        &:hover {
            border: 1px solid var(--c1);
            box-shadow: 0 0px 30px -3px var(--c1)inset;
            transition: all 1s linear;
          }
     }
     
     temawart select:hover {
       background-color: #2e2a3e;
     }
     
     temawart select option {
       background-color: #1e1b2d;
       color: #ffffffc7;
     }
     
     /* Estilos do contêiner */
     .quantity-container {
       display: flex;
       align-items: center;
       margin-top: 20px;
     }
     .quantity-container label {
       margin-right: 10px;
       font-weight: 500;
       font-size: 14px;
       color: #ffffff;
     }
     .quantity-container select {
       width: 200px;
     }
     .qtyBuy {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
     }
     .qtyBuyBox button {
         margin: 0rem 10px 0 0 !important;
     }
     .qtyBuyBox {
        display: flex;
        width: 100%;
        margin: 0 0 2rem;
     }
     
     /* Animação de carregamento */
       .loading-placeholder {
       background-color: #f0f0f0;
       background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
       background-size: 200% 100%;
       animation: loading 1.5s infinite;
       border-radius: 4px;
     }
     
     @keyframes loading {
       0% {
           background-position: 200% 0;
       }
       100% {
           background-position: -200% 0;
       }
     }
     
     /* Estilo para o placeholder do QR Code */
     #qrcode.loading-placeholder {
       width: 200px;
       height: 200px;
     }
     
     /* Estilo para o placeholder do texto */
     #qrcode_text.loading-placeholder {
       width: 100%;
       height: 20px;
       margin-top: 10px;
     }
     @media (max-width:768px) {
         #paypix_themewart {
                 max-width: 90%;
         }
         .section_pix {flex-wrap: wrap}
         #qrcode, #qrcode img {width: 100%}
         .info_pix {
             flex-direction: column;
             text-align: justify;
             align-items: stretch;
         }
         .copy_code {
             font-size: 12px;
             font-weight: 800;
         }
         #show_themewart {
         margin: 0 auto 2rem;
     }   
         }


/* Efeito de particulas */

body .vertical-centered-box {
    position: fixed;
  }
  body .vertical-centered-box:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
  body .vertical-centered-box .content {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 0;
  }
  .loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    margin-left: -60px;
    margin-top: -60px;
  }
  .loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    transform-origin: 60px 60px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
    animation: rotate 1.2s infinite linear;
  }
  .loader-line-mask .loader-line {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  }
  #particles-background, #particles-foreground {
      left: -51%;
      top: -51%;
      width: 200%;
      height: 200%;
      transform: scale3d(0.5, 0.5, 1);
      z-index: -3;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fade {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.25;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }