:root {
 --delay: 0.5s;
}
html, body {
	height: 100%;
	font-family: "open sans", Verdana, Helvetica, sans-serif;
}
body {
	background: #eee;/*display: flex;
  justify-content: center;
  align-items: center;*/
}
.modal {
	z-index: 100;
 margin auto auto;
}
#modalPopup {
	width: 320px;
	height: 320px;
	max-width: 80%;
	background: white;
	border: 1px solid #ccc;
	transition: var(--delay) ease-out;
	box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, 0.2);
	filter: blur(0);
	transform: scale(1);
	opacity: 100;
	visibility: visible;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-70%, -50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 25px;
}

.modalPopup.off {
	opacity: 0;
	visibility: hidden;
	filter: blur(8px);
	transform: scale(0.33);
	box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}




@supports (offset-rotate: 0deg) {
 .modal {
 offset-rotate: 0deg;
 offset-path: path("M 250,100 S -300,500 -700,-200");
}
 .modal.off {
 offset-distance: 100%;
}
}
@media (prefers-reduced-motion) {
.modal {
	offset-path: none;
}
}
.modal h2 {
	border-bottom: 1px solid #ccc;
	padding: 1rem;
	margin: 0;
}
.modal .content {
	padding: 1rem;
}
.modal .actions {
	border-top: 1px solid #ccc;
	background: #eee;
	padding: 0.5rem 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
button {
	border: 0;
	background: #78f89f;
	border-radius: 5px;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
	line-height: 1;
	margin: 5px;
}
#centered-toggle-button {
	position: absolute;
}
#content {
	filter: blur(0);
	opacity: 1;
}
#content.blurred {
	transition: var(--delay) ease-out;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
	opacity: 0.8;
}
.modal-overlay {
	z-index: 50;
	transition: var(--delay) ease-out;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	background-color: #405060;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-overlay.off {
	opacity: 0;
	transition: var(--delay) ease-out;
	z-index: -99;
}
/*# sourceMappingURL=modal.css.map */