$header-width: 1560px;
$main-width: 1024px;

.visible { display: initial; }

body {
	margin: 0;
	color: #fff;
	font-size: 1.35em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.6;
	height: 100vh;
	background: url(/body-bg.svg) #d22d40;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;

	a { text-decoration: none; }
}

nav {
	display: none;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: $header-width;
	margin: 0 auto;
	padding: 2em 1em;

	img { width: 250px; }

	h1 {
		font-size: inherit;
		color: #fff;
	}

	#menu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		width: 250px;
		font-size: 1.2em;

		#menuicon {
			margin-left: 1em;
			width: 1.5em;

			div {
				background: #fff;
				height: .15em;
				width: 100%;
				margin: .5em 0;
				border-radius: .25em;
			}
		}
	}
}

main {
	max-width: $main-width;
	padding: 1em;
	margin: 0 auto;

	h1, h2, h3, h4, h5, h6 {
		line-height: 1.2;
		margin-top: 2.75em;
	}
	h2 { font-size: 2.3em; }

	.main-image {
		float: right;
		max-width: 48%;
		margin-left: 2em;
	}

	section.software {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.program {
			width: 43%;
			box-sizing: border-box;
			margin-top: 4em;

			img {
				max-height: 4em;
				max-width: 100%;
			}

			div {
				display: flex;
				justify-content: space-between;

				ul { padding-left: 1em; }
			}
		}
	}
}

body.index {
	background-image: url(/index-bg.png), url(/body-index-bg.svg);
	background-position: center center, top center;
	background-size: 30em auto, cover;

	main {
		max-width: $header-width;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2em 1em;

		h2 { font-size: 2.5em; }

		section, aside { max-width: 35%; }
		section{ text-shadow: 0px 3px 8px rgba(0, 0, 0, .35); }
		aside {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			margin-top: 6em;

			a {
				text-align: center;
				border: 2px solid #fff;
				border-radius: .8em;
				margin-bottom: 1.5em;
				padding: .6em 1.5em;
				color: #fff;

				&:hover {
					background: #fff;
					color: #b52637;
				}
			}
		}
	}
}