* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*::selection {
	background-color: #44a3ec;
	color: #FFFFFF;
	text-shadow: none;
}

html {
	height: 100%;
}

body {
	color: #398aca;
	font-family: 'Maven Pro', 'Arial', sans-serif;
	font-size: 62.5%;
	background-color: #181818;
	min-height: 100%;
	box-shadow: inset 0 0 10px 0 #398aca;
	padding-top: 24px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-row-gap: 12px;
	justify-content: center;
}

header {
	display: grid;
	grid-template-rows: 103px auto;
	grid-row-gap: 12px;
	justify-items: center;
	padding: 0 12px;
}

header img {
	width: 40px;
	height: auto;
}

header h1 {
	font-size: 2.4rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 8px 16px rgba(0, 0, 0, .6);
	text-transform: uppercase;
}

footer {
	display: grid;
	margin: 0 0 12px 15px;
}

footer * {
	color: rgba(68, 163, 236, 0.7);
	align-self: end;
}

p, h2, footer * {
	font-size: 1.2rem;
}

.application {
	display: grid;
	grid-template-columns: 36px auto;
	grid-column-gap: 12px;
	grid-row-gap: 6px;
	padding: 12px;
	text-decoration: none;
	color: #44a3ec;
}

.application img {
	width: 100%;
	filter: drop-shadow(0 0 5px #000000);
}

.application div {
	align-self: center;
}

.application p {
	display: none;
	color: rgba(68, 163, 236, 0.7);
}

.application--disabled > * {
	opacity: 0.4;
}

.application--disabled .details {
	opacity: 1;
}

.application .details {
	grid-column: 1 / 3;
	font-size: 1.0rem;
}

@media all and (min-width: 425px) {
	header {
		grid-template-rows: auto;
		grid-template-columns: 40px auto;
		grid-column-gap: 15px;
	}

	header h1 {
		line-height: 103px;
	}

	.application {
		grid-template-columns: 40px auto;
		grid-column-gap: 18px;
		border: 1px solid #181818;
	}
}

@media all and (min-width: 768px) {
	body {
		padding-top: 48px;
		grid-row-gap: 36px;
	}

	header {
		grid-template-columns: 80px auto;
		grid-column-gap: 18px;
		justify-items: initial;
	}

	header img {
		width: 80px;
	}

	header h1 {
		font-size: 3.6rem;
		line-height: 206px;
	}

	.application {
		grid-template-columns: 80px 360px;
  	grid-column-gap: 24px;
  	margin-bottom: 12px;
	}

	.application h2 {
		font-size: 1.8rem;
	}

	.application p {
		display: block;
	}

	.application:hover {
		animation: raise 0.2s forwards;
		border-radius: 5px;
	}

	.application--disabled:hover {
		animation: none;
	}
	
	img.glow {
		animation: pulse 5s infinite;
	}
}

img.glow {
	filter: drop-shadow(0 0 5px #5d9bc6) drop-shadow(8px 8px 8px rgba(0, 0, 0, .8));
}

@keyframes pulse {
	0% {
		filter: drop-shadow(0 0 3px #5d9bc6) drop-shadow(8px 8px 8px rgba(0, 0, 0, .8));
	}
	50% {
		filter: drop-shadow(0 0 5px #5d9bc6) drop-shadow(8px 8px 8px rgba(0, 0, 0, .8));
	}
	100% {
		filter: drop-shadow(0 0 3px #5d9bc6) drop-shadow(8px 8px 8px rgba(0, 0, 0, .8));
	}
}

@keyframes raise {
	100% {
		border: 1px solid rgb(93, 155, 198, 0.2);
		box-shadow: 0 0 10px 0 rgb(93, 155, 198, 0.2);
	}
}