* {box-sizing: border-box;  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}
body > div {width: 100%; max-width: 800px; margin: auto;}
li > blockquote {margin-bottom: 34px;}
summary {cursor: pointer;}
details {margin: 2em 0;}
details li {margin-bottom: 0.8em; line-height: 1.5em;}

code {
  font-family: Consolas,"courier new";
  color: #eee;
    background-color: #222;
    padding: 2px 5px;
    font-size: calc(100% - 2px);
}


* {box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}



label{
    display: block;
  margin: 0.3em 0;
  cursor: pointer;
  }
input {width: 100%; max-width: 233px; padding: 0.3em; letter-spacing: 0.03em;}
textarea {min-width: 55px; width: 100%; min-height: 100px; padding: 0.3em; letter-spacing: 0.03em;}
input[type="submit"] {max-width: 144px;}

form {
  width: 100%; max-width: 377px;
}

#t-and-c-check { position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;}



form > p:nth-child(5) > label:before {content: ""; border: 1px solid black; width: 10px; height : 10px; display: inline-block; margin-left: 1px; margin-right: 0.5em; transition: 0.3s; outline: 1px solid black; }

input:focus ~ label {
  text-decoration: underline; 
}  
  
  #t-and-c-check:checked ~ label:before {background: #0000ee; 
  box-shadow: 1px 1px 0px 0px inset white, -1px -1px 0px 0px inset white;}