body { font-family: "freemono", monospace; font-size: 16px;}
h1,h2,h3,h4,h5,h6 { text-transform: uppercase; font-weight: 300; margin: 0;}


body > header { max-width: max-content; margin: 0 auto; }
main { width: 650px; margin: 30px auto; padding: 5px; background-color: aliceblue;}
main { background-color: unset;}

form  { width:620px; margin-top: 30px; }
form * { display: block; width: 100%; min-height: 25px; 
  margin: 5px 0; box-sizing:border-box; font-family: "freemono", monospace;  }
label + input { margin-top: -5px; margin-bottom: 10px; }
p + label { margin-top: 30px; }

fieldset > legend { display: inline-block; min-height: unset; width: unset; padding: 0 10px; text-transform: uppercase; }

button { text-transform: uppercase; background-color: gold; border: unset; cursor: pointer; }
button:hover { background-color: darkgrey; color: white; }

div.inline { display: flex; margin-top: 30px; }
div.inline * { flex: 1; margin: 0 5px; }
div.inline *:first-of-type { margin-left: 0; }
div.inline *:last-of-type { margin-right: 0; }
div.inline button[type=submit] { flex: 2; float: right; }
div.inline button[type=reset] { float: left; flex: 1; background-color: unset; text-decoration: underline; text-transform: unset; }
div.inline button[type=reset]:hover { color: black; }

ul.results { margin-top: 30px; border-top: 3px double black; padding: 0;}
ul.results li output { display: inline; color: hotpink; }

details summary { display: inline-block; margin:0; width:unset; background-color: cadetblue; color: white; padding: 5px; cursor: pointer; font-weight: 600;}
details details { padding-left: 15px; margin:0; margin-top: 1px;}
details + details { margin-top: 1px;}
details[open] { margin-bottom: 30px;}
details[open] > summary { font-size: 1.2em;}
details[open] > summary::before { content: "*";}
main > details > summary { background-color: brown;}



ol.inline { list-style: none; padding: 0; }
header ol li { background-color: gold; display: inline-block; padding: 5px;}