| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .grid-cols-12 { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| gap: 1rem; | |
| } | |
| .grid-cols-12 > div { | |
| padding: 1rem; | |
| border: 1px solid #333; | |
| border-radius: 0.25rem; | |
| } | |
| .form-control { | |
| margin-top: 1rem; | |
| } | |
| .form-control > input { | |
| margin-left: 1rem; | |
| padding: 0.6rem 1rem; | |
| border: 1px solid #333; | |
| border-radius: 0.25rem; | |
| } | |
| .form-control > button { | |
| margin-left: 1rem; | |
| padding: 0.6rem 1rem; | |
| border: 1px solid #333; | |
| border-radius: 0.25rem; | |
| background-color: #333; | |
| color: #fff; | |
| font-size: 1rem; | |
| } | |
| .form-control > button:active { | |
| background-color: #666; | |
| } | |
| .result { | |
| margin: 1rem 0; | |
| padding: 0.6rem 1rem; | |
| background-color: #333; | |
| color: #fff; | |
| font-size: 1rem; | |
| border-radius: 0.25rem; | |
| } | |
| .result::after { | |
| content: ""; | |
| clear: both; | |
| display: block; | |
| } | |
| .result span { | |
| float: right; | |
| } | |
| .hidden { | |
| display: none; | |
| } |