@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body {
  background: linear-gradient(135deg, #0f2027, #1c323a, #1a343f);
  background-size: 3000% 3000%;
  animation: gradientMove 27s ease infinite;
}
.glass {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 1.5rem;
    box-shadow: 0 6px 32px 0 rgba(31, 38, 135, 0.200);
    overflow: hidden;
}
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #00c8ff77, #0073ff77, #00c6ff77);
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
  input[type="checkbox"].peer:checked::after {
    content: "✓";
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
  }
  input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.05) inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.05) inset !important;
  -webkit-text-fill-color: #fff !important;
}