/********************************/
/*********GENERAL*RULES**********/
/********************************/

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	color: #EEE;
	font-family: "VT323", monospace;
	background-color: #333;
}

h1 {
	text-align: center;
	font-size: 32pt;
	margin: 24px;
}

h2, h3 {
	text-align: center;
}

img {
	max-width: 90%;
}

a:link, a:visited, a:hover, a:active {
	color: #EEE;
	text-decoration-color: #EEE;
}


/********************************/
/*********MAIN*MENU*RULES********/
/********************************/

#mainmenu {
	width: 64pt;
	height: 100%;
	background-color: #111;
	position: fixed;
	top: 0;
	left: 0;
}

#mainmenu > a {
	font-size: 14pt;
	font-weight: 100;
	color: #eee;
	display: inline-block;
	text-decoration: none;
}

#mainmenu > a:link, #mainmenu > a:hover {
	color: #eee;
}

#mainmenu > a > img {
	width: 40pt;
	border-radius: 24pt;
	margin: 16pt 12pt;
}

#mainmenu > a > svg {
	color:#eee;
	fill: #eee;
	margin: 0 16pt;
	width: 32pt;
	height: 32pt;
	transition: 300ms ease-in-out;
}

#mainmenu > a > p {
	color: #eee;
	text-decoration: none;
	text-decoration-color: #eee;
	text-align: center;
	margin-top: 0;
	margin-bottom: 16pt;
	transition: 300ms ease-in-out;
}

#mainmenu > a.pitchstone:hover > p, #mainmenu > a.pitchstone:hover > svg {
	color: #C8F;
	fill: #C8F;
	transition: 300ms ease-in-out;
}

#mainmenu > a.articles:hover > p, #mainmenu > a.articles:hover > svg {
	color: #8CF;
	fill: #8CF;
	transition: 300ms ease-in-out;
}

#mainmenu > a.artpage:hover > p, #mainmenu > a.artpage:hover > svg {
	color: #F8C;
	fill: #F8C;
	transition: 300ms ease-in-out;
}


/********************************/
/**********FOOTER*RULES**********/
/********************************/

#footer {
	height: 64pt;
	background-color: #333;
	position: fixed;
	bottom: 0;
	left: 64pt;
	right: 0;
}

#footer > .central {
	display: inline-block;
	margin: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

#footer > .central > a {
	display: inline-block;
	margin: 8px;
	text-decoration: none;
}

#footer > .central > a > svg {
	position:relative;
	left:50%;
	transform: translateX(-50%);
	width: 32pt;
	height: 32pt;
}

#footer > .central > a > svg > path:first-child {
	fill: #EEE;
	transition: 300ms ease-in-out;
}


#footer > .central > a > svg > path:nth-child(2) {
	fill: #777;
	transition: 300ms ease-in-out;
}

#footer > .central > a > p {
	font-size: 14pt;
	font-weight: 100;
	color: #EEE;
	text-decoration-color: #EEE;
	text-align: center;
	margin: auto;
	transition: 300ms ease-in-out;
}

#footer > .central > a:link, #footer > .central > a:visited, #footer > .central > a:hover, #footer > .central > a:active {
	color: #333;
	text-decoration-color: #333;
}

#footer > .central > a.youtube:hover > p, #footer > .central > a.youtube:hover > svg > path {
	color: #FF6B6B;
	fill: #FF6B6B;
	transition: 300ms ease-in-out;
}

#footer > .central > a.codeberg:hover > p {
	color: #4793CC;
	fill: #4793CC;
	transition: 300ms ease-in-out;
}

#footer > .central > a.codeberg:hover > svg > path:first-child {
	color: #4793CC;
	fill: #4793CC;
	transition: 300ms ease-in-out;
}

#footer > .central > a.codeberg:hover > svg > path:nth-child(2) {
	color: #244A66;
	fill: #244A66;
	transition: 300ms ease-in-out;
}

#footer > .central > a.discord:hover > p, #footer > .central > a.discord:hover > svg > path {
	color: #8699DF;
	fill: #8699DF;
	transition: 300ms ease-in-out;
}

#footer > .central > a.bluesky:hover > p, #footer > .central > a.bluesky:hover > svg > path {
	color: #1185FE;
	fill: #1185FE;
	transition: 300ms ease-in-out;
}

#footer > .central > a.twitch:hover > p, #footer > .central > a.twitch:hover > svg > path {
	color: #A693CC;
	fill: #A693CC;
	transition: 300ms ease-in-out;
}

/********************************/
/*********CONTENT*RULES**********/
/********************************/

#content {
	position: absolute;
	left: 64pt;
	min-height: calc(100% - 64pt);
	width: calc(100% - 64pt);
	padding-bottom: 64pt;
	background-color: #333;
}

#content > * {
	margin: 8px;
}

#content p, #content a, #content table, #content ul, #content li {
	font-size: 20px;
}

#content table {
	margin:auto;
	border-collapse: collapse;
	border-style: double;
	border-width: 4pt;
}

#content table th, #content table td {
	border: 2px solid #EEE;
	border-spacing: 0;
	padding: 8px;
	text-align: center;
}

a.article {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
  	text-align: center;
	width: 200pt;
	border-radius: 16pt;
	height: 120pt;
	text-decoration: none;
	vertical-align: top;
}

.article.math {
	border-style: double;
	border-width: 4pt;
	background-color: rgb(0, 128, 255);
}

.article.color {
	border-style: double;
	border-width: 4pt;
	background-color: rgb(80, 30, 150);
}


.article.vulkan {
	border-width: 4pt;
	background-color: rgb(160, 30, 34);
}

a.article > p.article {
	font-size: 28px;
	white-space: normal;
	width: calc(100% - 16pt);
	margin: 8pt 8pt 8px 8pt;
	text-decoration: none;
}

a.article > p.date {
	margin: 8pt;
	text-decoration: none;
	text-align: center;
}

.art {
	display: inline-block;
}

.art > a > img {
	max-height: 360px;
	border-radius: 16pt;
	display: block;
	position: relative;
	margin: auto;
}

.art > p {
	font-size: 20px;
	font-weight: 100;
	color: #EEE;
	text-decoration-color: #EEE;
	text-align: center;
	margin: 0;
}

.art > p > a:link, .art > p > a:visited, .art > p > a:hover,.art > p > a:active {
	color: #EEE;
	text-decoration-color: #EEE;
}

#content svg.math {
	display:block;
	margin: 8px auto 8px auto;
	max-width: 90%;
}

#content img.math {
	display:block;
	margin: 8px auto 8px auto;
	max-width: 90%;
}

/********************************/
/********PORTRAIT*RULES**********/
/********************************/

@media (max-width: 500pt) {
	
	#footer {
		height: 44pt;
	}
	.contacts {
		display: none; /* hide child element when parent is less than 200pt */
	}
}

@media screen and (orientation: portrait) {
	#mainmenu {
		height: 48pt;
		width: 100%;
	}
	#mainmenu > a {
		display: inline-block;
		margin-bottom: 4pt;
		vertical-align: middle;
	}
	#mainmenu > a > img {
		margin: 4pt 8pt;
	}
	#mainmenu > a > svg {
		margin-top: 0pt;
		margin-bottom: 0;
	}
	#mainmenu > a > p {
		margin-top: 0pt;
		margin-bottom: 0pt;
	}
	#content {
		left: 0;
		top: 48pt;
		min-height: calc(100% - 92pt);
		width: 100%;
	}
	#footer {
		left: 0;
		height: 44pt;
	}
}