/* BASIC STYLING */
html {
	height: 100%;
	scroll-behavior: smooth;
	overflow-y: scroll;
}

body {
	font-family: sans-serif;
	background: #181818;
	color: #fff;
	height: 100%;
}

a {
	color: rgb(255, 72, 72);
	text-decoration: none;
}

a:hover {
	color: rgb(255, 122, 122);
	text-decoration: underline;
}

a:active {
	text-decoration: underline;
}

ul, ol {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

h1 {
	vertical-align: middle;
}
/*  */



/* GRID */
.grid {
    display: grid; 
    grid-template-areas: 
        "Sidebar Header Gutter"
        "Sidebar Main Gutter";
    grid-template-columns: minmax(200px, 2fr) minmax(500px, 5fr) minmax(200px, 2fr); 
    grid-template-rows: auto; 

    gap: 1em 1em; 
    min-height: 0;
}
/*  */



/* NAVIGATION */
.sidebar { 
	grid-area: Sidebar; 

    text-align: center;
	color: white;
	padding: 1rem;

    background-color: #101010;
    border-radius: 20px;
}

.nav .nav__title {
	margin-bottom: .75rem;
}

.nav .nav__title > a {
	color: white;
}

.nav .nav__title {
	margin-top: .75rem;
}

.nav .nav__list {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.nav .nav__item {
	list-style-type: none;
	text-decoration: none;
	text-align: left;
	color: white;
	margin-left: 0;
	padding-left: 0;
	display: inline-block;
}

.header__nav-toggle, #nav-toggle {
	display: none;
}

.nav .taxonomy-list__card {
	margin-top: 1em;
	margin-bottom: 1em;
}

.nav .taxonomy-list__card .card__content {
	line-height: 1.5;
}

.tags, .categories, .tags > *, .categories > * {
    color: gray;
	display: inline;
}
/*  */



/* HEADER */
.header { 
	grid-area: Header; 
    
    text-align: center;
	padding-bottom: 1.5rem;

    background-color: #101010;
    border-radius: 20px;
}

.header .header__title > * {
	padding-bottom: 0;
	margin-bottom: 0;
	display: inline-block;
}

.header .qr-image {
	margin: 1.5rem;
	padding: 0;
	border: 3px solid rgb(255, 72, 72);
	border-radius: 10px;
	vertical-align: middle;
}

.header .card {
	margin: 0em 2.5em 0.5em 2.5em;
}
/*  */



/* MAIN CONTENT*/
.main { 
    grid-area: Main; 
    display: grid;
    gap: 15px;
    grid-template-columns: minmax(300px, 3fr) minmax(100px, 1fr);

    scrollbar-width: none;

    max-height: 85vh;
    min-height: 0;    
    min-width: 0;    
	
    text-align: left;
    text-wrap: wrap;
	margin: 0 auto;
	max-width: 1600px;
}

.main div .card {
	margin: 0.5em 1em;
}

.main p, .main h1, .main h2, .main h3 {
    grid-column: 1 / span 1;
    max-width: 1000px;
	line-height: 32px;
	font-size: 20px;
	margin-left: 20px;
}
/*  */



/* FOOTER */
.footer {
    text-align: center;
	clear: both;
}

.footer .footer__copyright {
	margin-bottom: .5rem;
}
/*  */

@media only screen and (max-width: 1375px) {
	html {
		scrollbar-width: none;
	}

	.grid {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		overflow-x: wrap;
	}
	.sidenote {
		grid-column: 1 / span 1 !important;
		max-width: 100vw;
	}

	.main {
		display: block;
		max-width: 95vw;
		margin-left: 0;
		padding-left: 0;
		scrollbar-width: none;
	}
}

@media only screen and (max-width: 1800px) {
    .sidebar {
        display: none;
    }

	.header__nav-toggle {
		display: inline;
		cursor: pointer;
		float: left;
		font-size: 2rem;
		margin-left: 1rem;
		vertical-align: middle;
	}

	.grid {
		grid-template-areas: 
			"Header" 
			"Sidebar" 
			"Main";
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	#nav-toggle:checked + .sidebar {
		display: block;
	}
}

@media only screen and (min-width: 1800px) {
	.header {
		margin: 0 auto;
		min-width: 55vw;
		max-width: 1000px;	
		
		align-self: start;
		position: sticky;
		top: 0;
	}
	
	.main {
		position: sticky;
		overflow-y: auto;
	}

	.sidebar {
		align-self: start;
		position: sticky;
		top: 0;
		overflow-y: auto;
	}
}