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