.modal { background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */ backdrop-filter: blur(10px); /* Sophisticated blur effect */ position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; align-items: center; } .modal-content { margin-top: 20vh; background: radial-gradient(circle, #222, #000); /* Dark radial gradient */ color: #fff; border-radius: 20px; border: none; box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Intense shadows */ transform: perspective(1000px) rotateX(5deg); /* 3D tilt effect */ padding: 20px; width: 40vw; margin-left: auto; margin-right: auto; } .bouton-ok { background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */ font-size: 20px; color: white; border: none; border-radius: 50px; padding: 15px 30px; cursor: pointer; animation: pulse 1.5s infinite; /* Pulse animation */ transition: transform 0.3s ease; } .bouton-ok:hover { transform: scale(1.2) ; /* Slightly larger on hover */ background-color: rebeccapurple; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }