html, body {
  margin: 0;
}
body {
  font-family: sans-serif;
  padding: 1rem;
  background: #fff;
}
div#main{
  width: 20rem;
  max-width: 100%;
}
* {
  box-sizing: border-box;
}
input, textarea {
  border: none;
  border-radius: .4em;
  background: #eee;
  padding: .4em;
  width: 100%;
  font-size: 90%;
}
div#sending{
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 70%;
  z-index: 999;
  display: none;
}
button {
  background: #eee;
  color: #000;
  border: .08em solid #999;
  font-size: 90%;
  border-radius: .4em;
  padding: .3em 1em;
  font-weight: 700;
}
textarea {
  height: 4rem;
}
div.radlist {
  width: 100%;
  display: flex;
  max-width: 100%;
}
div.radlist > input {
  display: none;
}
div.radlist > label {
  flex: 33%;
  width: 100%;
  text-align: center;
  padding: .5em;
  margin: .1em;
  border: .08em solid #999;
  border-radius: .4em;
}
input:checked + label#a {
  background: #f4c7c3;
}
input:checked + label#l {
  background: #fce8b2;
}
input:checked + label#e {
  background: #b7e1cd;
}
span {
  font-weight: 700;
  display: block;
}
h1 {
  text-align: center;
  width: 100%;
  border-bottom: .2rem solid #ccc;
}
details[open] {
  width: 100%;
  margin-bottom: 4em;
}