/* form {text-align: center;} */
button, input[type="submit"], input[type="text"], input[type="datetime-local"], input[type="file"], input[type="password"], input[type="number"], input[type="url"], input[type="email"], textarea {
    width: 89%;
    max-width: 32em;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    padding: 0.3em;
    line-height: 1.1;
    border-radius: 0.13em;
    border: 0.21em solid rgba(55,55,55,1);
    background: white;
    color: rgba(55,55,55,1);
    outline: 0.21em solid white;
    cursor: pointer;
    transition: .21s all ease;
    margin: 0.55em 0;
	box-sizing: border-box;
}
	p.copy {text-align: center;}
	.header h2 {font-size: 2em; margin: 0.67em 0;}
	.left h1 {font-size: 1.5em; margin: 0.83em 0;}
input:active, input:focus, textarea:active, textarea:focus {
		animation: highlight 0.3s alternate infinite;
	}
	
@keyframes highlight {
	0% {outline: 0.21em solid black;}
	100% {outline: 0.21em solid rgba(144,233,233,1);}
}

textarea {height: 89px}
@media all and (min-width: 987px){
	div.container {margin: auto; width: 89%;}.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 1fr 1fr 1fr; */
  gap: 5px 34px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header"
    "left right"
    "footer footer";
}

.footer { grid-area: footer; }

.header { grid-area: header; }

.left { grid-area: left; }

.right { grid-area: right; }

}/*
@media all and (min-width: 55em){
	body > div {margin: auto; width: 55%; text-align: left}
	/*h1 {font-size: 5em;}
	h2, h3, h4, h5, h6 {font-size: 1em;}
	.container {  display: grid; 
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "brand content";
}
.brand { grid-area: brand; }
.content { grid-area: content; }*/

}

form.checkbox-text-left label {
	text-align: left;
}


/* Base for label styling */
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 2.3em;
    font-size: 1.05em;
    line-height: 1.7;
    cursor: pointer;
	display: inline-block;
	width: 100%;
  }

  /* checkbox aspect */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid #aaa;
    background: #FFF;
    border-radius: .2em;
    box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
    -webkit-transition: all .275s;
        transition: all .275s;
  }

  /* checked mark aspect */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
    content: '✕';
    position: absolute;
    top: calc(1.4em - 12px);
    left: calc(1.4em - 21px);
    font-size: 21px;
    color: #000559;
    line-height: 0;
    -webkit-transition: all .2s;
    transition: all .2s;
    font-weight: bold;
  }

  /* checked mark aspect changes */
  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
  }

  [type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
  }

  /* Disabled checkbox */
  [type="checkbox"]:disabled:not(:checked) + label:before,
  [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #e9e9e9;
  }

  [type="checkbox"]:disabled:checked + label:after {
    color: #777;
  }

  [type="checkbox"]:disabled + label {
    color: #aaa;
  }

  /* Accessibility */
  [type="checkbox"]:checked:focus + label:before,
  [type="checkbox"]:not(:checked):focus + label:before {
    box-shadow: inset 0 1px 3px rgba(144,233,233, .89), 0 0 0 6px rgba(144,233,233, .55);
  }