@font-face {
  font-family: "Myriad";
  src: url("/fonts/Myriad.ttf") format("truetype");
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.7em; }

:root {
    color-scheme: dark;
}

body {
    margin: 0;
	background: url("/images/background_blur.jpg");
	background-position: center top;
	background-size: 100vw auto;
	background-repeat: repeat-y;
}

body, pre {
	font-family: Myriad, Sans-Serif;
	color: white;
}

main {
	background-color: black;
	padding: 26px;
	margin: 0 auto;
	box-shadow: 0px 0px 40px 14px #595959;
}

section {
	margin-bottom: 24px;
}

img {
	max-width: 80vw;
}

#title, #nav, #copyright {
	text-align: center;
}

#title {
	margin-bottom: 60px;
}

#title h1 {
    font-size: 2.5em;
	color: white !important;
}

#title h1, #title img {
	display: inline-block;
	vertical-align: middle;
}

#title img {
	height: 8.5em;
	/*margin-bottom: 16px;*/
}

#nav {
	text-align: left;
	background-color: #d52027;
}

#copyright {
	margin-top: 60px;
    margin-bottom: 4px;
}

#links {
	margin-top: 32px;
	margin-bottom: 32px;
}

#countdown {
  background-color: #3d8233;
  text-align: center;
  margin-bottom: 13px;
  padding: 6px 0;
  font-weight: 400;
}

.box {
	padding: 12px 25px;
	margin: 0 auto;
	margin-bottom: 20px;
	border-radius: 12px;
	background-color: #000000e3;
	box-shadow: 0px 0px 8px 4px #fff;
}

.comment {
	padding: 8px;
	margin-bottom: 10px;
}

.comment p {
	margin-top: 3px;
	margin-bottom: 3px;
}

.comment pre {
    word-break: break-word;
    white-space: pre-wrap;
}

.article, .comment, .gallery-thumb {
	background-color: #f9f9f94f;
	border: 1px solid white;
}

.article {
	width: auto;
	padding: 12px;
	margin: 5px;
	margin-bottom: 25px;
}

.article:hover {
	background-color: #33333385;
}

.article h2 {
	margin-top: 6px;
	margin-bottom: 4px;
}

.articleDate {
	font-size: 16px;
	margin-top: 12px;
	margin-bottom: 2px;
}

.article-link, .navlink, .inline-button {
	color: white !important;
	text-decoration: none !important;
}

.inline-button {
	background-color: #666;
}

.navlink:hover, .inline-button:hover {
	background-color: black;
}

.navlink {
	display: inline-block;
    padding: 8px 16px;
}

.current {
	background-color: #4c504a;	
}

.social-link {
	display: inline-block;
	margin-right: 28px;
}

.social-link img {
	width: 2.7em;
}

.clearfix {
    margin-bottom: 10px;
}

.clearfix::after { 
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

.dl-link {
	display: inline-block;
	padding: 3px 20px;
	margin-top: 4px;
}

.inline-button {
    display: inline-block;
    padding: 3px 20px;
    margin-right: 4px;
    margin-bottom: 4px;
}

.gallery-thumb {
    width: 80px;
    margin-right: 4px;
    margin-bottom: 4px;
}

@media screen and (max-width: 1100px) {
	main {
	    max-width: 95vw;
		background-color: #000000b5; 
	}
}

@media screen and (min-width: 1100px) {
	main {
		max-width: 70vw;
	}
}

@media screen and (min-width: 2000px) {
	main {
	    max-width: 1350px;
	}
}