Create style.css

style.css

@@ -0,0 +1,50 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: url('https://raw.githubusercontent.com/Bolaolat/Giveaway-/main/_1.jpg') no-repeat center center fixed;
+    background-size: cover;
+    color: #fff;
+}
+
+.overlay {
+    position: relative;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 3rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    max-width: 500px;
+    width: 90%;
+    margin: auto;
+    margin-top: 10vh;
+}
+
+.loader {
+    width: 100px;
+    height: 40px;
+    --g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#fff calc(100% - 3px) 98%,#0000 101%) no-repeat;
+    background: var(--g), var(--g), var(--g);
+    background-size: 30px 30px;
+    animation: l9 1s infinite alternate;
+    position: absolute; /* Position the loader over the overlay */
+    top: 50%; /* Center it vertically */
+    left: 50%; /* Center it horizontally */
+    transform: translate(-50%, -50%); /* Offset the position */
+}
+
+@keyframes l9 {
+    0% { background-position: 0 50%, 50% 50%, 100% 50%; }
+    20% { background-position: 0 0, 50% 50%, 100% 50%; }
+    40% { background-position: 0 100%, 50% 0, 100% 50%; }
+    60% { background-position: 0 50%, 50% 100%, 100% 0; }
+    80% { background-position: 0 50%, 50% 50%, 100% 100%; }
+    100% { background-position: 0 50%, 50% 50%, 100% 50%; }
+}
+
+@media (max-width: 640px) {
+    .overlay {
+        padding: 1.5rem;
+        margin-top: 2rem;
+    }
+}