* { margin: 0; padding: 0; box-sizing: border-box; } /* html, body { height: 100%; }*/ body { font-family: Arial, sans-serif; background-color: #073b4c; display: flex; /*flex-direction: column;*/ } h1,h2 { text-align: center; padding: 20px 0; color: #ffd166; } .content { flex: 1; padding: 20px; } #selectopt { font-size: 18px; } .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #022532; color: white; text-align: center; padding: 8px 0; } #main { transition: margin-left 0.5s; padding: 16px; } .container { width: 35%; margin: auto; background: transparent; border-radius: 12px; /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);*/ /*overflow: hidden;*/ } .form { padding: 20px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; } .form input { font-size: 16px; background: #fdfdfd; border: 1px solid #ddd; padding: 15px; border-radius: 5px; border: none; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7); letter-spacing: 1px; font-weight: bold; } .form button { margin-top: 5px; background: #b40e32;/*rgb(124, 191, 0);/*#c8102e;*/ color: white; border: none; padding: 12px; width: 50%; border-radius: 25px; font-size: 18px; font-weight: 600; cursor: pointer; margin-left: 25%; transition: background 0.3s ease; } .form button:hover { background-color: #a90a24; } .menu-btn { position: fixed; left: 10px; top: 10px; background-color: transparent;/*#007bff;*/ color: white; border: none; padding: 10px; cursor: pointer; z-index: 1000; font-size: 21px; } @media (max-width: 480px) { .container { width: 100%; padding: 10px; } h1, h2 { font-size: 24px; } .content { width: 100%; padding-top: 10px; } .footer { visibility: hidden; } #main { padding: 5px; padding-top: 10px; } input { margin-bottom: 10px; } .form button { margin-top: 20px; } #selectopt { font-size: 16px; text-align: center; padding: 10px; } }