/* From Uiverse.io by Spacious74 */ 
body {
  background-color: #232325;
}

.button {
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 16px;
  border: none;
  padding: 2px;
  background: radial-gradient(circle 60px at 80% -30%, #ffaadd, #181b1b);
  position: relative;
  color: #fff;
}
.button:hover {
color: #4fbdff;
 background: radial-gradient(circle 60px at 90% -60%, #ffaadd, #181b1b);
  
}
.button:active {
font-size: 1.18rem;
  background: radial-gradient(circle 60px at 90% -30%, #ffaadd, #a8abab);

}
.button::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 60%;
  border-radius: 120px;
  top: 0;
  right: 0;
  box-shadow: 0 0 20px #ffffff38;
  z-index: -1;
}

.blob1 {
  position: absolute;
  width: 70px;
  height: 100%;
  border-radius: 17px;
  bottom: 0;
  left: 0;
  background: radial-gradient(
    circle 40px at 0% 100%,
    #3fe9ff,
    #0000ff80,
    transparent
  );
  box-shadow: -10px 10px 30px #0051ff2d;
}

.inner {
  padding: 4px 18px;
  border-radius: 14px;
  z-index: 3;
  position: relative;
  background: radial-gradient(circle 50px at 90% -80%, #777777, #0f1111);
}
.inner::before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 14px;
  background: radial-gradient(
    circle 50px at 0% 100%,
    #00e1ff1a,
    #0000ff11,
    transparent
  );
  position: absolute;
}

/* bk texture Patterns */
.container2 {
  width: 100%;
  height: 100%;
  --s: 37px; /* control the size */

  --c: #0000, #282828 0.5deg 119.5deg, #0000 120deg;
  --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
  --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
  --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
  background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)), var(--g2),
    var(--g2) var(--s) calc(1.73 * var(--s)), var(--g3) var(--s) 0,
    var(--g3) 0 calc(1.73 * var(--s)) #1e1e1e;
  background-size: calc(2 * var(--s)) calc(3.46 * var(--s));
}

.container {
  /* Basic dimensions and centering */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Dark mode colors and gradient */
  background: #121212; /* Fallback for browsers that don't support gradients */
  background: linear-gradient(
    135deg,
    #121212 25%,
    #1a1a1a 25%,
    #1a1a1a 50%,
    #121212 50%,
    #121212 75%,
    #1a1a1a 75%,
    #1a1a1a
  );
  background-size: 40px 40px;

  /* Animation */
  animation: move 4s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -40px -40px;
  }
}

/* style */
h2 {
  background-color: #a8abfb;
}
.grid-container {
  display: grid;
  grid-template-columns: 200px ;
  gap: 8px;
}