/*
	Basics
*/

html {
	font-size: 2.5vw;
	font-size-adjust: 1em;
}

:root {
	--border-margin: .5em;
}

.comicsans,
body,
article table, label,
body > header,
article header,
hgroup h1 {
	font-family: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif;
}

@font-face {
	font-family: "Determination";
	src: url('../_fonts/DTM-Mono.otf');
}

.determination, body > header + nav {
	font-family: "Determination", monospace;
}

@font-face {
	font-family: "Love Life";
	src: url('../_fonts/LoveLife-VGKqe.ttf');
}

.lovelife, body > header h1 {
	font-family: "Love Life";
}

.lucida,
body > footer,
hgroup {
	font-family: "Lucida", monospace;
}

.ariel,
input,
body > nav {
	font-family: "Ariel", sans-serif;
	src: url('../_fonts/ARIAL.tff');
}

body > * {
	margin-left: var(--border-margin);
	margin-right: var(--border-margin);
}

/*
	Font Stuff
*/

sub, sup {font-size: .75em;}

footer, aside, article header {font-size: 0.7rem;}

header h1 {font-size: 6vw; line-height: 6vw;}

article, article code {font-size: 0.95rem;}

label, input[type=text], input[type=checkbox],
hgroup, article > header {font-size: 1rem;}

nav {font-size: 2.7vw;}
.tags {font-size: 2.5vw;}

body, code, hgroup h1 {font-size: 1.25rem;}

/*header h1 {font-size: 1.75rem;}*/

body > header img,
body > footer img {height: 2rem;}

body > header a:has(img),
body > footer a:has(img) {
  display: inline-block;
  height: 100%;
  bottom: 0%;
  padding: 0px;
  margin: 0px;
}

body > header a > img,
body > footer a > img {
  display: inline-block;
  vertical-align: middle;
  height: 2rem;
}

/*
	DO NOT SELECT
*/

body > header, nav, summary, label {user-select: none !important;}


/*
	Header, Footer, Main, Nav
*/

body > header,
body > footer,
main {
	display: block;
	padding: 1vw;
	border-style: solid;
	border-width: var(--border-margin);
}

body > header {
	border-radius: 1em;
	text-transform: uppercase;
	
	border-bottom-right-radius: 5em;
	border-top-left-radius: 5em;
	padding-left: 3em;
	padding-right: 3em;
	
}

body > header > h1 {
	border-style: none;
	margin: 1vw;
}

body > header > *,
body > footer > * {
	display: inline-block;
	vertical-align: middle;
}

body > header,
body > footer,
nav,
main > section > h1,
main > section > h2,
main > section > h3 {text-align: center;}

article > header > h3 {text-align: left;}

body > header, nav {margin-bottom: var(--border-margin);}
body > footer {margin-top: var(--border-margin);}

nav {
	border-style: hidden !important;
}

nav.tags {
	position: sticky;
	position: webkit-sticky;
	top: 0;
	padding: .25em;
}

nav a, footer a {
	display: inline-flex;
	max-width: 50%;
	text-decoration-style: solid;
	text-decoration-thickness: .1em;
	padding: .25em;
	margin: .5em;
	margin-top: 0;
	box-shadow: 0em .25em .25em var(--black_dark);
}

nav > a:hover {text-transform: uppercase;}

nav.mininav a:hover {text-transform: none !important;}
nav.mininav {
	font-size: .6em;
	text-align: justify;
}



main > section,
nav, nav > a {
	border-width: var(--border-margin);
}

/*
	Article (aka blog posts)
*/

main > article,
main > section {
	border-width: var(--border-margin);
	border-style: hidden;
}

main > article:NOT(:last-child),
main > section:NOT(:last-child) {
	margin-bottom: 1em;
}

article:has(footer),
main > section:has(footer),
article:has(p:last-child) {
	padding-bottom: var(--border-margin);
}

article:Not(:has(header)),
main > section:Not(:has(header)) {
	padding-top: var(--border-margin);
}

article header,
main > section header,
main > header {
	text-align: right;
	padding: var(--border-margin);
	padding-right: 1em;
	line-height: 150%;

	border-style: hidden;
}

article header h1,
main > section h1,
main > header h1 {
	text-align: center;
}

article section,
main section,
main p {
	margin-top: var(--border-margin);
	padding: .5em;
	padding-top: var(--border-margin);
}

main ul, main ol {
  margin-left: 1em;
}

p ul, p ol {
	display: span;
}

article > section > header {
	border-radius: 0px;
	border-top-right-radius: 1em;
	border-bottom-right-radius: 1em;
	margin-bottom: 1em;
}

article > header,
main > section header,
main > header {
	margin-bottom: .75em;
	padding-bottom: var(--border-margin);
	border-radius: 0px;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-bottom-style: solid;
	border-bottom-width: .5em;
}

blockquote, aside, section .disclaimer, .disclaimer {
	margin: 1.5em;
	padding: 1em;
	border-radius: 1em;
	border-bottom-style: solid;
	border-bottom-width: .25em;
}

aside {
	border-bottom-right-radius: 5em;
	border-top-left-radius: 5em;
	padding-left: 3em;
	padding-right: 3em;
}

article header h1,
article header p,
article header img,
main > section header h1,
main > section header p,
main > section header img {
	text-decoration-thickness: 10%;
	margin: var(--border-margin);
}

main > img,
article > img,
article section > img {
	width: 100%;
	text-align: center;
}

img.halfsize {
	width: 30%;
	text-align: center;
	padding: 0px;
	margin: 0px;
	padding-left: 0.25em;
	padding-right: 0.25em;
}


article header img,
main > section header img {
	width: 4em;
	border-radius: 10%;
	aspect-ratio: 1 / 1;
	border-style: double;
	border-width: .35em;
}

header address,
header time {
	display: inline;
}

article hgroup, main > section hgroup {
	margin-top: 0em;
	margin-bottom: 1em;
	
	padding-left: 1em;
	padding-right: 1em;
	padding-top: .5em;
	padding-bottom: .5em;

	border-radius: 1em;
	border-style: hidden;
}

article header p, article header img,
article hgroup img, article hgroup h1,
main > section header p,
main > section header img,
main > section hgroup img,
main > section hgroup h1 {
	display: inline-block;
	vertical-align: middle;
}

article hgroup img,
main > section hgroup img {
	width: 2em;
	border-radius: 25%;
	border-style: solid;
	border-width: .25em;
}

article .ask + .answer img, 
article .ask + hgroup img,
main > section .ask + .answer img, 
main > section .ask + hgroup img {
	border-radius: 50%;
}

article .ask p,
main > section .ask p {
	margin: 0px;
	margin-left: 0px;
	margin-bottom: 1em;
	padding: 0px;
}

article .ask .tumblr,
article .ask + .answer .tumblr,
main > section .ask .tumblr,
main > section .ask + .answer .tumblr {
	font-weight: bolder;
	/*font-style: oblique;*/
}

article footer,
main > section footer {
	margin-left: .25em;
	margin-right: .25em;
	padding: 0.5rem;

	border-style: hidden;
}






/*
	Content Parts
*/

article table,
article tr,
article td {
	border-width: .3em;
	vertical-align: top;
}

article table {
	border-style: solid;
	padding: .5em;
}

article table ul {
	padding: 0px;
	margin: 0px;
	padding-left: 1em;
}

article tr td {
	padding-top: .5em;
	padding-bottom: .5em;
}

article td:not(:first-child) {
	padding-left: .5em;
	text-align: left;
}

article td:first-child {
	padding-right: .5em;
	text-align: right;
	font-weight: bold;
}

article table p:first-child {
	padding-top: 0px;
	margin-top: 0px;
}

article table p:last-child {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

article > details {margin: 1em;}

article > details summary {
	color: var(--accent1);
	background-color: var(--main_dark);
	box-shadow: 0em .25em .75em var(--main_dark);
	border-radius: .25em;
	margin: .25em;
	cursor: pointer;
	text-align: center;
}

article > details summary:hover {
	color: var(--main_dark);
	background-color: var(--accent1);
}

details summary h1 {
	padding: 1em;
	margin: 1em;
	text-align: right;
	display: inline;
}



/*
	Classes
*/

ul li:not(:last-child), ol li:not(:last-child), p li:not(:last-child) {
	padding-bottom: 1em;
}

.tags ul {
	list-style-type: none;
	padding-left: 1em;
}

.tags li {display: inline-block;}
.tags ul li:before {content: "#";}