Template:Aspie/styles.css

.template-aspie {
	overflow: hidden;
	border: 4px ridge #ffd900;
	background: url("https://soyjakwiki.org/images/8/8c/Aspie.svg");
	background-size: 4rem;
	background-position: center;
	text-shadow: 0 1px 2px #523200;
	color: white;
	box-shadow: inset 0 0 5px 0 #523200;
}

.template-aspie a {
	color: #8dff99;
}

.template-aspie .line1 {
	font-size: 170%;
}

.template-aspie .line2 {
	width: 100%;
}

.template-aspie .random-text-wrapper {
	display: flex;
	position: relative;
	justify-content: center;
}

.template-aspie .random-text {
	display: block;
	clip-path: inset(0 30rem 0 0);
	animation: text-reveal 3s linear forwards 2s;
	width: 100%;
}

.template-aspie .train {
	position: absolute;
	justify-self: center;
	align-self: center;
	animation: train-animation 7s linear forwards;
}

@keyframes text-reveal {
  from {
    clip-path: inset(0 30rem 0 0);
  }
  to {
    clip-path: inset(0 0rem 0 0);
  }
}

@keyframes train-animation {
  from {
    transform: translateX(-30rem);
  }
  to {
    transform: translateX(30rem);
  }
}