html
{
	font-family: "Rubik", sans-serif;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body
{
	-webkit-text-size-adjust: 100%;
}

:root
{
	--theme-transition-time: 300ms;
}

#font-loader
{
	position: fixed;
	opacity: 0;
}



#order-demo
{
	width: 100%;
	display: flex;
}

#order-demo p
{
	width: fit-content !important;
	padding-left: calc(0.4 * var(--vl));
	padding-right: calc(0.4 * var(--vl));
}



.rainbow-gradient
{
	background-image: linear-gradient(90deg, #db4c46 16.667%, #e3743f 16.667%, #e3743f 33.333%, #fcf9b6 33.333%, #fcf9b6 50%, #8bc054 50%, #8bc054 66.667%, #4695d0 66.667%, #4695d0 83.333%, #5c2a81 83.333%, #5c2a81 100%);
	
	position: absolute;
	
	bottom: 0;
	right: 0;
	
	width: calc(7.5 * var(--vl));
	height: 0;
	
	transform-origin: center bottom;
	transform: rotate(45deg) translate(calc(-4.75 * var(--vl)), calc(8.5 * var(--vl)));
}



.purple-wave
{
	background-image: url("wave.png");
	background-size: contain;
	
	position: absolute;
	
	bottom: calc(-10 * var(--vl));
	left: -50%;
	
	width: 200%;
	
	height: calc(10 * var(--vl));
	
	animation: 61s linear infinite moveWave;
	
	opacity: .15;
}

.purple-wave-2
{
	transform: translateX(calc(4 * var(--vl)));
	animation: 47s linear infinite reverse moveWave;
}

.purple-wave-3
{
	transform: translateX(calc(15 * var(--vl)));
	animation: 31s linear infinite moveWave;
}

@keyframes moveWave
{
	from
	{
		margin-left: 0;
	}

	to
	{
		margin-left: calc(10 * var(--vl) * 2.62985);
	}
}



.text-button
{
	color: rgb(64, 64, 64);
	background-color: rgb(255, 255, 255);
	width: fit-content;
	display: inline-block;
	
	text-align: center;

	border: calc(0.35 * var(--vl)) solid rgb(64, 64, 64);
	border-radius: calc(1.5 * var(--vl));
	padding: calc(1 * var(--vl));
	font-size: 100%;
	
	cursor: pointer;
	outline: none;
	
	transition: transform .125s ease-out;
}

#lapsa-slide-container.lapsa-hover .text-button:hover
{
	transform: scale(1.05);
}



html.theme-transition
{
	transition: background-color var(--theme-transition-time) ease-in-out;
}

#lapsa-slide-container.theme-transition .lapsa-slide
{
	transition: background-color var(--theme-transition-time) ease-in-out, border var(--theme-transition-time) ease-in-out, border-radius var(--theme-transition-time) ease-in-out, box-shadow var(--theme-transition-time) ease-in-out;
}

#lapsa-slide-container.theme-transition .lapsa-slide h1, #lapsa-slide-container.theme-transition .lapsa-slide h2, #lapsa-slide-container.theme-transition .lapsa-slide p
{
	transition: opacity calc(var(--theme-transition-time) / 2) ease-in-out;
}

#lapsa-slide-container.theme-opacity-change .lapsa-slide h1, #lapsa-slide-container.theme-opacity-change .lapsa-slide h2, #lapsa-slide-container.theme-opacity-change .lapsa-slide p
{
	opacity: 0 !important;
}

#lapsa-slide-container.theme-transition .lapsa-slide .rainbow-gradient
{
	transition: height var(--theme-transition-time) ease-in-out;
}

#lapsa-slide-container.theme-transition .lapsa-slide .purple-wave
{
	transition: bottom var(--theme-transition-time) ease-in-out;
}



/* 1 changes the things that transition directly. 2 changes the things that don't. */

html.dark-industrial-theme-1
{
	background-color: rgb(0, 0, 0);
}

#lapsa-slide-container.dark-industrial-theme-1 .lapsa-slide
{
	background-color: rgb(24, 24, 24);
	
	border: calc(0.5 * var(--vl)) solid rgb(127, 127, 127);
	border-radius: 0;
	
	box-shadow: 0px 0px 0px 0px rgb(127, 127, 127);
}

#lapsa-slide-container.dark-industrial-theme-2 .lapsa-slide h1, #lapsa-slide-container.dark-industrial-theme-2 .lapsa-slide h2
{
	text-align: center;
	
	color: rgb(255, 255, 255);
	
	font-family: "Roboto Slab", serif;
}

#lapsa-slide-container.dark-industrial-theme-2 .lapsa-slide p
{
	color: rgb(192, 192, 192);
	
	text-align: justify;
	
	font-family: "Roboto Slab", serif;
}



html.blue-whimsical-theme-1
{
	background-color: rgb(189, 214, 228);
}

#lapsa-slide-container.blue-whimsical-theme-1 .lapsa-slide
{
	background-color: rgb(170, 220, 247);
}

#lapsa-slide-container.blue-whimsical-theme-1 .lapsa-slide .rainbow-gradient
{
	height: calc(22.5 * var(--vl));
}

#lapsa-slide-container.blue-whimsical-theme-2 .lapsa-slide h1, #lapsa-slide-container.blue-whimsical-theme-2 .lapsa-slide h2
{
	color: rgb(70, 0, 140);
	
	font-family: "Sofia", cursive;
}

#lapsa-slide-container.blue-whimsical-theme-2 .lapsa-slide p
{
	color: rgb(83, 47, 119);
	
	font-family: "Bree Serif", serif;
}



html.dark-futuristic-theme-1
{
	background-color: rgb(24, 24, 24);
}

#lapsa-slide-container.dark-futuristic-theme-1 .lapsa-slide
{
	background-color: rgb(0, 0, 0);
	
	border: calc(0.25 * var(--vl)) solid rgb(127, 127, 102);
	
	border-radius: calc(1 * var(--vl));
	
	box-shadow: 0px 0px 0px 0px rgb(127, 127, 127);
}

#lapsa-slide-container.dark-futuristic-theme-1 .lapsa-slide .purple-wave
{
	bottom: 0;
}

#lapsa-slide-container.dark-futuristic-theme-1 .lapsa-slide .purple-wave-2
{
	bottom: calc(-2 * var(--vl));
}

#lapsa-slide-container.dark-futuristic-theme-1 .lapsa-slide .purple-wave-3
{
	bottom: calc(-4 * var(--vl));
}

#lapsa-slide-container.dark-futuristic-theme-2 .lapsa-slide h1, #lapsa-slide-container.dark-futuristic-theme-2 .lapsa-slide h2
{
	color: rgb(255, 255, 204);
	
	text-align: center;
	
	font-family: "Oswald", sans-serif;
}

#lapsa-slide-container.dark-futuristic-theme-2 .lapsa-slide p
{
	color: rgb(191, 191, 153);
	
	text-align: justify;
	
	font-family: "Oswald", sans-serif;
}