@keyframes shadow-drop-center {
  0% {
    box-shadow: 0 0 0 0 var(--color-shadow-off);
  }
  100% {
    box-shadow: 0 0 20px 0px var(--color-shadow-on);

  }
}

@keyframes hideStartOverlay {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes showBoxLetter {
	from {
		height: 0;
		opacity: 0;
		top: 100vh;
	}
	to { 
		height: 96vh;
		opacity: 100%;
		top: 2vh;
	}
}

@keyframes rightInBoxLetter {
	from {
		height: 96vh;
		width: 0;
		opacity: 0;
		left: 100vw;
	}
	to { 
		height: 96vh;
		width: 96vw;
		opacity: 100%;
		left: 2vw;
	}
}

@keyframes leftInBoxLetter {
	from {
		height: 96vh;
		width: 0;
		opacity: 0;
		right: 100vw;
	}
	to { 
		height: 96vh;
		width: 96vw;
		opacity: 100%;
		right: 2vw;
	}
}

@keyframes hideBoxLetter {
	from {
		bottom: 2vh;
		height: 96vh; 
		opacity: 100%;
	}
	to {
		bottom: 100vh;
		height: 0;
		opacity: 0;
	}
}

@keyframes rightOutBoxLetter {
	from {
		height: 96vh;
		width: 96vw;
		opacity: 100%;
		left: 2vw;
	}
	to {
		height: 96vh;
		width: 0;
		opacity: 0;
		left: 100vw;
	}
}

@keyframes leftOutBoxLetter {
	from { 
		height: 96vh;
		width: 96vw;
		opacity: 100%;
		right: 2vw;
	}
	to {
		height: 96vh;
		width: 0;
		opacity: 0;
		right: 100vw;
	}
}

@keyframes hide-background {
	from { opacity: 0; }
	to { opacity: 80%; }
}

@keyframes show-background {
	0% {
		height: 100vh;
		opacity: 80%;
	}
	50% {
		height: 100vh;
		opacity: 0%;
	}
	75% {
		height: 100vh;
		opacity: 0%;
	}
	100% {
		height: 0vh;
		opacity: 0%;
	}
}

@keyframes nextEnabled {
	from {
		bottom: 0;
		right: 0;
		opacity: 0;
		height: 0;
		width: 0;
	}
	to {
		bottom: 5vh;
		right: 5vw;
		opacity: 100%;
		height: var(--size-btn);
		width: var(--size-btn);
	}
}

@keyframes previousEnabled {
	from {
		bottom: 0;
		left: 0;
		opacity: 0%;
		height: 0;
		width: 0;
	}
	to {
		bottom: 5vh;
		left: 5vw;
		opacity: 100%;
		height: var(--size-btn);
		width: var(--size-btn);
	}
}

@keyframes make-line {
	from {width: 0;}
	to {width: 100%;}
}

@keyframes remove-line {
	from {width: 100%;}
	to {width: 0;}
}

@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 100%;}
}

@keyframes fade-out {
	from {opacity: 100%;}
	to {opacity: 0;}
}