* {
		color:#cfe;
	}
	@keyframes intro {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@keyframes hover {
		from { transform: translateY(0); }
		to { transform: translateY(0.4vh); }
	}
	body {
		background-color: black;
		animation-name: intro;
		animation-duration: 2.75s;
		animation-direction: forward;
	}
	.card {
		width: 225px;
		height: 345px;
        flex-grow:0;
		padding: 16px;
		margin: 5%;
		background-color: black;
		box-shadow: 0 0 32px #04f3;
		border: 2px solid #7fdd;

        text-decoration: none;
		display: grid;
		grid-template-columns: 1fr;

		animation-name: hover;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;

		transition-duration: 0.2s;
		cursor: pointer;
	}
	.card:hover, .card:focus {
		background-color: #09f1;
		animation-play-state: paused;
		box-shadow: 0 0 32px #fff1, inset 0 0 128px #0f91, 0 -0.5vh 0 #4fd;
	}
	.cardtop, .cardbottom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.cardtop {
		font-family: selikiwen;
		font-size: 2.5em;
	}
	.cardbottom {
		font-family: Fairfax;
		font-size: 1.5em;
	}
	.carddump {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}