style.css

* {
	margin: 0em;
	padding: 0em;
}

body {
	/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
	/*color: #000000;*/
	color: #333333;
	background-color: #FFFFFF;
	font-size: 100%;
	font-family: sans-serif;


	letter-spacing: 0.025em;
	text-shadow: 0 0 1em transparent, 1px 1px 1.2px rgba(0, 0, 0, 0.004);

	overflow: visible;
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-rows: 6em 1fr 5em;
	/*gap: 0px 0px;*/
	grid-template-areas:
	"aside header ."
	"main main main"
	"footer footer footer";
	justify-items: center;
	align-content: space-evenly;
}

a {
	color: #337ab7;
	text-decoration: none;
}


p, blockquote, ul, ol, dl, table, pre {
	margin: 0 0 1em 0;
}


ul, ol {
	padding-left: 2em;
}

li + li {
	margin-top: 0.25em;
}

h1 {
	padding-bottom: 0.3em;
	font-size: 2em;
	border-bottom: 0.1em solid #eee;
}

h2 {
	padding-bottom: 0.3em;
	font-size: 1.5em;
	border-bottom: 0.1em solid #eee;
}

h1,h2,h3,h4,h5,h6 {
	margin-top: 1.5em;
	margin-bottom: 1em;
	font-weight: 600;
	line-height: 1.25;
}


body > header {
	grid-area: header;
	/*! display: flex; */
	justify-content: center;
	align-items: center;
	width: 100%;
	/* Always on Top of Page */
	position: sticky;
	top: 0;
}

#Logo {
	width: 10em;
}

body > aside {
	grid-area: aside;
}
body > aside img {
	margin: 1em;
	height: 6em;
}

body > header nav {
	/*! margin: 1em; */
	display: flex;
}
body > header a {
	width: 20%; /* 100% / 5 tabs = 20% */
	/*! padding: 1em; */
	/*margin: 1em;*/
	color: #333;
	background-color: #ffffff;
	border-bottom: 0.1em solid #336;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.1s, border 0.1s;
	padding-top: 0.2em;
}
body > header a:hover {
	background-color: #e6e6e6;
	border-bottom: 0.2em solid #536;
}

body > header > input[type=checkbox]{
	display: none;
}

body > header label {
	display: none;
	background-color: #f0f0f0;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	cursor: pointer;
}
body > header label:hover {
	background-color: #e6e6e6;
	/*border-bottom: 0.2em solid #536;*/
}

body > footer {
	grid-area: footer;
}



@media only screen and (max-width: 118em) {
	body {

		grid-template-rows: 6em 1fr 6em 5em;
		grid-template-columns: 1fr;
		grid-template-areas:
		"header"
		"main"
		"aside"
		"footer";
	}

}

@media only screen and (max-width: 75em) {
	body > header {
		margin-bottom: 0.2em;
	}
	body > header nav {
		margin: 0.2em;
		display: none;

	}
	body > header label {
		display: inline-block;
		font-style: normal;
		font-size: 1.2em;
		padding: 1em;
	}
	body > header a {
		width: 100%;
		/*! margin-top: 0.2em; */
		padding-bottom: 0.2em;
		box-sizing: border-box;
		display: block;
		border-top: 0.1em solid #333;
	}
	body > header > input[type=checkbox]:checked ~ nav{
		display: block;
	}
	body {
		grid-template-rows: 2em 1fr 6em 5em;
		grid-template-columns: 1fr;
		grid-template-areas:
		"header"
		"main"
		"aside"
		"footer";
	}
}



main {
	grid-area: main;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1.5;
	word-wrap: break-word;
	/*padding-top: 2.5em;*/
	padding-bottom: 2.5em;
	padding-right: 1em;
	padding-left: 1em;
	margin-right: auto;
	margin-left: auto;

	max-width: 48em;
}

main > footer {
	margin-top: 2em;
	border-top: 0.1em solid #eee;
	display: flex;
	justify-content: center;
	align-items: center;
}

main img {
	width: 46em;
	padding: 1em;

}



.alert {
	padding:1em;
	margin-bottom:1.2em;
	border:0.1em solid transparent;
	border-radius:0.25em;
	/*padding:15px;
	margin-bottom:20px;
	border:1px solid transparent;
	border-radius:4px;*/
}

.alert h4 {
	margin-top:0;
	color:inherit;
}

.alert .alert-link {
	font-weight:700;
}

.alert > p, .alert > ul {
	margin-bottom:0;
}

.alert > p+p {
	margin-top:0.33em;
}

.alert-dismissable, .alert-dismissible {
	padding-right:2em;
}

.alert-dismissable .close,.alert-dismissible .close{
	position:relative;
	top:-0.1em;
	right:-1.4em;
	color:inherit;
}

.alert-success {
	color:#3c763d;
	background-color:#dff0d8;
	border-color:#d6e9c6;
}

.alert-success hr {
	border-top-color:#c9e2b3;
}

.alert-success .alert-link {
	color:#2b542c;
}

.alert-info {
	color:#31708f;
	background-color:#d9edf7;
	border-color:#bce8f1;
}

.alert-info hr {
	border-top-color:#a6e1ec;
}

.alert-info .alert-link {
	color:#245269;
}

.alert-warning {
	color:#8a6d3b;
	background-color:#fcf8e3;
	border-color:#faebcc;

}

.alert-warning hr {
	border-top-color:#f7e1b5;
}

.alert-warning .alert-link {
	color:#66512c;
}

.alert-danger {
	color:#a94442;
	background-color:#f2dede;
	border-color:#ebccd1;
}

.alert-danger hr {
	border-top-color:#e4b9c0;
}

.alert-danger .alert-link {
	color:#843534;
}