/* CSS VARIABLES
Here you can change the values for all elements that use these variables. 
This way you only have to change them once and not for each element individually. 

--main-spacing: Adds padding in header, sidebar, content and footer
--border-radius: Rounded corners for boxes and links
--menu-link-spacing: Spacing between links in the sidebar, footer, etc.
--footer-columns: Amount of columns side by side
--footer-wide-column-width: If you use class="cell wide", the columns will be rearranged and resized automatically
--container-top-bottom-spacing: Container distance top and bottom
--header-width & height: The right area automatically changes the max. width in proportion to the header size
*/

:root {
	--main-spacing: 15px;
	--menu-link-spacing: 3px;
	--main-border-radius: 3px;
	--icons-border-radius: 3px;
	--footer-columns: 3;
	--footer-wide-column-width: 400px;
	
	--header-width: 1280px;
	--header-height: 200px;
}

body {
	background-color: #fafafa;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #444;
}


/* STANDARDS
Headlines, normal links, text fields and formatting
*/

a {
	color: #586673;
}

a:hover {
	color: #999;
}

b,
strong {}

i,
em {}

h1 {}

h2 {}

h3 {}

input {
	width: 50%;
}

textarea {}

button {}

input,
select,
textarea,
button {
	border-radius: var(--main-border-radius);
}


/* Layout CSS starts here */

#container {
	width: 100%;
	height: 100vh;
	border-radius: var(--main-border-radius);
	display: grid;
	grid-template-columns: 50px 150px minmax(auto, var(--header-width)) 1fr 15%;
	grid-template-rows: [topbar] 50px [header] var(--header-height);
	grid-template-areas: 
		"topbar topbar topbar topbar topbar" 
		"sidebar sidebar header . ."
		"sidebar sidebar content . ." 
		"sidebar sidebar footer . .";
}

#topbar {
	grid-area: topbar;
	background: #35597A;
	padding: var(--main-spacing);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#topbar #logo {
	font-size: 14pt;
	color: #fff;
}

#topbar #social a {
	font-size: 14pt;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--icons-border-radius);
	width: 35px;
	height: 35px;
	color: #515151;
	background: #db5665;
}

#topbar #social a[aria-label="Twitter"] {
	background: #1DA1F2;
	color: #fff;
}

#topbar #social a[aria-label="Facebook"] {
	background: #4267B2;
	color: #fff;
}

#topbar #social a[aria-label="Instagram"] {
	background: #f09433;
	background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: #fff;
}

#topbar #social a[aria-label="Discord"] {
	background: #7289da;
	color: #fff;
}

#topbar #social a:hover {
	filter: brightness(105%);
}

header {
	grid-area: header;
	background-color: #eee;
	height: var(--header-height);
	background-image: url('../images/header.png');
	background-position: center;
	background-repeat: no-repeat;
}

#sidebar {
	grid-area: sidebar;
	background: #35597A;
}

#sidebar h1 {
	padding: var(--main-spacing);
	font-size: 11pt;
	font-weight: normal;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0) 100%);
	color: #fff;
}

#sidebar h1 .fas,
#sidebar h1 .far,
#sidebar h1 .fab {
	margin-right: 10px;
	color: #db5665;
}

#sidebar nav {
	background: rgba(0,0,0, 0.3);
	padding: var(--main-spacing);
}

#sidebar nav a {
	color: #fff;
	background: rgba(0,0,0, 0.1);
	padding: 5px 10px;
	display: block;
	border-radius: var(--main-border-radius);
}

#sidebar nav a:hover {
	background: #db5665;
	color: #8a343e;
}

#sidebar nav:not(.table) a:not(:last-child) {
	margin-bottom: var(--menu-link-spacing);
}

#content {
	grid-area: content;
	background: #fff;
	padding: var(--main-spacing);
}

footer {
	grid-area: footer;
	background: #eee;
	padding: var(--main-spacing);
}

footer .grid {
	display: grid;
	grid-gap: var(--main-spacing);
	grid-template-columns: repeat(var(--footer-columns), 1fr);
	/* 3 boxes side by side, 1fr = auto width */
}

footer .column {
	background: rgba(0,0,0, 0.05);
	border-radius: var(--main-border-radius);
	padding: var(--main-spacing);
}

footer .column a {
	color: #fff;
	background: #fc6274;
	padding: 5px 10px;
	display: block;
	border-radius: var(--main-border-radius);
}

footer .column a:hover {
	background: #db5665;
	color: #8a343e
}

footer .column a:not(.table a):not(:last-child) {
	margin-bottom: var(--menu-link-spacing);
}

footer .wide {
	width: var(--footer-wide-column-width);
}

#sidebar nav.table, footer .column .table {
	display: grid;
	grid-gap: var(--menu-link-spacing);
	grid-template-columns: repeat(2, 1fr);
	/* 2 links side by side, 1fr = auto width */
}

/* Hides the sidebar toggle checkbox */
label.sidebarToggle,
input#toggle.sidebarToggle {
	display: none;
	visibility: hidden;
}

/* Sidebar toggle */
label.sidebarToggle:before {
	content: "\2261";
	font-size: 18pt;
	line-height: 16pt;
	z-index: 2;
	color: #fff;
}

label.sidebarToggle {
	cursor: pointer;
	padding: var(--main-spacing);
	background: #35597A;
}

/* Change toggle icon when the sidebar is visible */
input#toggle.sidebarToggle:checked~label:before {
	content: "\039E";
}

/* Slide in the sidebar when the toggle is clicked */
input#toggle.sidebarToggle:checked ~ #sidebar {
	display: block;
	grid-area: sidebar;
	position: relative;
	left: 0;
	z-index: 1;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
}

/* Hide the sidebar and turn on the toggle if the resolution width is max. 1024px */
@media only screen and (max-width: 1024px) {
	#container {
		grid-template-columns: 50px 150px minmax(auto, var(--header-width)) 1fr 50px;
		grid-template-rows: [topbar] 50px [header] var(--header-height);
		grid-template-areas: 
			"minibar topbar topbar topbar topbar" 
			"sidebar sidebar header . ."
			"sidebar sidebar content . ." 
			"sidebar sidebar footer . .";
	}

	label.sidebarToggle {
		display: block;
		visibility: initial;
	}
	
	#sidebar {
		position: relative;
		left: -100%;
	}

	header {
		grid-column-start: minibar-end;
		grid-column-end: span header-end;
	}

	#content {
		grid-column-start: minibar-end;
		grid-column-end: span content-end;
	}

	footer {
		grid-column-start: minibar-end;
		grid-column-end: span footer-end;
	}
}


/* Mobile adjustments */

@media only screen and (max-width: 768px) {
	input {
		width: 70%;
	}
	header {
		background-size: cover;
	}
	#topbar #social a {
		width: 30px;
		height: 30px;
		font-size: 12pt;
	}
	#container {
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		grid-template-columns: 1fr, 1fr;
		grid-template-areas: 
			"minibar topbar"
			"content" 
			"footer";
	}
	footer .grid {
		grid-template-columns: 100%;
	}
	footer .wide {
		width: 100%;
	}
	header {
		grid-column-start: minibar-start;
		grid-column-end: span end;
	}
	#content {
		grid-column-start: minibar-start;
		grid-column-end: span end;
	}
	footer {
		grid-column-start: minibar-start;
		grid-column-end: span end;
	}
}