html, body {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
   }
   
   body {
    margin: 0;
    height: 100vh;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
 
  }


  .abstract-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
    overflow: hidden;

  }

  
  .abstract-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120%;
    height: 120%;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 60%);
    transform: skewY(-10deg);
     filter: blur(5px);
  }

  
  .abstract-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150%;
    height: 150%;
    background: linear-gradient(225deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
    transform: skewY(10deg);
    
  }

  
  .lines {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 60%;
    background-image: repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 2px,
      transparent 2px,
      transparent 10px
    );
    opacity: 0.3;
    transform: skewY(-10deg);
  }

 
  .corner-light {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(315deg, rgba(255,255,255,0.1), transparent);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
 filter: blur(10px);
}

p {
    text-align: center;
 font-size: 2em;
 color: white;
 font-family: tahoma;
}
h1 {
     text-align: center;
     color: white;
     font-family: arial;
     font-size: 1.5cm;
     text-shadow: 5px 0px 10px rgb(255, 0, 0), -5px 0px 10px blue, 5px -2px 10px cyan;
}

.box {
    background: linear-gradient(315deg, rgba(44, 44, 44, 0.76), rgba(10, 10, 10, 0.658) );
    border: 2px solid white;
    border-radius: 15px;
    margin: 20px auto;
    padding: 10px;
    width: 80%;
    max-width: 500px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);

}
h2 {
     text-align: center;
 font-size: 1em;
 color: white;
 font-family: sans-serif, 'Courier New', Courier, monospace;
}
h3 {
     text-align: center;
 font-size: 0.7em;
 color: white;
 font-family: sans-serif, 'Courier New', Courier, monospace;
 position: relative;

}
h4 {
  text-align: left;
  position: relative;
  left: 10px;
}


/* btn1 */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(135deg, #4e54c8, #8f94fb);
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
  

}


.box2 {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid white;
  border-radius: 15px;
  padding: 20px 40px;
  text-align: center;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeDown 1.5s ease forwards;
}

.title {
  margin-top: 20px;
  font-size: 2em;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 2s ease forwards;
  animation-delay: 0.8s;
}


.btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 30px;
  font-size: 18px;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid white;
  border-radius: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1000;
}


.btn:hover {
  background: white;
  color: #4e54c8;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}


.btn:active {
  background: #4e54c8;
  color: white;
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* layout */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #4e54c8, #8f94fb);
  font-family: Arial, sans-serif;
  color: white;
}

/* anibtn */
.btn2 {
  display: inline-block;
  padding: 12px 25px;
  font-size: 16px;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid white;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Hov eff */
.btn2:hover {
  background: white;
  color: #4e54c8;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* eff */
.btn2:active {
  background: #4e54c8;
  color: white;
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/*ani*/
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h6 {
font-size: 0.9em;
}

#loader {
  position: fixed; 
  inset: 0;
  display: flex;
   justify-content: center;
    align-items: center;
  background: #0a0a0a; 
  z-index: 9999;
 
  ;
}
.text {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin-bottom: 20px;
  opacity: 0;
  text-align: center;
  top: auto;
  animation: fadeText .5s ease .3s forwards;
}
.spinner {
  background-image: linear-gradient(rgb(175, 174, 174) 35%,rgb(255, 255, 255));
  width: 100px;
  height: 100px;
  animation: spinning82341 1.7s linear infinite;
  text-align: center;
  border-radius: 50px;
  filter: blur(1px);
  box-shadow: 0px -5px 20px 0px rgb(192, 190, 190), 0px 5px 20px 0px rgb(255, 255, 255);
}

.spinner1 {
  background-color: rgb(36, 36, 36);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  filter: blur(10px);
}

@keyframes spinning82341 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn { from{opacity:0}to{opacity:1}}
@keyframes fadeText { to {opacity: 1 }}
@keyframes popUp {to {transform:scale(1)}}
@keyframes fadeOut { to {opacity:0;visibility:hidden;} }