@import "_basestyle.css";
@import "_collapsibles.css";


.banner {
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 25vh;
overflow: hidden;
background-position: center;
background-size: cover;
}

h1.pale, h1.dark {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: left;
  font-size: 5em;
  white-space: nowrap;
}

@media only screen and (max-width: 880px) {
	h1.pale, h1.dark {
		font-size: 3em;
		left: 0;
	}
	h3.pale, h3.dark {
		display: none;
	}
}

@media only screen and (min-width: 880px) {
div.text {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2%;
}
}

@media only screen and (max-height: 700px) {
	.banner {
		height: 100px;
		max-height: 50vh;
	}
	h1.pale, h1.dark {
		margin: 0;
		font-size: 2em;
		}
	h3.pale, h3.dark {
		display: none;
	}
}

h1.pale, h3.pale {
	color: #455a59;
	 background-color: rgba(253, 248, 237, 0.7);
}

h1.dark, h3.dark {
	color: #fdf8ed;
	background-color: rgba(69, 90, 89, 0.7);
}

.subtitle {
font-size: 2.5em;
}

h3.pale, h3.dark {
  position: absolute;
  top: 0;
  left: 5%;
  width: 250px;
  white-space: nowrap; 
  text-align: center;
}

form { 
width: 100%;
display: block;
border: 2px solid #455a59;
background-color: #455a59;
color: #fdf8ed;
padding: 10px;
text-align: center;
}

select, input {
	max-width: 25%;
	display: inline;
}

input[type="checkbox"] {
 	color: #fdf8ed;
	accent-color: #455a59;
	margin-left: 0.5em;
	transform: scale(1.2);
}

input[type="submit"]{
	margin-top: 10px;
}

input[type="number"]{
	max-width: 6em;
}
input[type="date"]{
	max-width: 8em;
}

h2 {
	text-align: center;
	width: 100%;
}

fieldset  {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	gap: 10px;
}