/* feel */
@font-face {
	font-family: "Libre Baskerville";
	src: url("/fonts/LibreBaskerville-Regular.ttf") format("truetype");
	font-weight: 400;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("/fonts/LibreBaskerville-Bold.ttf") format("truetype");
	font-weight: 700;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("/fonts/LibreBaskerville-Italic.ttf") format("truetype");
	font-style: italic;
	font-weight: 400;
}

@font-face {
	font-family: "Noto Sans";
	src: url("/fonts/NotoSans-Regular.ttf") format("truetype");
	font-weight: 400;
}

@font-face {
	font-family: "Noto Sans";
	src: url("/fonts/NotoSans-Bold.ttf") format("truetype");
	font-weight: 700;
}

@font-face {
	font-family: "Noto Sans";
	src: url("/fonts/NotoSans-Italic.ttf") format("truetype");
	font-style: italic;
	font-weight: 400;
}

html {
	font-size: 16px;
	overflow-y: scroll;
}

body {
	font-family: Noto Sans, sans-serif;

	color: #121212;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Libre Baskerville, Georgia, Cambria, Times New Roman, Times, serif;
	cursor: default;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
	color: #222;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.75rem;
}

h3 {
	font-size: 1.5rem;
}

a{
	color: #0073C5;
	text-decoration: none
}

a:hover{
	color: #222; text-decoration: underline
}

a:visited{
	color: #4100C5;
}

nav ul{
	list-style-type: none;
	padding-left: 0
}


button, input, textarea, select{
	font-family: Noto Sans, sans-serif;
	font-size: inherit
}

button {
	border: none;

	border-radius: 0.125rem;

	padding: 0.5rem 1.25rem;

	cursor: pointer;

	user-select: none;
}

button:hover {

}

button:focus {
	outline: none;
}

button::-moz-focus-inner {
	border: none;
}


button.button {
	background-color: #eeeeee;
	background: -moz-linear-gradient(bottom, #e8e8e8, #f4f4f4);
	color: #222;

	border: none;
	border-bottom: #d4d4d4 0.125rem solid;
	box-shadow: #ddd 0 0.0625rem 0.0625rem;

	cursor: pointer;

	transition-property: border-bottom-color;

	transition:ease 0.1s;
}

button.button:hover {
	border-bottom-color: #999;
}

button.button:active {
	background-color: #e2e2e2;
	background: -moz-linear-gradient(top, #e8e8e8, #f4f4f4);
}

input, textarea {
	border: #ccc 0.0625rem solid;
	box-shadow: #eee 0.0625rem 0.0625rem 0 inset;
	background: #fcfcfc;
	padding: 0.5rem;
}

select {
	border: #ccc 0.0625rem solid;
	background: #fcfcfc;
	padding: 0.25rem;
}

input:focus, textarea:focus, select:focus{
	border-color:#777;
}

input[type=file] {
	padding: 0.25rem;
}


p {
	line-height: 1.5;

	margin: 1em 0;
}

img {
	max-width: 100%;
}

/* look */
/* these elements are only used without css, or for screen readers */
.structural{
	display: none
}

h1#logo {
	flex-shrink: 0;
	margin: 0 1rem 0 0;

	height: 3.5rem;
	min-width: 3.5rem; /* fix moving content while loading */
}

h1#logo a {
	text-decoration: none;
	display: flex; /* doesn't fit img without this */
}

h1#logo a:focus {
	outline: 0.0625rem solid #323030;
}

h1#logo img {
	height: 3.5rem;
	min-width: 3.5rem; /* fix moving content while loading */
}

header {
	display: flex;
	justify-content: space-between;

	margin: 1rem auto;
	padding: 0 1rem;

	height: 3.5rem;
	max-width: 72rem;
}

nav, nav#main-menu ul {
	display: flex;
	margin: 0;
	align-items: center;
}

nav#main-menu ul {
	height: 2.5rem;
}

nav#main-menu li a {
	display: block;
	padding: 0 1rem;
	font-size: 1.25rem;
	line-height: 2.25rem;
}

nav#main-menu ul li {
	display: block;
}

nav#main-menu ul a {
	text-decoration: none;

	color: #222;

	border-bottom: transparent 0.25rem solid;

	transition: ease 0.2s;

	transition-property: border;
}

nav#main-menu ul a:hover, nav#main-menu ul a:focus {
	color: #111;

	border-bottom: rgba(0, 0, 0, 0.25) 0.25rem solid;

	outline: none;
}

nav#main-menu ul a:active {
	border-bottom-color: rgba(0, 0, 0, 0.7);
	transition: none;
}

body.theme-dark nav#main-menu ul a, body.theme-black nav#main-menu ul a {
	color: #fefefe;
}

body.theme-dark nav#main-menu ul a:hover, body.theme-black nav#main-menu ul a:hover {
	border-bottom-color: rgba(255, 255, 255, 0.35);
}

body.theme-dark nav#main-menu ul a:active, body.theme-black nav#main-menu ul a:active {
	border-bottom-color: rgba(255, 255, 255, 0.7);
}



div#location{
	background: #eeeeee;
	padding: 2rem 1rem;
	margin-bottom: 1rem;
}

div#location h2 {
	max-width: 72rem;
	margin: 0 auto;
}

div#main {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}

body.theme-light {
	background: #eeead4;
	color: #2c1733;
}

body.theme-dark {
	background: #252222;
	color: #fefefe;
}

body.theme-black {
	background: #000;
	color: #fefefe;
}

body.theme-white button.white, body.theme-light button.light, body.theme-dark button.dark, body.theme-black button.black,
body.font-sans button.sans, body.font-serif button.serif {
	border-bottom: 0.25rem solid #08f;

	overflow: visible !important;
	text-indent: 0 !important;
	width: auto !important;
}

div#themes button {
	width: 2.5rem;
	height: 2.5rem;
	/*color: transparent;*/

	text-indent: 10rem;
	overflow: hidden;
}

div#themes button.white {
	background: #ffffff;
	color: #232323;
}

div#themes button.light {
	background: #eeead4;
	color: #2c1733;
}

div#themes button.dark {
	background: #252222;
	color: #fefefe;
}

div#themes button.black {
	background: #000;
	color: #fefefe;
}

/* user nav */
a#user-button, a#submit-button{
	display: block;
	padding: 0 1rem;
	margin-bottom: 0.25rem;
	font-size: 1.25rem;
	line-height: 2.25rem;

	font-family: Noto Sans, sans-serif;
	color: #ccc;

	outline: none;
}

a#user-button:hover, a#submit-button:hover{
	color: #999;
	text-decoration: none;
}

a#user-button.active, a#submit-button.active{
	color:#111;
}

ul#user-menu, ul#submit-menu{
	width: 10rem;

	position:absolute;
	z-index: 1000;
	top: 3rem;

	margin-left: -3.5rem;
	margin-top: 0;

	list-style-type: none;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAANklEQVR42mL8//8/AzJQVlYGCTDevXsXLsaERQEIoOhkwqIAg8+ETQG6QkYlJSWsCpABQIABAKyYEHIujetDAAAAAElFTkSuQmCC') 8.5rem 0 no-repeat;
	padding-top: 5px; /* for little arrow */

	box-shadow: rgba(0, 0, 0, 0.7) 0px 0.125rem 0.125rem -0.125rem;

	opacity: 0;
	pointer-events: none;

	transition: ease 0.2s;

	transition-property: margin-top, opacity;
}

ul#submit-menu{
	margin-left: -7.5rem;
}

ul#user-menu.visible, ul#submit-menu.visible{
	pointer-events: auto;

	opacity: 1;
	margin-top: 0.75rem;
}

ul#user-menu a, ul#submit-menu a{
	display:block;
	padding: 0.5rem 0.75rem;
	color: #f8f8f8;

	background-color: #222;
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0.1) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 100%);
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0.1) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 100%);

	text-decoration: none;
}

ul#user-menu a:hover, ul#submit-menu a:hover{
	color:#222;
	background-color:#e8e8e8;
}


/* read */
body.font-serif div.content {
	font-family: Libre Baskerville, Georgia, Cambria, Times New Roman, Times, serif;
}

body.font-sans div.content {
	font-family: Noto Sans, sans-serif;
}


div.read {
	padding-bottom: 50vh;
}

div.read p {
	margin: 0;

	line-height: 1.75;

	text-align: justify;
}

div.read p + p {
	text-indent: 1.5em;
}

body.theme-dark p, body.theme-black p {
	line-height: 2;
}

div.read p.section {
	margin-top: 2em;
	text-indent: 0;
}

div.read div.content {
	max-width: 42rem;
	margin: 0 auto;

	/*font-family: Libre Baskerville, Georgia, Cambria, Times New Roman, Times, serif;*/
}



div#font {
	flex-shrink: 0;
}

div#font button {
	padding: 0 1rem;

	background: none;
	color: inherit;

	font-size: 1.75rem;
}

button.sans {
	font-family: Noto Sans, sans-serif;
}

button.serif {
	font-family: Libre Baskerville, Georgia, Cambria, Times New Roman, Times, serif;
}




div.controls {
	max-width: 42rem;

	margin: 0 auto;

	padding: 1rem;
}

div.controls {
	display: flex;
	justify-content: space-between;

	cursor: default;
}

div.controls button {
	height: 2.5rem;
	padding-bottom: 0.25rem;
	border-bottom: 0.25rem solid transparent; /* keep apparent paddings */

	vertical-align: middle; /* fixes different alignment on sans/serif buttons due to differing fonts */
}

/* image */
div.image {
	display: flex;
	flex-direction: column;

	margin-top: 2rem;
}

div.image div.title {
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 1.25rem;
}

div.image div.past a, div.image div.future a {
	opacity: 0.25;
}

div.image div.past a:hover, div.image div.future a:hover {
	opacity: 0.75;
}

div.image div.past a:focus, div.image div.future a:focus {
	opacity: 1;
	outline: none;
}

div.image div.past a:active, div.image div.future a:active {
	opacity: 1;
}

div.image div.past, div.image div.future {
	display: flex;
	flex-shrink: 0;
	min-width: 5.5rem
}

div.image div.past img, div.image div.future img {
	height: 1.75rem; /* don't fuck with content while loading */
	min-width: 1.75rem;
	padding: 0.5rem;
}

div.image h2 {
	margin: 0;
}

div.image div.content {
	align-self: center;
}

div.image canvas {
	max-width: 100%;
}

/* blog */
div.blog-post {
	max-width: 32rem;
}

div.blog-post div.date {
	font-size: 0.75rem;
	margin-top: -1rem;
	color: #555;
}

/* channel */
div.channel-list {
	display: flex;
	flex-wrap: wrap;
}

div.channel-image-preview {
	display: flex;

	width: 33%;

	margin-bottom: 1rem;
}

a.channel-image-link {
	display: flex;
	flex-shrink: 0;
}

div.channel-image-info {
	margin-left: 1rem;
}

div.channel-image-info a {
	display: block;
	margin-top: 1rem;
	font-size: 1.5rem;
}

@media screen and (max-width: 960px) {
	div.channel-image-preview {
		width: 50%;
	}
}

@media screen and (max-width: 690px) {
	div.channel-image-preview {
		width: 100%;
	}
}