Template:AngelQuarantine/styles.css

#angel_quarantine-title { /* the main title itself */
	font-size: 35px;
	font-weight: bold;
	justify-content: center;
	text-align: center;
	color: #ffea00;
	animation: flash 2s infinite ease-in-out;
}

#angel_quarantine-subtitle {
	display: block;              
	width: fit-content;          
	margin: 1em auto;             
	background: #000;
	color: #ffea00;
	font-weight: bold;
	text-align: center;
	font-size: 1.2rem;
	padding: 0.3em 1em;
	border-radius: 0.2em;
	animation: glow 2s infinite ease-in-out; /* the subtitle pulse */
	position: relative;          
	overflow: visible;
	text-transform: uppercase;
	white-space: pre-wrap;
}

#angel_quarantine-subtitle::after { /* Subtitle danger stripes */
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -1.3em;
	width: calc(100% + 2em);
	height: 0.5em;
	background: repeating-linear-gradient(
		-45deg,
		#ffea00 0,
		#ffea00 25%,
		#000 25%,
		#000 50%
	);
	background-size: 0.8em 0.8em;
	border-radius: 0 0 0.2em 0.2em;
	z-index: -1;
	
	animation: stripe-scroll 1s linear infinite;
}

@keyframes stripe-scroll {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0.8em 0; /* move by one stripe width */
	}
}


@keyframes flash {
	0%, 100% {
		text-shadow: none;
	}
	50% {
		text-shadow: 0 0 15px #ffea00;
	}
}

@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 0 transparent;
	}
	50% {
		box-shadow: 0 0 15px #ffea00;
	}
}