/* 
 * From https://freefrontend.com/css-glow-text-effects/
 * and https://codepen.io/AllThingsSmitty/pen/VzXrgY 
 */


html, body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font-family: sans-serif;
	user-select: none;
}

.neon1 {
	color: #DBF4FF;
	text-shadow:
		0 0 5px #A5E5FF,
		0 0 10px #00B6FF,
		0 0 20px #00B6FF,
		0 0 40px #00B6FF,
		0 0 80px #00B6FF,
		0 0 90px #00B6FF,
		0 0 100px #00B6FF,
		0 0 150px #00B6FF;
}

.neon {
	color: #DBF4FF;
	animation: flicker 1.5s infinite alternate;
	padding: 4rem 6rem 4rem;
	border: 0.4rem solid #FFDBFD;
	border-radius: 2rem;
}

/* Animate neon flicker */
@keyframes flicker {

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
                0 0 5px #A5E5FF,
                0 0 10px #00B6FF,
                0 0 20px #00B6FF,
                0 0 40px #00B6FF,
                0 0 80px #00B6FF,
                0 0 90px #00B6FF,
                0 0 100px #00B6FF,
                0 0 150px #00B6FF;

        box-shadow:
            0 0 .5rem #FFA5FA,
            inset 0 0 .5rem #FFA5FA,
            0 0 2rem #FF00F2,
            inset 0 0 2rem #FF00F2,
            0 0 4rem #FF00F2,
            inset 0 0 4rem #FF00F2;
    }

    20%, 24%, 55% {
        text-shadow: none;
        box-shadow: none;
    }
}