styles.css

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 0.5s 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;
    }
}