$highlight: #5bc0eb;
$darkhighlight: #fde74c;
body {
	padding: 50px;
	display: flex;
	flex-flow: wrap;
	font-family: "Ubuntu", sans-serif;
	* {
		box-sizing: border-box;
	}
}
.card-container {
	flex: 300px;
	margin: 30px;
	.card {
		font-weight: bold;
		position: relative;
		width: 100%;
		a {
			padding: 30px;
			width: 100%;
			height: 400px;
			border: 2px solid black;
			background: white;
			text-decoration: none;
			color: black;
			display: block;
			transition: 0.25s ease;
			&:hover {
				transform: translate(-30px, -30px);
				border-color: $highlight;
				.card--display {
					display: none;
				}
				.card--hover {
					display: block;
				}
			}
			.card--display {
				i {
					font-size: 60px;
					margin-top: 180px;
				}
				h2 {
					margin: 20px 0 0;
				}
			}
			.card--hover {
				display: none;
				h2 {
					margin: 20px 0;
				}
				p {
					font-weight: normal;
					line-height: 1.5;
					&.link {
						margin: 20px 0 0;
						font-weight: bold;
						color: $highlight;
					}
				}
			}
		}
		.card--border {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border: 2px dashed black;
			z-index: -1;
		}
		&.card--dark {
			a {
				color: white;
				background-color: black;
				border-color: black;
				.card--hover {
					.link {
						color: $darkhighlight;
					}
				}
			}
		}
	}
}