.four04{

	min-height: 100vh;
	background-image: linear-gradient(#3b3646,transparent 30%),
		repeating-linear-gradient(-70deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .1) 1.2px, transparent 0, transparent 13px),
		repeating-linear-gradient(20deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02) 1.3px, transparent 0, transparent 13px),
		radial-gradient(at bottom, #7f4d5d, #1f2d3d);
	background-size: auto, 28px 38px,38px 28px,auto;
	background-position: left top,0 0,0 0,left top;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: b linear 1.5s infinite;
}


.four04 .card {
	margin: 0 1em 2em;
	background: rgba(9, 0, 0, .35) linear-gradient(0deg, rgba(255, 255, 255, .16), transparent 15%);
	border: 1px solid rgba(0, 0, 0, .6);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 15px 20px rgba(0, 0, 0, .3);
	border-radius: 2em;
	padding: 1.4em 2em;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	position: relative;
	text-shadow: 0 -1px 1px #000;
	animation: a 1s;
}
.four04 .card:before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 1em;
	right: 1em;
	height: 2em;
	border-radius: 9em;
	background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .1));
	box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
}
.four04 .a {
	font-size: 1.4em;
}
.four04 .b {
	margin-top: 1.5em;
	opacity: .6;
}
.four04 p {
	font-size: 75%;
	margin: .6em 0 0;
	opacity: .5;
}
@keyframes a {
	0% {transform: scale(1.2);opacity: 0}
	50% {transform: scale(1.2);opacity: 0}
	100% {transform: scale(1);opacity: 1}
}
@keyframes b {
	0% {background-position: left top,0 0,0 0,left top;}
	100% {background-position: left top,0 78px,114px 0,left top;}
}