| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: Arial, sans-serif; |
| line-height: 1.5; |
| } |
|
|
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
|
|
| .logo { |
| display: block; |
| font-size: 24px; |
| font-weight: bold; |
| margin-bottom: 20px; |
| } |
|
|
| section#input { |
| margin-top: 40px; |
| } |
|
|
| section#input .row { |
| margin-bottom: 20px; |
| } |
|
|
| section#input .row:last-child { |
| margin-bottom: 0; |
| } |
|
|
| section#input input[type="text"], section#input input[type="number"], section#input input[type="email"], section#input input[type="password"], section#input select { |
| width: 100%; |
| padding: 10px; |
| border: none; |
| border-radius: 5px; |
| background-color: #f5f5f5; |
| } |
|
|
| section#input input[type="text"]:focus, section#input input[type="number"]:focus, section#input input[type="email"]:focus, section#input input[type="password"]:focus, section#input select:focus { |
| outline: none; |
| box-shadow: 0 0 5px #333; |
| } |
|
|
| section#input input[type="submit"] { |
| background-color: #4CAF50; |
| color: white; |
| padding: 10px 20px; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| margin-top: 20px; |
| } |
|
|
| section#input input[type="submit"]:hover { |
| background-color: #45a049; |
| } |
|
|
| #output { |
| margin-top: 20px; |
| font-size: 24px; |
| font-weight: bold; |
| color: #333; |
| } |