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