/* body > * {width: 89%; max-width: 34em;   margin: 0.55em auto;} */

@font-face{
	font-family: OpenDyslexic;
	src: url(/OpenDyslexic-Regular.otf);
	/* src: url(OpenDyslexic3-Regular.ttf); */
	font-display: swap;
}
body {font-family: OpenDyslexic, sans-serif;}

.gig     {border: 5px solid white; padding: 0.55em 0.55em 2em; text-align: center; width: 89%; max-width: 34em; margin: 1em auto}
h1 {width: 89%; max-width: 34em; margin: 1em auto;}
.gigs-list, .listing li {display: block; margin: 0.55em 0.8em;}
div.listing, ul.listing {margin: 1em auto;border: 0.34em solid white;width: 89%;padding: 1em 0.34em; text-align: left;}
.nowrap {white-space: nowrap;}
/* body > h1, body > h2, body > h3, body > h4, body > h5, body > h6 {max-width: 21em;} */
.lrg {font-size: 2.33em; padding: 0; margin: 0;}
.med, li.med {font-size: 1.44em; padding: 0; margin: 0.55em;}
.sml {font-size: 1em; padding: 0; margin: 0;}
.ctr {text-align: center;}
.headline, .display {font-weight: 800;}
.title {font-weight: bold;}
label {display: block;}
label > span {display: block;}
.notice {text-transform: lowercase; font-variant: small-caps}
body > p {padding: 0; margin: 0.89em auto; width: 89%; max-width: 34em}
p.checkbox-form {width: 89%; margin: auto}
p.checkbox-form span {text-align: left;}
textarea {height: 8em;}
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;
	box-sizing: border-box;
	}
button:hover,input:hover.cta {
	background: rgba(144,233,144,1);
	outline: 0.21em solid rgba(144,233,144,1);
	transition: .13s all ease;
	}
button:active, button:focus,input:active.cta,input:focus.cta {
	background: rgba(0,233,0,1);
	outline: 0.21em solid rgba(0,233,0,1);
	}
button:focus,input:focus.cta {
	color: rgba(55,55,55,0.5);
	border: 0.21em solid rgba(55,55,55,0.5);
	}
button.cta {
	
}
button.warning,input.warning {
	background: rgba(233,144,233,1);
    outline: 0.21em solid rgba(233,144,233,1);
}
button.other {
	background: rgba(144,233,233,1);
    outline: 0.21em solid rgba(144,233,233,1);
}

input[type="text"], input[type="datetime-local"], input[type="file"], input[type="email"], input[type="password"], textarea{
	border-top: 0.21em solid white;
	border-right: 0.21em solid white;
	color: rgba(55,55,55,0.89);
}
input[type="text"]:focus, input:focus[type="datetime-local"], input[type="password"]{
	border-top: 0.21em solid white;
	border-right: 0.21em solid white;
	color: rgba(55,55,55,1);
}

.form-control {
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
  align-items: center;
  cursor:pointer;
}

.form-control + .form-control {
  margin-top: 1em;
}

.form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

label.form-control > span {margin: 0 0 0 1.44em;}

label > span {}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.44em;
  height: 1.44em;
  border: 0.21em solid rgba(55,55,55,1);
  border-radius: 0.13em;
  transform: translateY(-0.075em);
  display: grid;
  cursor: pointer;
  background-color: rgba(233,233,233,0.55);
  outline: 0.21em solid white;
}

input[type="checkbox"]:hover {
  background-color: rgba(233,233,233,0.89);
}

input[type="checkbox"]:checked {
  border: 0.21em solid rgba(0,233,0,0);
  outline: 0.21em solid rgba(0,233,0,0.01);
  background: rgba(0,233,0,0.01);
  padding: 0.1em;
}

input[type="checkbox"]::before {
  content: "";
  width: 1em;
  height: 1em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em rgba(0,233,0,1);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  /*outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);*/
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}


select {
  /* Reset Select */
  appearance: none;
  outline: 0;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: 0.21em;
  cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    font-family: inherit;
	font-size: 1em;color: rgba(55,55,55,1);
	width: 89%;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  width: 88%;
  overflow: hidden;
      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;
	margin: auto;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
 padding: 0.21em 1em;
    background-color: rgba(55,55,55,5);
    transition: .25s all ease;
    pointer-events: none;
   
    border-radius: 0.08em;
    color: white;
}
/* Transition */
.select:hover::after {
  color: rgb(0 233 0);
}
</style>

<style>
@media all and (min-width: 13em){
	
}
@media all and (min-width: 21em){

}
@media all and (min-width: 34em){
	/* ul.listing {width: 55%;} */
}
@media all and (min-width:55em){
	/* p.checkbox-form {
		width: 34%;
		margin: auto;
	}	*/
	div.listing, ul.listing {width: 55%;}
	div.listing form {text-align: center;}
}