body { font-family: Arial, sans-serif; } #menu { margin: 20px; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; } .modal-content { background: white; padding: 20px; border-radius: 5px; width: 90%; /* Changed from fixed width to percentage */ max-width: 700px; /* Added max-width */ height: auto; /* Changed to auto for flexibility */ } .main-panel { width: 90%; /* Changed from fixed to percentage */ max-width: 550px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; margin: auto; /* Center the panel */ } .header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: linear-gradient(90deg, var(--header-gradient-start), var(--header-gradient-end)); color: var(--text-light); } .logo { display: flex; align-items: center; font-weight: bold; font-size: 1.1em; } .header-controls { display: flex; align-items: center; gap: 20px; } /* Adjust the menu items */ .menu { list-style-type: none; padding: 0; background-color: var(--form-bg); margin: 0; /* Remove default margin */ } .menu-item { margin: 10px 0; display: flex; /* Ensure items are in a row */ align-items: center; }