.formContainer { display: flex; justify-content: center; align-items: center; padding: 40px 20px; background-color: #f7f7f7; min-height: 100vh; } .applicationForm { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 700px; width: 100%; border: 1px solid #ddd; box-sizing: border-box; } .formTitle { font-size: 26px; font-weight: bold; color: #333; margin-bottom: 25px; text-align: center; } .formGroup { margin-bottom: 20px; } .formGroup label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } .formGroup input[type="text"], .formGroup input[type="email"], .formGroup input[type="tel"], .formGroup input[type="file"], .formGroup input[type="url"], .formGroup textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; box-sizing: border-box; } .formGroup input[type="text"]:focus, .formGroup input[type="email"]:focus, .formGroup input[type="tel"]:focus, .formGroup input[type="file"]:focus, .formGroup input[type="url"], .formGroup textarea:focus { border-color: #e0a500; outline: none; } .innerFormContainer { display: flex; margin-bottom: 10px; } .innerFormData { flex-direction: row; justify-content: space-between; width: 120%; } .innerFormData:first-child { margin-right: 2%; } .buttonContainer { text-align: right; } .submitButton { background-color: #e0a500; color: #fff; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } .submitButton:hover { background-color: #cc8b00; } .addIngredientButton { margin-top: 10px; background-color: #FFA500; color: white; border-radius: 5px; border: 1px solid #FFA500; padding: 5px 10px; transition: background-color 0.5s ease; } .addIngredientButton:hover { cursor: pointer; background-color: white; color: #FFA500; transition: background-color 0.3s ease; } .removeIngredientButton { background-color: #FFA500; color: white; border-radius: 5px; padding: 5px 20px; margin-left: 10px; border: 1px solid #FFA500; transition: background-color 0.3s ease; } .removeIngredientButton:hover { cursor: pointer; background-color: white; border: 1px solid red; color: red; transition: background-color 0.3s ease; } @media (max-width: 768px) { .applicationForm { padding: 20px; } .formTitle { font-size: 22px; margin-bottom: 20px; } .formGroup input[type="text"], .formGroup input[type="email"], .formGroup input[type="tel"], .formGroup input[type="file"], .formGroup input[type="url"], .formGroup textarea { font-size: 14px; } .submitButton { padding: 10px 15px; font-size: 14px; } } .messageContainer { display: flex; flex-direction: column; align-items: center; } .formTitle { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 10px; } .loginButton { background-color: #e0a500; color: #fff; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; margin-top: 10px; } .loginButton:hover { background-color: #cc8b00; }