body { background-color: #fff; margin: 0; text-align: center; }
#buttons { display: none; }
textarea, input { -webkit-appearance: none; font-size: 18px; }
textarea { margin: 2rem auto; width: 18rem; height: 25rem; padding: 1.5rem 0.5rem 0.5rem 0.5rem; font-family: system-ui, Roboto, "Segoe UI", sans-serif; line-height: 1.25rem; color: #111; background-color: #fff; border: none; box-shadow: inset 0 1.2rem 0 0 #004080, inset -0.2rem 0 0 0 #e3e3e3, inset 0 -0.2rem 0 0 #e3e3e3, inset 0.2rem 0 0 0 #e3e3e3; border-radius: 0 0 0.75rem 0.75rem; overflow: scroll; }
::-webkit-resizer { display: none; }
textarea:hover { box-shadow: inset 0 1.2rem 0 0 #004080, inset -0.2rem 0 0 0 #d6d6d6, inset 0 -0.2rem 0 0 #d6d6d6, inset 0.2rem 0 0 0 #d6d6d6; }
textarea:focus { outline: none; box-shadow: inset 0 1.2rem 0 0 #004080, inset -0.2rem 0 0 0 #9f9f9f, inset 0 -0.2rem 0 0 #9f9f9f, inset 0.2rem 0 0 0 #9f9f9f; }
input[type=button] { background-color: #fff; color: #004080; line-height: 1rem; font-weight: 700; border-radius: 0.75rem; border: 0.2rem solid #004080; padding: 0.5rem 1.75rem; margin: 0 1.5rem; }
input[type=button]:active { background-color: #eee; }

@media only screen and (max-width: 736px) {
html, body { height: 100%; }
body { border-top: 1rem solid #004080; }
textarea { width: 90%; max-width: 20rem; height: 75%; max-height: 33rem; padding: 0.25rem; box-shadow: none; resize: none; }
textarea:hover, textarea:focus { box-shadow: none; }
}

@media (prefers-color-scheme: dark) {
body { background-color: #000; }
textarea { color: #ddd; background-color: #000; box-shadow: inset 0 1.2rem 0 0 #004080, inset -0.2rem 0 0 0 #333, inset 0 -0.2rem 0 0 #333, inset 0.2rem 0 0 0 #333; }
textarea:hover { box-shadow: inset 0 1.2rem 0 0 #004080, inset -0.2rem 0 0 0 #444, inset 0 -0.2rem 0 0 #444, inset 0.2rem 0 0 0 #444; }
textarea:focus { box-shadow: inset 0 1.2rem 0 0 #004080, inset -0.2rem 0 0 0 #888, inset 0 -0.2rem 0 0 #888, inset 0.2rem 0 0 0 #888; }
input[type=button] { color: #ddd; background-color: #000; border-color: #ddd; }
input[type=button]:active { background-color: #1e1e1e; }
}

@media screen and (max-width: 736px) and (prefers-color-scheme: dark) {
textarea, textarea:hover, textarea:focus { box-shadow: none; background-color: #000; }
}