*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Varela Round', sans-serif;
}

html {
	background: #181C1F;
}

main {
	display: grid;
	grid-template-areas: "header""section""footer";
}

header {
	grid-area: header;
	width: 100%;
	padding: 24px;
	background: #181C1F;
}

footer {
	grid-area: footer;
}

h1 {
	color: #FFFFFF;
	float: right;
	margin: 0;
	font-size: 16px;
}

section {
	display: grid;
	grid-area: section;
	grid-template-areas: "time""speed""fuel""occupation";
	grid-template-rows: 1fr 1fr;
	grid-gap: 0px;
	padding:0px;
}

#time {
	grid-area: time;
	background: #181C1F;
	color: #FFFFFF;
	padding: 24px;
	background: #181C1F;
	border-bottom: 2px solid #ff7f2a;
	padding-bottom: 16px;
}

#speed, #fuel, #occupation {
	width: 100%;
	min-height: 300px;
}

#chart_speed {
	grid-area: speed;
	background: #181C1F;
	border-bottom: 2px solid #ff7f2a;
	padding-bottom: 16px;
}

#chart_fuel {
	grid-area: fuel;
	background: #181C1F;
	border-bottom: 2px solid #ff7f2a;
	padding-bottom: 16px;
}

#chart_occupation {
	grid-area: occupation;
	background: #181C1F;
	border-bottom: 2px solid #ff7f2a;
	padding-bottom: 16px;
}

#occupy-mars{
	width: 128px;
	margin: 24px;
}

#spacex-logo {
	width: 264px;
}

@media screen and (min-width: 460px) {
	h1 {font-size: 24px;}
	header, footer {
		border-left: 8px solid grey;
	}
	#chart_fuel {
		border-left: 8px solid #008852;
		border-bottom: none;
	}
	#chart_speed {
		border-left: 8px solid #005288;
		border-bottom: none;
	}
	#chart_occupation {
		border-left: 8px solid #ff7f2a;
		border-bottom: none;
	}
	#time {
		border-left: 8px solid #ffffff;
		border-bottom: none;
	}
}


@media screen and (min-width: 672px) {
	html {
		background: url(../img/space.jpg) no-repeat center center;
		background-size: cover;
	}

	h1 {font-size: 32px;}
	section {
		grid-template-areas: "time time""speed fuel""occupation .";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-gap: 12px;
		padding: 12px;
	}

	#chart_fuel {
		/*border-bottom: 4px solid #008852;*/
		animation: 7s ease-in-out -2s insetBoxShadowGreen infinite;
		border-left: none;
	}
	#chart_speed {
		/*border-bottom: 4px solid #005288;*/
		animation: 5s ease-in-out -4s insetBoxShadowBlue infinite;
		border-left: none;
	}
	#chart_occupation {
		/*border-bottom: 4px solid #ff7f2a;*/
		animation: 6s ease-in-out -6s insetBoxShadowOrange infinite;
		border-left: none;
	}
	#time {
		/*border-bottom: 4px solid #ffffff;*/
		animation: 8s ease-in-out -8s insetBoxShadowWhite infinite;
		border-left: none;
	}
	header, footer {
		border-left: none;
	}


}

@media screen and (min-width: 1400px) {
	html {
		background: url(../img/mars.png) no-repeat bottom right, url(../img/space.jpg) no-repeat center center;
		background-size: 25em, cover;
	}
	h1 {font-size: 48px;}
	section {
		grid-template-areas: "speed speed fuel fuel""occupation time time .";
		grid-template-columns: 4fr 2fr 2fr 4fr;
		grid-gap: 24px;
		padding: 24px;
	}

}

@keyframes insetBoxShadowGreen {
	0% {box-shadow: inset 0px 0px 0px -4px #008852}
	50% {box-shadow: inset 0px -20px 30px -20px #008852}
	100% {box-shadow: inset 0px 0px 0px -4px #008852}
}
@keyframes insetBoxShadowBlue {
	0% {box-shadow: inset 0px 0px 0px -4px #005288}
	50% {box-shadow: inset 0px -20px 30px -20px #005288}
	100% {box-shadow: inset 0px 0px 0px -4px #005288}
}
@keyframes insetBoxShadowOrange {
	0% {box-shadow: inset 0px 0px 0px -4px #ff7f2a}
	50% {box-shadow: inset 0px -20px 30px -20px #ff7f2a}
	100% {box-shadow: inset 0px 0px 0px -4px #ff7f2a}
}
@keyframes insetBoxShadowWhite {
	0% {box-shadow: inset 0px 0px 0px -4px #ffffff}
	50% {box-shadow: inset 0px -20px 30px -20px #ffffff}
	100% {box-shadow: inset 0px 0px 0px -4px #ffffff}
}