.menue-modal { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); background: #000000; padding: 30px; border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.932); color: #f0f0f0; /* Light gray text color */ text-align: center; width: 90%; max-width: 900px; z-index: 1001; animation: fadeIn 0.3s ease-out; } .menue-modal-overlay { background-color: rgba(0, 0, 0, 0.8); z-index: 1000; border: none; } .modal-content { display: flex; flex-direction: column; align-items: center; border: none; } .modal-actions { display: flex; justify-content: center; gap: 15px; } .confirm-button { background: #3f55d2; /* Soft blue for the confirm button */ color: #fff; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; transition: background 0.3s ease; } .confirm-button:hover { background: #4244b3; /* Slightly darker blue on hover */ } .cancel-button { background: #b0bec5; /* Light silver-blue for the cancel button */ color: #000; /* Dark text color for contrast */ border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; transition: background 0.3s ease; } .cancel-button:hover { background: #90a4ae; /* Slightly darker silver-blue on hover */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { .menue-modal { width: 85%; padding: 20px; } .modal-title { font-size: 2rem; } .confirm-button, .cancel-button { padding: 10px 20px; font-size: 1rem; } } .version { font-family: "Open Sans", sans-serif; color: #f5f5f5; text-shadow: 0 0 5px rgb(51, 68, 255), 0 0 10px rgb(51, 221, 255), 0 0 15px rgb(51, 139, 255), 0 0 20px rgb(21, 0, 255), 0 0 30px rgb(0, 255, 208), 0 0 40px rgb(51, 204, 161), 0 0 50px rgb(51, 125, 204), 0 0 75px rgb(77, 51, 204); font-weight: lighter; font-style: normal; } .links{ color: #f5f5f5; font-family: "Signika"; font-optical-sizing: auto; font-style: normal; font-variation-settings: "GRAD" 0; cursor: pointer; text-decoration-line: none; }