/* ------------------ Section definitions ------------------ */

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	padding: 0px;
	margin: 0px;
	font-family: 'Rockwell', Impact, sans-serif, Arial;
	font-size: 16px;
	font: 16px 'Rockwell', Impact, sans-serif, Arial;
}

body {
	height: calc(100vh - 10px);
	padding: 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background-color: #fff;
}

.container {
	height: 100%;
	margin: 0;
	background-color: #a6bbc9;
	color: #000;
	border: 1px solid black;
}

.header {
	padding: 10px;
	margin: 0;
	background-color: #a6bbc9;
	color: #fff;
}

.header-img {
	margin: 10px 0px 5px 0px;
	background-image: url('/images/Enigmatica360.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	height: 55px;
}

.discord-img {
	width: 70%;
	height: 250px;
	background-image: url('/images/discord.png');
	background-position: center top;
	background-repeat: no-repeat;
/*	background-size: 250px auto; */
	background-size: contain;
}

/* ------------------ Menu System definitions ------------------ */

.row::after {
	content: "";
	clear: both;
	display: table;
}

.menu ul:not(.list) {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu li {
	padding: 8px;
	margin-bottom: 7px;
	background-color: #377fe5;
	color: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.36), 0 2px 3px rgba(0,0,0,0.48);
}

.menu li:hover:not(.active) {
	background-color: #0099cc;
}

.menu li.active {
	background-color: #174fe5;
}

[class*="col-"] {
	float: left;
	padding: 15px 15px 15px 5px;
}

/* hide all content on page load */
[id*="menu-"] {
	display: none;
}

/* ... except this one */
#menu-home {
	display: block;
}

/* ------------------ Element Display definitions ------------------ */

.font-18 {
	font-size: 16px;
}

/*
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
*/

.col-1 {width: 5%;}
.col-2 {width: 10%;}
.col-3 {width: 15%;}
.col-4 {width: 20%;}
.col-5 {width: 25%;}
.col-6 {width: 30%;}
.col-7 {width: 35%;}
.col-8 {width: 40%;}
.col-9 {width: 45%;}
.col-10 {width: 50%;}
.col-11 {width: 55%;}
.col-12 {width: 60%;}
.col-13 {width: 65%;}
.col-14 {width: 70%;}
.col-15 {width: 75%;}
.col-16 {width: 80%;}
.col-17 {width: 85%;}
.col-18 {width: 90%;}
.col-19 {width: 95%;}
.col-20 {width: 100%;}


.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.bg-cyan {
	background-color: #a6bbc9;
	color: #fff
}

.bg-lightaqua {
	background-color: #d6ebf9;
}

.bg-blue {
	background-color: #377fe5;
	color: #fff;
}

/* ------------------ Media Queries ------------------ */

@media only screen and (min-width: 560px) {
	.discord-img {
		width: 60%;
	}
}

@media only screen and (min-width: 800px) {
	html {
		font-size: 22px;
	}

	.font-18 {
		font-size: 18px;
	}

	.header-img {
		height: 137px;
		background-image: url('/images/Enigmatica1024.jpg');
	}

	.discord-img {
		width: 50%
	}
}