* {
	font-family: 'Inter', sans-serif;
}
body {
	/* background-image: linear-gradient(to top, rgba(5, 78, 82, 1) 0%, rgba(41, 65, 82, 1) 100%); */
	padding: 0px;
	margin: 0px;
	background: linear-gradient(45deg, #360057, #004762, #005b45);
	background-size: 400% 400%;
	-webkit-animation: ANIM_backgroundGradient 30s ease infinite;
	-moz-animation: ANIM_backgroundGradient 30s ease infinite;
	animation: ANIM_backgroundGradient 30s ease infinite;
	}
		@-webkit-keyframes ANIM_backgroundGradient {
			0% {background-position: 0% 50%}
			50% {background-position: 100% 50%}
			100% {background-position: 0% 50%}
		}
		@-moz-keyframes ANIM_backgroundGradient {
			0% {background-position: 0% 50%}
			50% {background-position: 100% 50%}
			100% {background-position: 0% 50%}
		}
		@keyframes ANIM_backgroundGradient {
			0% {background-position: 0% 50%}
			50% {background-position: 100% 50%}
			100% {background-position: 0% 50%}
		}
h1 {
	text-align: center;
	color: rgba(255,255,255,0.7);
	margin-bottom: 30px;
	-webkit-animation: animation-slideinfrombottom 1.3s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */
	animation: animation-slideinfrombottom 1.3s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */
}
	.viewport {
		display: flex;
		align-items: center;
		justify-content: center;
		/* flex-wrap: wrap; */
		height: 100vh;
		/* background: yellow */
		}
	.appViewport {
		/* display: block; */
		height: auto;
		/* background: red; */
		padding: 30px 80px;
		border-radius: 10px;
	}
	.appcontainer {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		/* height: 100vh; */
		}
		.break {
		  flex-basis: 100%;
		  height: 0;
		}
		.appcontainer .system {
			margin-top: 30px;
			-webkit-animation: animation-slideinfrombottom 1.4s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */
			animation: animation-slideinfrombottom 1.4s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */
		}
		.app {
			color: rgba(255,255,255,0.6);
			text-decoration: none;
			-o-transition:.3s;
			-ms-transition:.3s;
			-moz-transition:.3s;
			-webkit-transition:.3s;
			transition:.3s;
			margin-bottom: 30px;
			-webkit-animation: animation-slideinfrombottom 1.4s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */
			animation: animation-slideinfrombottom 1.4s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */
			}
			.app + .app {
				margin-left: 30px;
				}
			.app:hover {
				scale: 1.03;
				color: rgba(255,255,255,0.8);
				}
			.app:focus, .app:active {
				scale: 0.975;
				color: rgba(255,255,255,0.8);
				opacity: 0.6;
				}
			.appcover {
				height: 150px;
				width: 150px;
				border-radius: 3px;
				background: rgb(2,0,36);
				background: linear-gradient(349deg, rgba(5, 0, 93, 1) 0%,rgba(0,129,255,1) 100%);
				background-size: cover;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30px;
				font-weight: 600;
				}
				.app.small .appcover {
					height: 80px;
					width: 80px;
				}
				.appcover.gold {
					background: linear-gradient(349deg, rgba(83, 71, 1, 1) 0%,rgba(170, 202, 15, 1) 100%);
				}
				.appcover.green {
					background: linear-gradient(349deg, rgba(1, 83, 9, 1) 0%,rgba(15, 202, 62, 1) 100%);
				}
				.appcover.purple {
					background: linear-gradient(349deg, rgba(65, 1, 83, 1) 0%,rgba(146, 15, 202, 1) 100%);
				}
				.appcover.red {
					background: linear-gradient(349deg, rgba(83, 1, 1, 1) 0%,rgba(202, 15, 15, 1) 100%);
				}
				.app:focus .appcover, .app:active .appcover {
					box-shadow: 0px 0px 30px rgba(0,122,255,0.3);
				}
				.appcover span {
					color: rgba(255,255,255,0.5);
					}
					.appcover:hover span {
						color: rgba(255,255,255,0.7);
						}
			.appname {
				text-align: center;
				margin-top: 15px;
				font-weight: 500;
				}
				.app.small .appname {
					font-size: 13px;
				}


@-webkit-keyframes animation-slideinfrombottom {
	0% {
		-webkit-transform: translate(0, 50%);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate(0, 0);
		opacity: 1;
	}
}

@keyframes animation-slideinfrombottom {
	0% {
		transform: translate(0, 50%);
		opacity: 0;
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}