:root {
	--hide: none;
	--view: block;
	/* light, background */
	--color1: #FFF6EA;
	/* dark, text/border */
	--color2: #10234E;
	/* light, shadows */
	--color3: #6f9aa6;
	/* light, transparent, highlights */
	--color4: #6f9aa666;
}

/*
* fonts:
* font-family: 'Della Respira', serif; basic body font
* font-family: 'Fondamento', cursive; calligraphy not cursive
* font-family: 'Macondo', cursive; handwriting fancyish
* font-family: 'Satisfy', cursive; handwriting cursive

*/

html,
body {
	font-family: 'Della Respira', serif;
	background-color: var(--color1);
	overflow-x: clip;
	min-height: 97vh;
	color: var(--color2) !important;
	display: flex;
	flex-direction: column;
}


.container {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
}

img.bottomBorder {
	width: 20vw;
	margin-right: auto;
	margin-left: auto;
	height: 20vh;
	object-fit: cover;
}

.logo {
	line-height: var(--topBarHeight);
	font-size: 5vh;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

a {
	text-decoration: underline solid;
	color: var(--color2) !important;
	padding: 5px;
}

a:hover {
	background-color: var(--color3);
	text-decoration: none;
	border-radius: 25px;
	transition: .2s;

}

a.light {
	text-decoration: underline solid;
	color: var(--color2) !important;
	padding: 5px;
}

a.light:hover {
	background-color: var(--color1);
	text-decoration: none;
	border-radius: 25px;
	transition: .2s;

}

.spacerSpan {
	margin-right: 25px;
	margin-left: 25px;
}

.centerText {
	text-align: center;
}

.sectionText {
	border: 0 solid;
	margin: 5vh auto;
	border-radius: 25px;
	padding: 15px;
	box-shadow: 0 4px 8px 0 var(--color2), 0 6px 20px var(--color2);
	width: 40%;
}

.sectionText2 {
	border: 5px solid var(--color3);
	margin: 10px auto;
	border-radius: 25px;
	padding: 15px;
	width: 70%;
}

.sectionText3 {
	margin: 10px auto;
	padding: 15px;
	width: 70%;
}

.sectionTextDark {
	background-color: var(--color3);
	border-bottom: 5px solid var(--color2);
	border-top: 5px solid var(--color2);
}

.quoteTitle {
	text-decoration: underline double;
}

/* form on contact page */
#contact-form {
	margin-top: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
}

.formDiv1 {
	margin-top: 20px;
}

.formLabel {
	margin-top: 20px;
}

.formInput {
	resize: vertical;
	width: 50vw;
	margin-left: auto;
	margin-right: auto;
	height: 5vh;
	border-radius: 0.375rem;
	border: solid 5px var(--color2);
	background-color: var(--color4);
}

.formSend {
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--color2);
	border-color: var(--color3);
	color: var(--color1);
	text-align: center;
	font-weight: bold;
	border-radius: 0.375rem;
	font-size: larger;
	padding: 10px 20px;
	margin-top: 25px;
}

.formSend:hover {
	color: var(--color2);
	background-color: var(--color3);
	transition: 0.2s;
}

img.sideRight {
	left: 5px;
	top: 25vh;
	transform: scaleX(-1);
	position: absolute;
	object-fit: cover;
	height: 44vh;
	width: 24vw;
}

img.sideLeft {
	right: 5px;
	top: 25vh;
	position: absolute;
	object-fit: cover;
	height: 44vh;
	width: 24vw;
}

.footerFormPage {
	margin-top: auto;
}

/*responsive screen size*/
@media only screen and (max-width: 1300px) {
	.logo {
		font-size: unset;
	}

	img.bottomBorder {
		height: auto;
	}

	.container {
		justify-content: center;
		flex-wrap: wrap;
	}

	.formInput {
		width: 80vw;
	}

	img.sideLeft,
	img.sideRight {
		display: none;
	}
}