/**
 * @author {{view__author}}
 * @version {{view__version}}
 *
 * Bug Fest {{view_name}} CSS
 */

#info {
	background: var( --color__pink );
	color: white;
}

	#info .scroller {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

		#info .scroller a {
			display: block;
			border: var( --spacing ) solid white;
			height: 100%;
			color: white;
			text-decoration: none;
			font-size: 6.5vh;
			text-align: center;
			line-height: 0.5;
			padding-bottom: calc( var( --spacing ) * 2 );
			pointer-events: auto;
		}



#form {
	background: var( --color__green );
	color: white;
}

	#form form {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

		#form form .form__field {
			margin-bottom: var( --spacing );
		}

			#form form .form__field label {
				display: block;
				font-size: 5vh;
				line-height: 0.8;
				margin-bottom: calc( var( --spacing ) / 2 );
			}

			#form form .form__field input {
				display: block;
				width: 100%;
				background: transparent;
				border: calc( var( --spacing ) / 2 ) solid white;
				color: white;
			}
			#form form .form__field input.error {
				border-color: red;
			}

		#form form input[type="submit"] {
			display: block;
			border: var( --spacing ) solid white;
			height: 100%;
			width: 100%;
			color: white;
			text-decoration: none;
			font-size: 6.5vh;
			text-align: center;
			line-height: 0.5;
			margin-top: var( --spacing );
			padding-bottom: calc( var( --spacing ) * 2 );
			background: transparent;
			cursor: pointer;

			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}



#success section {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: white;
}

	#success section a {
		color: white;
	}

	#success section #thanks {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

		#success section #thanks .thanks__part {
			flex: 1;
			padding-bottom: 0;
		}

			#success section #thanks .thanks__part img {
				height: 100%;
				width: 100%;
			}



#failure section {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: white;
}

	#failure section a {
		color: white;
	}

	#failure section #error {
		height: 100%;
	}

	#failure section #error a {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

		#failure section #error .error__part {
			flex: 1;
		}

		#failure section #error .error__part:first-child {
			padding-bottom: calc( var( --spacing ) / 2 );
		}
		#failure section #error .error__part:last-child {
			padding-top: calc( var( --spacing ) / 2 );
		}

			#failure section #error .error__part img {
				height: 100%;
				width: 100%;
			}



@media ( min-width: 1000px ) {
	#form form input[type="submit"],
	#info .scroller a {
		font-size: 6vw;
		padding-bottom: calc( var( --spacing ) * 1.6 );
	}
}