:root {
	--delay: 0.5s;
}
.modalOverlay {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(153,153,153,0.5);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  position: fixed;
  z-index: 50;	
  transition: var(--delay) ease-out;
}

.modalOverlay.off {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.33);
  box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}

.modalPopup {
  width: clamp(290px,33vw,480px);
  max-width: 100%;
  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: 1;
  visibility: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

.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;
}
.modal .actions 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);
  -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;
}
.modal-overlay.off {
	opacity:0;
	 transition: var(--delay) ease-out;
	z-index: -99;
}