body { background-color: #0a1f44; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #ffffff; margin: 0; padding: 0; } .container { max-width: 600px; margin: 50px auto; padding: 30px; background-color: #112a56; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 140, 255, 0.5); } h2, h3 { text-align: center; color: #00b4ff; margin-bottom: 20px; } form { display: flex; flex-direction: column; gap: 15px; } input[type="text"], input[type="file"] { padding: 10px; border: none; border-radius: 6px; font-size: 16px; background-color: #1b3969; color: #fff; } button { padding: 12px; background: linear-gradient(90deg, #007bff, #00d0ff); color: white; font-weight: bold; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background 0.3s ease; } button:hover { background: linear-gradient(90deg, #005bb5, #00a6cc); } video { display: block; margin: 0 auto; border: 3px solid #00b4ff; border-radius: 8px; } hr { border: 1px solid #00b4ff; } canvas { display: none; } .note { text-align: center; font-size: 13px; color: #aaa; margin-top: -10px; } /* Modal Styles */ .modal { display: none; position: fixed; z-index: 999; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); } .modal-content { background-color: #1b3969; margin: auto; padding: 20px; border: 1px solid #00b4ff; width: 90%; max-width: 500px; border-radius: 10px; text-align: center; } .modal-content h3 { color: #00b4ff; } .close { color: #fff; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .modal-buttons { margin-top: 10px; } .modal-buttons button { margin: 5px; }