form  {
	-moz-outline-radius: 20px;
	border-radius: 20px;
	margin: min(min(8vh, 8vw), 45px) 0;
	background-color: color(srgb 1 1 1 / 0.175);
}

form#notificationFormOverlay {
	width: min(75vw, 580px);
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: color(srgb 1 1 1 / 1);
	color: black;
}

form > div.left {
	float: left;
	width: 70%;	
	padding: 0;
}

form > h1 {
	margin: 0;
	text-align: center;
	line-height: normal;
	font-size: max(min(3vw, 1.8em), 1.4em);
}

form > p {
	text-align: center;
	margin: 10px 20px 40px 20px;
	line-height: normal;
	font-size: min(1.15rem, 4vw);	
}

form input,
form button {
	border-radius: 8px;
	border: none;
	background-color: #e1e1e1;

	margin: 0;
	padding: 1em 2em;

	font-style: normal;
	font-weight: 400;
	font-size: min(2vw, 15px);
	font-family: system-ui;
	font-variant-caps: normal;

	text-indent: 0px;
	display: inline-block;
	border-width: 1px;
	
	color: black;
}

form input {
	border-style: inset;
	width: 80%;
	text-overflow: ellipsis;
}

inpput:focus, input:focus {
	outline: none;
}

form button {
	text-align: center;
	width: 30%;
	border-style: outset;
	font-weight: 600;
	cursor: pointer;
}

form button:hover {
	background-color: #00d37a;
	border-color: color(srgb 0 0.841 0.312 / 0.103);
}

div#fullScreenOverlay {
	position: fixed;
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: color(srgb 0 0 0 / 0.775);
	z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
	display: none; /* Hidden by default */
}

div#fullScreenOverlay > div.container {
	position: relative;
	height: 100%;
}

div#fullScreenOverlay > img {
	display: fixed;
	float: right;
	width: 30px;
	height: 30px;
	margin: 60px 60px 0 0;
}


form.didRegister,
form#notificationFormOverlay.didRegister {
	background-color: #418333;
	color: white;
}

div#fullScreenOverlay > div.container > form > p {
	color: #555555;
	padding: 20px;
}

div#fullScreenOverlay > div.container > form#notificationFormOverlay.didRegister > p {
	color: #d2ffce;
	padding: 20px;
}


/*------------------------------------------------------------*/

@media screen and (max-width: 600px) {
	
	form > h1 {
		font-size: 40px;
	}
	
	form > p {
		font-size: 22px;
		padding: 0;
		margin: 10px 17px 30px 17px;
	}

	form > div.left {
		width: 92%;	
		float: none;
		padding: 0 4%;
	}
		
	form input {
		background-color: transparent;
		border: 0;
		
	}

	form .left {
		background-color: white;
		-moz-outline-radius: 14px;
		border-radius: 14px;
	}
	
	.left input {
		padding: 0;
		width: 100%;
		line-height: 60px;		
	}
	
	form input, form button {
		font-size: 24px;
		-moz-outline-radius: 14px;
		border-radius: 14px;
	}
	
	.centerColumn form button {
		width: 100%;
		font-size: 18px;
		margin-top: 20px;
		padding: 15px;
	}

}