:root {
       --foo-size: orange;
       --paper-color: hsl(206, 23%, 94%);
       --paper-color-raised: hsl(206, 33%, 96%);  /* slightly lighter than paper  */
       --tel-green: hsl(168, 79%, 44%);
       --tel-green-light: hsl(168, 76%, 36%) ;
       --tel-green-vlight:  hsl(168, 48%, 83%);
       --hard-border: white;
       --dark-shadow:#cbced1;
       --light-shadow:white;
       --input-color: #555;
       --body-text-color: darkslategray;
       color: var(--body-text-color);
       }
       * {
       box-sizing: border-box;
       }

       .fields {
       width: 100%;
       padding-top: 1em;
       Zpadding: 75px 5px 5px 5px;
       }

       .fields h1 {
       margin: 0 0 20px 0;
       font-weight: 300;
       font-size: 28px;
       font-family: 'Electrolize', sans-serif;
       color:var(--tel-green)
       }

       .fields input {
       border: none;
       outline:none;
       background: none;
       font-size: 18px;
       color: var(--input-color);
       padding:20px 10px 20px 5px;
       height: 1em;
       width: 80%;
       }

       .neu-text {
       -webkit-appearance: none;
       border: none;
       padding-left: 1em;
       margin-bottom: 30px;
       border-radius: 25px;
       box-shadow: inset 8px 8px 8px var(--dark-shadow),
       inset -8px -8px 8px var(--light-shadow);
       }

       .fields input:-internal-autofill-selected {
       background-color: rgba(0,255,0,1) !important;
       }
       /* hack to lose the autofill background. See https://stackoverflow.com/questions/55280214/user-agent-style-shows-as-being-overridden-but-when-the-page-renders-its-not */
       input:-webkit-autofill,
       input:-webkit-autofill:hover,
       input:-webkit-autofill:focus,
       textarea:-webkit-autofill,
       textarea:-webkit-autofill:hover,
       textarea:-webkit-autofill:focus,
       select:-webkit-autofill,
       select:-webkit-autofill:hover,
       select:-webkit-autofill:focus {
       -webkit-transition-delay: 99999s;
       }


       .neu-panel {
       background-color: #ecf0f3;
       border-radius: 50px;
       background: #ecf0f3;
       box-shadow: 20px 20px 60px #c9cccf, -20px -20px 60px #ffffff;
       margin: 60px;
       padding: 3em;
       }

       @media (max-device-width: 768px) {
       .neu-panel {
       background-color: #ecf0f3;
       border-radius: 10px;
       background: #ecf0f3;
       box-shadow: 10px 10px 30px #c9cccf, -10px -10px 30px #ffffff;
       margin: 0px;
       padding: 0em;
       }

       }

       .fields svg {
       height: 22px;
       margin:0 10px -3px 10px;
       }

       .fields .neu-cb {
       -webkit-appearance: none;
       border-radius: 6px;
       background: linear-gradient(145deg, #d4d8db, #fdffff);
       box-shadow: rgb(114, 114, 114) 6px 6px 9px 0px, rgb(255, 255, 255) -3px -3px 5px;
       Zbox-shadow:  3px 3px 5px #898b8d, -3px -3px 5px #ffffff;
       height: 25px;
       width: 25px;
       padding: 0px;
       cursor: pointer;
       }

       .fields .neu-cb[invalid] {
       box-shadow: red 6px 6px 9px 0px, rgb(255, 255, 255) -3px -3px 5px;
       }

       .neu-cb-label .neu-cb {
       vertical-align: middle;
       margin-right: 1em;
       float: left;
       }

       .fields .neu-cb-label {
       font-family: 'Lato', sans-serif;
       height: 3em;
       }
       /* this is a kludge. Neither should have a height */
       @media (max-device-width: 768px) {
       .fields .neu-cb-label {
       height: 5em;
       }
       }

       .fields input[checked] {
       background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='24px' height='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
       background-color: var(--tel-green-vlight);
       border-radius: 6px;
       box-shadow: inset 3px 3px 5px #898b8d,
       inset -3px -3px 5px #ffffff;
       }

       .fields input:disabled {
       color: darkslategray;
       background-color: lightgray;
       cursor: not-allowed;
       }

       .neu-button {
       padding: 0.4em  1em  0.4em  1em;
       outline: none;
       border:none;
       cursor: pointer;
       border-radius: 30px;
       font-size: 1.4em;
       font-weight: 700;
       font-family: 'Lato', sans-serif;
       color:#fff;
       text-align: center;
       background: linear-gradient(145deg, var(--tel-green), var(--tel-green-light));
       border: 1px solid lightgray;
       box-shadow: 12px 12px 24px #b3b6b9,
       -12px -12px 24px #ffffff;
       transition: 0.5s;
       }

       .neu-button:hover {
       border: 1px solid var(--hard-border);
       background: linear-gradient(145deg, hsl(168, 76%, 36%), hsl(168, 79%, 44%));
       box-shadow: 15px 15px 28px #939699,
       -16px -16px 28px #ffffff;
       }

       .neu-button:active {
         padding: 0.3em 0.9em 0.3em 0.9em;
       font-size:1.36em;
       box-shadow: 6px 6px 12px #b3b6b9,
       -12px -12px 24px #ffffff;
       }

       .response-panel[hideme] {
       margin-top: 2em;
       color: transparent;
       padding: 1em;
       border-radius: 1em;
       background: transparent;
       box-shadow: none;
       transition-duration: 2s;
       }

       .response-panel {
       margin-top: 2em;
       color: red;
       padding: 1em;
       border-radius: 1em;
       background: hsl(206, 23%, 94%);
       box-shadow: var(--dark-shadow) 12px 12px 24px, var(--light-shadow)  -12px -12px 24px;
       transition-duration: 2s;
       }