body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: black;
  color: #FFF;
  font-family: sans-serif;
}

ul {
  gap: 0 1rem;
  margin: 0;
  padding: 0.5rem 1rem 0.3rem 1rem;
  position: relative;
  border-radius: 0.5rem;
  list-style: none;
  background-color: rgba(256,256,256,.07);
  isolation: isolate;
}

.kaiser {
  color: #000;
  font-family: 'Caesar Dressing', cursive;
  font-size: 10vw; 
  text-transform: lowercase;
  vertical-align: middle;
  letter-spacing: .1vw; 
  text-align: center;
  white-space:nowrap;
  margin: auto;
  padding: 2rem 1rem 0.3rem 1rem;
}

@font-face {
	font-family: "stacker";
	src: url("stacker.otf") format("opentype");
}

@font-face {
	font-family: "neon";
	src: url("neon.ttf");
}

.stacker{
	font-family: stacker;
}

/* 
	Fire animation 
*/


.fire {
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}

.burn {
  animation: animation .65s ease-in-out infinite alternate;
  -moz-animation: animation .65s ease-in-out infinite alternate;
  -webkit-animation: animation .65s ease-in-out infinite alternate;
  -o-animation: animation .65s ease-in-out infinite alternate;
}

@keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

@-moz-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

@-webkit-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

@-o-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

/*
Neon animation
*/

/* Create pseudo elements for both elements */
.neon-effect-wrapper,
.neon {
  &::before,
  &::after {
	content: "";
	position: absolute; 
	inset: 0;
	pointer-events: none;
  }
}

.neon-effect-wrapper {
  /* Can be anything light-colored */
  --spotlight-color: pink;

  overflow: hidden;
  position: relative;

  /* Shimmer animation */
  &::before {
	animation: shimmer 5s infinite linear;
	background: 
	  radial-gradient(circle, var(--spotlight-color), transparent 25%) 0 0 / 25% 25%,
	  radial-gradient(circle, var(--spotlight-color), black 25%) 50% 50% / 12.5% 12.5%;
	inset-block-start: -100%;
	inset-inline-start: -100%;
	mix-blend-mode: color-dodge;
	z-index: 3;
  }

  /* Extra filter to boost colors and contrast */
  &::after {
	backdrop-filter: blur(1px) brightness(90%) contrast(150%);
	z-index: 4;
  }
}

@keyframes shimmer {
  100% {
	transform: translate3d(50%, 50%, 0);
  }
}

.neon {
  /* Mask colors */
  /* Should be black and white */
  --background-color: black;
  --text-color: white;

  /* Text color */
  /* Can be anything */
  --color-1: purple;
  --color-2: teal;

  /* Fuzzy white outline text */
  color: transparent;
  text-shadow: 
	0 0 0.04em var(--background-color), 
	0 0 0.04em var(--text-color),
	0 0 0.04em var(--text-color), 
	0 0 0.04em var(--text-color);

  /* Improve contrast of outline */
  &::before {
	backdrop-filter: blur(0.013em) brightness(400%);
	z-index: 1;
  }

  /* Add text color */
  &::after {
	background: linear-gradient(45deg, var(--color-1), var(--color-2));
	mix-blend-mode: multiply;
	z-index: 2;
  }
}

/* Alternative styling */
body:has(#option-toggle:checked) {
  & .neon-effect-wrapper {
	--spotlight-color: orange;
	
	&::after {
	  backdrop-filter: brightness(90%) contrast(150%);
	}
  }

  & .neon {
	--angle: 5deg;
	--color-1: hsl(163, 100%, 51%);
	--color-2: hsl(295, 88%, 32%);
	--color-3: hsl(59, 100%, 50%);

	text-shadow: 
	  0 0 0.03em var(--background-color),
	  0 0 0.03em var(--text-color);
	
	&::before {
	  backdrop-filter: brightness(150%) contrast(200%);
	}

	&::after {
	  background: linear-gradient(var(--angle), var(--color-1), var(--color-2), var(--color-3));
	  mix-blend-mode: color-dodge;
	}
  } 
}

.neon-block {
  background: black;
  font-size: 10vw;
  text-transform: uppercase;
}
/* CSS For Desktops */
@media only screen and (min-width: 768px) {

	ul {
		display: flex;
		gap: 0 1rem;
		margin: 0;
		padding: 0.5rem 1rem 0.3rem 1rem;
		position: relative;
		border-radius: 0.5rem;
		list-style: none;
		background-color: rgba(256,256,256,.07);
		isolation: isolate;
	}
	
		h3 {
		position:relative;
		top:-180px;
	}
}