/* Variables */

:root {
	--darkGreen: #183419; /*complementary is #341833 (mauve/dark purple) */
	--midGreen: #347235;
	--lightGreen: #58a359;
	--barelyGreen: #beebbf;
	--gray: #BCC6CC;
	--darkGray: #1a1b1c;
	--white: white;
	--black: black;
	--aHover: blue;
	--midPurp: #803b7d;
	--lightPurp: #a649a2;
	--lightNeonGreen: #33ff3a;
}

html {
	scroll-behavior: smooth;
	overflow-y: scroll;
}



.section1 {
	width: ;
	height: auto;
	box-shadow: 0 0 40vh 0 var(--darkGreen) inset;
	background-color: var(--lightGreen);
	padding: 5vh 1vw 18vh 2vw;
	
}

.titleH1 {
	color: var(--black);
	margin: 5vw;
	text-shadow: 3px 3px var(--gray);
	font-size: 3em;
	font-weight: bold;
	line-height: 3em;
}

.cardContainer {
	display: inline-flex;
	width: ;
	padding: ;
	margin-left: 12vw;
	flex-direction: row-reverse;
}

.reviewCards {
	width: 20vw;
	height: auto;
	box-shadow: 0 1em 1.5em 0 var(--black);
	margin-left: -6em;
	padding: 2em;
	border-radius: 10px;
	z-index: 1;
	background-color: var(--darkGray);
}

.reviewCards:hover {
	transform: translate3d(.5em, -1em, 0);
	transition: transform .5s ease-in-out;
	z-index: 5;
}

.reviewCards2 {
	width: 20vw;
	height: auto;
	box-shadow: 0 1em 1.5em 0 var(--black);
	margin-left: -6em;
	padding: 2em;
	border-radius: 10px;
	z-index: 1;
	background-color: var(--darkGray);
	position: relative;
	top: 1em;
	right: 1em;
}

.reviewCards2:hover {
	transform: translate3d(.5em, -1em, 0);
	transition: transform .5s ease-in-out;
	z-index: 5;
	
}
.reviewCards3 {
	width: 20vw;
	height: auto;
	box-shadow: 0 1em 1.5em 0 var(--black);
	margin-left: -6em;
	padding: 2em;
	border-radius: 10px;
	z-index: 1;
	background-color: var(--darkGray);
	position: relative;
	top: 2em;
	right: 2em;
}

.reviewCards3:hover {
	transform: translate3d(.5em, -1em, 0);
	transition: transform .5s ease-in-out;
	z-index: 5;
	
}
.reviewCards4 {
	width: 20vw;
	height: auto;
	box-shadow: 0 1em 1.5em 0 var(--black);
	margin-left: -6em;
	padding: 2em;
	border-radius: 10px;
	z-index: 1;
	background-color: var(--darkGray);
	position: relative;
	top: 3em;
	right: 3em;
}

.reviewCards4:hover {
	transform: translate3d(.5em, -1em, 0);
	transition: transform .5s ease-in-out;
	z-index: 5;
	
}



.cardTitle {
	font-family: verdana;
	font-weight: bold;
	font-size: 1.3em;
	color: var(--gray);
	border-bottom: .2em solid var(--lightNeonGreen);
	border-radius: 10px;
	text-align: center;
	line-height: 1.5em;
}

.border-bottom {
	border-bottom: 1px solid var(--gray);
	padding-bottom: 5px;
	font-weight: bold;
}

.cardContent {
	border-top: .2em solid var(--lightPurp);
	border-bottom: .2em solid var(--lightPurp);
	border-radius: 10px;
	margin-top: 1em;
	padding: .25em;
	line-height: 1.2em;
}

.cardContent p {
	color: var(--gray);
}

.cardContent a,
.cardContent a:visited,
.cardContent a:hover {
	color: var(--gray);
	
}

.cardInstructions {
	border-top: .2em solid var(--lightPurp);
	border-bottom: .2em solid var(--lightPurp);
	border-radius: 10px;
	margin-top: 1em;
	padding: .25em;
}

.cardInstructions p {
	color: var(--gray);
}

.cardInstructions a {
	text-decoration: none;
}







.section2 {
	height: auto;
	padding: 5vh 1vw 18vh 2vw;
	box-shadow: 0 0 50vh 0 var(--lightGreen) inset;
	background-color: var(--barelyGreen);
}






.section3 {
	height: auto;
	box-shadow: 0 0 50vh 0 var(--barelyGreen) inset;
	padding: 5vw;
	min-height: 50vh;
}


.prompts {
	
	
}

.prompts p {
	font-weight: bold;
}

#prompt1 {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10vh;
	
}

#prompt1 input {
	
}


#prompt2 {
	margin-bottom: 10vh;
}

#prompt2 textarea {
	height: 10vh;
	width: 30vw;
}


#prompt3 {
	margin-bottom: 10vh;
}

#prompt3 textarea {
	height: 10vh;
	width: 30vw;
}


#prompt1Button {
	padding: .25em;
	font-size: 1em;
	font-weight: bold;
	
}

#prompt2Button {
	padding: .25em;
	font-size: 1em;
	font-weight: bold;
}

#prompt3Button {
	padding: .25em;
	font-size: 1em;
	font-weight: bold;
}

.submit {
	min-width: 5em;
	min-height: 2em;
	font-weight: bold;
	font-size: ;
	margin-top: 5vh;
}

.thankYou {
	height: 100%;
	font-weight: bold;
}

.hideForm {
	
}



/** {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}*/