|
* { |
|
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; |
|
} |