* {
    box-sizing: border-box;
}
html, body {
    height:100%;
    width: 100%;
    margin:0;
    padding:0;
    color: white;
    font-family: 'Lalezar', cursive;
}
body {
    text-align:center;
    background: #222;
}
.grid > p {
    padding:0; 
    margin: 0; 
    margin-bottom: 20px; 
    font-size: 10vw;
}
.placeholder {
    font-size: 25vw;
    line-height: 80%; 
}
.grid {
    padding: 1em 1em; 
    height:100%;
    width: 100%;
    display:flex;
    flex-direction: column; 
    justify-content:center; 

}

/*Thanks for the inspiration! https://codepen.io/alvarotrigo/pen/dyzxgOO*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--color-primary: #fcccc6;
	--color-secondary: #f49b90;
	--color-tertiary: #d86f61;
	--color-quaternary: #b75548;
	--color-quinary: #b74132;
}



.content {
	display: flex;
	align-content: center;
	justify-content: center;
}

.text_shadows {
	text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	color: var(--color-primary);
	animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
	letter-spacing: 0.4rem;
    max-width: 100vw;
    word-wrap: break-word;
}

@keyframes shadows {
	0% {
		text-shadow: none;
	}

	10% {
		text-shadow: 3px 3px 0 var(--color-secondary);
	}

	20% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
	}

	30% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
	}

	40% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
	}

	50% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
	}

	60% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
	}

	70% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
	}

	80% {
		text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
	}

	90% {
		text-shadow: 3px 3px 0 var(--color-secondary);
	}

	100% {
		text-shadow: none;
	}
}

@keyframes move {
	0% {
		transform: translate(0px, 0px);
	}

	40% {
		transform: translate(-12px, -12px);
	}

	50% {
		transform: translate(-12px, -12px);
	}

	60% {
		transform: translate(-12px, -12px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}


 /* .animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
} */