@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
body,
html {
	margin: 0;
	width: 100%;
	height: 100%
}

h1 {
font-family: 'Akaya Kanadaka', cursive;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	color: #fefee9;
	text-align: center;
	font-weight: 20vw;
	font-size: 20vw;
	letter-spacing: 0.5vw;
}

@media only screen and (max-width:800px) {
	h1 {
		font-size:20vw;
		letter-spacing: 0
	}
}

.heart {
	font-size: 35px;
	animation: beat .5s infinite alternate;
	transform-origin: center;
	text-shadow: 2px 2px 100px #ff008a;
	z-index: 5
}

@keyframes beat {
	to {
		transform: scale(1.1)
	}
}

.neon {
 font-family: 'Akaya Kanadaka', cursive;
	font-size: 10vw;
	color: #ff008a;
	text-shadow: 0 250px 10px #ff008a;
	z-index: 5;
	text-transform: none;
	animation-name: example;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite
}

.neon:before {
	content: '';
	position: absolute;
	background: #ff008a;
	width: 300px;
	height: 300px;
	filter: blur(80px);
	opacity: .3;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	z-index: 1;
	animation-name: examplebefore;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite
}

@keyframes examplebefore {
	0% {
		background-color: #ff008a
	}
	15% {
		background-color: #000
	}
	17% {
		background-color: #ff008a
	}
	30% {
		background-color: #000
	}
	40% {
		background-color: #000
	}
	100% {
		background-color: #ff008a
	}
}

@keyframes example {
	0% {
		color: #ff008a;
		text-shadow: #ff008a
	}
	15% {
		color: #000;
		text-shadow: none
	}
	17% {
		color: #ff008a;
		text-shadow: #ff008a
	}
	30% {
		color: #000;
		text-shadow: none
	}
	40% {
		color: #000;
		text-shadow: none
	}
	100% {
		color: #ff008a;
		text-shadow: #ff008a
	}
}

.absolute,
.ElasticCard-content,
.ElasticCard-card,
.Static {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.relative,
.ElasticCard {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
}

.ElasticCard {
	height: 100%;
	overflow: hidden;
}

.ElasticCard-content,
.ElasticCard-card {
	height: 100%;
	top: 50%;
	left: 0;
	cursor: grab;
}

.ElasticCard-content {
	padding: 0px;
	color: #fafafa;
	box-sizing: border-box;
}

.ElasticCard-svg {
	width: 100%;
	height: 100%;
}

.ElasticCard-svg #card-path {
	fill: rgb(139, 24, 174);
}