/* system font stack */
body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

	margin: 0;
	padding: 0;
	border: 0;
	min-height: 100vh;

	background-color: white;
}

.container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	padding: 15px;
}

.link {
	width: calc(50vw - 46px);
	height: calc(50vh - 46px);
	margin: 15px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	font-size: 2em;
	color: white;

	text-decoration: none;
	font-weight: bold;

	background-color: #3498db; /* fallback for non-gradient-supporting browsers */

	border-radius: 5px;

	will-change: transform;
	transform: scale(1);
	transform-origin: center;
	transition: transform 0.25s cubic-bezier(0,0,0.3,1);

	cursor: pointer !important;
}

.link > .fas {
	font-size: 5em;
	margin-bottom: 15px;
}

.link:hover {
	transform: scale(1.05);
	cursor: pointer;
}


@media (max-width: 1000px) {
	.link {
		margin: 0;
		margin-bottom: 15px;
		width: 100%;
	}
}


/* colors */
.link:nth-child(1n) {
	background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

.link:nth-child(2n) {
	background: linear-gradient(45deg, #ff00cc, #333399);
}

.link:nth-child(3n) {
	background: linear-gradient(45deg, #0575e6, #00f260);
}

.link:nth-child(4n) {
	background: linear-gradient(45deg, #3e5151, #decba4);
}