/* 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
*/

@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');

:root {
	--main-spacing: 20px;
	--menu-link-spacing: 5px;
	--main-border-radius: 5px;
	--icons-border-radius: 100%;
	--footer-columns: 1;
	--footer-wide-column-width: 400px;
	--container-top-bottom-spacing: 0px;
}

body {
	background-color: #FFDBC3;
	font-family: 'Karla', sans-serif;
	font-size: 10.5pt;
}

table {
	font-size: 10.5pt;
}

.center {
	text-align: center;
}

.deck {
	white-space: nowrap;
	font-size: 0;
}


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

a {
	color: #777;
}

a:hover {
	color: #999;
}

/*b,
strong {}

i,
em {}*/

h1, h2, h3 {
	font-family: 'Goudy Bookletter 1911', serif;
	padding-bottom: 0.5em;
}

input {
	width: 50%;
}

/*textarea {}

button {}*/

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


/* Layout CSS starts here */

#container {
	width: 80%;
	overflow: hidden;
	border-radius: var(--main-border-radius);
	margin: var(--container-top-bottom-spacing) auto;
	box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
	display: grid;
	grid-template-columns: 230px 1fr 230px;
	grid-template-areas: 
		"topbar topbar topbar" 
		"header header header" 
		"sidebar content content" 
		"footer footer footer";
}

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

#topbar #logo {
	/*font-size: 14pt;*/
	width: 250px;
}

#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: #eee;
}

#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: #aaa;
	height: 500px;
	background: url('../images/header.png');
	background-position: center;
}

#sidebar {
	font-size: 11.5pt;
	grid-area: sidebar;
	padding: var(--main-spacing);
	background: #fff;
}

#sidebar nav {
	margin-bottom: var(--main-spacing);
}

#sidebar nav a {
	color: #fff;
	background: #9F91CC;
	padding: 5px 10px;
	display: block;
	border-radius: var(--main-border-radius);
	font-size: 10.5pt;
}

#sidebar nav a:hover {
	background: #ccc;
}

#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: #fff;
	border-radius: var(--main-border-radius);
	padding: var(--main-spacing);
	text-align: center;
}

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

footer .column a:hover {
	background: #ccc;
}

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 */
}

/* TCG adjustments */

#trades input {
	width: 100%;
}

.dimmedCard{
	opacity:0.5;
	filter:alpha(opacity=30);
}

/* Hides the sidebar toggle for desktop browsers */

label.sidebarToggle,
input.sidebarToggle {
	display: none;
	visibility: hidden;
}


/* Mobile adjustments */

@media only screen and (max-width: 768px) {
	input:not([type=checkbox]):not([type=radio]) {
		width: 70%;
	}
	header {
		background-size: cover;
	}
	#container {
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		grid-template-columns: 100%;
		grid-template-areas: 
			"topbar" 
			"header" 
			"content" 
			"footer";
	}
	#topbar #social {
		margin-right: 50px;
	}
	footer .grid {
		grid-template-columns: 100%;
	}
	footer .wide {
		width: 100%;
	}
	#sidebar {
		display: contents;
	}

	/* Sidebar background and position */
	.slidebar {
		position: absolute;
		left: 0;
		top: -100%;
		width: 100%;
		background: #fff;
		padding: 50px var(--main-spacing) var(--main-spacing) var(--main-spacing);
		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);
	}

	/* Sidebar toggle */
	label.sidebarToggle:before {
		content: "\2261";
		font-size: 18pt;
		z-index: 2;
		position: relative;
		padding: var(--main-spacing);
	}
	label.sidebarToggle {
		display: block;
		visibility: inherit;
		cursor: pointer;
		grid-area: topbar;
		align-self: center;
		margin-left: auto;
	}
	/* Slide in the sidebar when the toggle is clicked */
	input.sidebarToggle:checked~.slidebar {
		top: 0;
	}
	/* Change toggle icon when the sidebar is visible */
	input.sidebarToggle:checked~label:before {
		content: "\039E";
	}
}