|
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: left; |
|
} |
|
|
|
section { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: left; |
|
} |
|
|
|
a { |
|
color: var(--text); |
|
} |
|
|
|
form { |
|
width: 30rem; |
|
margin: 0 auto; |
|
} |
|
|
|
input { |
|
width: 100%; |
|
} |
|
|
|
button { |
|
cursor: pointer; |
|
} |
|
|
|
.text-input { |
|
min-height: 5rem; |
|
margin: 1rem; |
|
border: 0.5px solid grey; |
|
} |
|
|
|
.text-gen-output { |
|
min-height: 5rem; |
|
margin: 1rem; |
|
border: 0.5px solid grey; |
|
} |