| body { |
| --text: hsl(0 0% 15%); |
| padding: 2.5rem; |
| font-family: sans-serif; |
| color: var(--text); |
| } |
| body.dark-theme { |
| --text: hsl(0 0% 90%); |
| background-color: hsl(223 39% 7%); |
| } |
|
|
| main { |
| max-width: 80rem; |
| text-align: center; |
| } |
|
|
| section { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
|
|
| a { |
| color: var(--text); |
| } |
|
|
| select, input, button, .text-gen-output { |
| padding: 0.5rem 1rem; |
| } |
|
|
| select, img, input { |
| margin: 0.5rem auto 1rem; |
| } |
|
|
| form { |
| width: 25rem; |
| margin: 0 auto; |
| } |
|
|
| input { |
| width: 70%; |
| } |
|
|
| button { |
| cursor: pointer; |
| } |
|
|
| .text-gen-output { |
| min-height: 1.2rem; |
| margin: 1rem; |
| border: 0.5px solid grey; |
| } |
|
|
| #dataset button { |
| width: 6rem; |
| margin: 0.5rem; |
| } |
|
|
| #dataset button.hidden { |
| visibility: hidden; |
| } |
|
|
| table { |
| max-width: 40rem; |
| text-align: left; |
| border-collapse: collapse; |
| } |
|
|
| thead { |
| font-weight: bold; |
| } |
|
|
| td { |
| padding: 0.5rem; |
| } |
|
|
| td:not(thead td) { |
| border: 0.5px solid grey; |
| } |
|
|