* {
	padding:0;
	margin:0;
	text-decoration:none;
	box-sizing:border-box;
	font-weight:300;
}
:root {
	--primary:black;
	--secondary:#0f0f43;
	--tertiary:paleturquoise;
	--quaternary:#f7233d;
	--quinary:oldlace;
	--senary:mediumslateblue;
	--septenary:mediumseagreen;
	/*scrollbar-color: var(--secondary) var(--primary);
	scrollbar-width:auto;*/
	scrollbar-width:none;

}
/*fonts*/
/*Greycliff*/
@font-face {
	font-family:Greycliff;
	src:url(fonts/Greycliff/greycliff-cf-demi-bold-webfont.woff2);
	font-weight:500;
	font-style:normal;
}
@font-face {
	font-family:Greycliff;
	src:url(fonts/Greycliff/greycliff-cf-bold-webfont.woff2);
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family:Greycliff;
	src:url(fonts/Greycliff/greycliff-cf-extra-bold-webfont.woff2);
	font-weight:900;
	font-style:normal;
}
/*Gantari*/
@font-face {
	font-family:Gantari;
	src:url(fonts/Gantari/otf/Gantari-Light.otf);
	font-weight:300;
	font-style:normal;
}

@font-face {
	font-family:Gantari;
	src:url(fonts/Gantari/otf/Gantari-Regular.otf);
	font-weight:400;
	font-style:normal;
}
@font-face {
	font-family:Gantari;
	src:url(fonts/Gantari/otf/Gantari-Medium.otf);
	font-weight:500;
	font-style:normal;
}
@font-face {
	font-family:Gantari;
	src:url(fonts/Gantari/otf/Gantari-Bold.otf);
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family:Gantari;
	src:url(fonts/Gantari/otf/Gantari-Black.otf);
	font-weight:900;
	font-style:normal;
}
body {
	background:linear-gradient(180deg, var(--primary) 20%,var(--secondary)) fixed;
	font-family:Greycliff, URW Gothic, Century Gothic, Cantarell, Noto Sans, Candara, Calibri, Inconsolata, sans-serif;
	margin-top:7em;
}
/*scrollbar*/
body::-webkit-scrollbar {
	display:none;
}
/*body::-webkit-scrollbar {
	width:0.5rem;
}
body::-webkit-scrollbar-track {
	background:var(--primary);
}
body::-webkit-scrollbar-thumb {
	background:var(--secondary);
}*/
/*selection*/
::selection {
	background:var(--quaternary);
	color:var(--primary);
}
::-moz-selection {
	background:var(--quaternary);
	color:var(--primary);
}
/*headers*/
h1 {
	color:var(--quinary);
}
h2 {
	color:var(--quaternary);
	font-size:20px;
	text-transform:uppercase;
	font-weight:500;
}
h3 {
	color:var(--quinary);
}
h4 {
	font-size:15px;
	color:var(--quinary);
	text-align:center;
}
h5 {
	color:var(--tertiary);
	font-size:18px;
}
hr {
	margin-top:1.5em;
	margin-bottom:1.5em;
	border: 1px solid var(--quaternary);
}
dfn {
	font-style:normal;	
	text-decoration:underline dotted var(--septenary);
	color:var(--septenary);
}
ul {
	color:var(--quinary);
}
ol {
	color:var(--quinary);
}
ol h5 {
	color:var(--quinary);
}
p {
	color:var(--quinary);
	font-weight:300;
}
.ftext {
	color:var(--quinary);
	font-weight:300;
	font-size:19px;
}
a {
	color:var(--tertiary);
}
a.page_anchor {
	display:block;
	position:relative;
	top: -7em;
	visibility:hidden;
}
a:hover {
	color:var(--senary);
}
.artimg{
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:75%;
	border-radius:10%;
}
.title {
	text-align:left;
	margin-right:1em;
}
/*header*/
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	max-width:960px;
	z-index:10;
	text-align:center;
	margin:auto;
	padding:2em;
	background:var(--primary);
	display:flex;
	align-items:center;
}
header h1 a {
	color:var(--quaternary);
	text-align:left;
	font-weight:400;
}
header h1 a:hover {
	color:var(--quaternary);
}
	
/*nav*/
nav {
	position:absolute;
	top:100%;
	text-align:center;
	left:0;
	background:var(--primary);
	width:100%;
	transform:scale(1,0);
	transform-origin:top;
	transition:transform 400ms ease-in-out;
}
nav ul {
	list-style:none;
}
nav li {
	padding:1.5em 1em;
	font-size:20px;
}
nav a {
	color:var(--tertiary);
	text-transform:uppercase;
	opacity:0;
	transition: opacity 150ms ease-in-out;
}
nav a:hover {
	color:var(--tertiary);
}
.nav-toggle {
	display:none;
}
.nav-toggle:checked ~ nav {
	transform:scale(1,1);
}
.nav-toggle:checked ~ nav a {
	opacity:1;
	transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle-label {
	position:absolute;
	top:0;
	right:0;
	margin-right:1em;
	height:100%;
	display:flex;
	align-items:center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
	display:block;
	background:var(--quinary);
	height:3px;
	width:2em;
	border-radius:2px;
	position:relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
	content:'';
	position:absolute;
}
.nav-toggle-label span::before {
	bottom:10px;
}
.nav-toggle-label span::after {
	top:10px;
}
nav li:hover{
	background:var(--secondary);
	transition:0.4s;
}
nav li:active{
	background:var(--secondary);
}
nav li:focus{
	background:var(--secondary);
}
/*main*/
main {
	width:100%;
	max-width:960px;
	margin:auto;
	padding:1.5em;
	line-height:1.5;
}
main li {
	margin-left:3em;
	padding-top:0.5em;
	padding-bottom:0.5em;
}
main li p {
	padding-top:0.5em;
	padding-top:0.5em;
}
main ul ul li {
	margin-left:6em;
	padding-top:1em;
	padding-bottom:1em;
}
main ul ul li p {
	padding-top:1em;
	padding-top:1em;
}
/*intro*/
.introimg {
	display:block;
	margin:auto;
	margin-bottom:2em;
	max-width:100%;
	border:4px solid transparent;
	border-radius:10%;
	}
.imgleft{
	display:block;
	margin:auto;
	padding-bottom:2em;
	max-height:300px;
	width:auto;
	border:4px solid transparent;
	border-radius:10px;
	}
/*menu*/
.menu {
	display:grid;
	gap:5em;
	grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
	color:var(--quinary);
}
.menu h2 {
	margin-bottom:10px;
}
.menu li {
	padding:0;
}
.bicolumn {
	display:grid;
	gap:5em;
	grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
	color:var(--quinary);
}
.bicolumn h2 {
	text-align:center;
}
/*article*/
article {
	text-align:justify;
}
article h1, article h3 {
	text-align:center;
}
article ul li h3 {
	text-align:left;
}
article p {
	color:var(--quinary);
}
/*blog*/
.blog ul li {
	padding:0;
	margin:0;
	margin-left:3em;
}
.blog ul li p {
	padding:0;
	margin:0;
}
.leftart {
	display:block;
	width:300px;
	height:auto;
	margin:auto;
	margin-bottom:1em;
}
/*.artimggrid {
	display:grid;
	gap:1rem;
	grid-template-columns:200px 1fr;
	margin:1em 3em;
}*/
/*image grid*/
.albumgrid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) ;
	text-align:left;
}
.gridsquare {
	display:grid;
	justify-items:center;
	align-items:center;
}
.gridsquare img {
	width:180px;
	height:auto;
	padding:10px;
}
.gridsquare p {
	display:grid;
	position:absolute;
	color:transparent;
	max-width:130px;
}
.gridsquare a {
	display:grid;
	position:absolute;
	color:transparent;
	max-width:130px;
}
.gridsquare:hover img {
	opacity:0.25;
}
.gridsquare:hover p {
	color:var(--quinary);
}
.gridsquare:hover a {
	color:var(--quinary);
}
.gridsquare:active img {
	opacity:0.25;
}
.gridsquare:active p {
	color:var(--quinary);
}
.gridsquare:active a {
	color:var(--quinary);
}
/*donate*/
.doncon {
	display:grid;
	justify-items:center;
	grid-template-columns:repeat(auto-fit, minmax(275px, 1fr)) ;
}
.don {
	display:grid;
	justify-items:center;
	height:400px;
	width:275px;
}
.don img {
	width:275px;
	height:auto;
	justify-items:center;
}
.don p {
	word-break:break-all;
}
/*checkbox*/
.check {
	display:flex;
	align-items:center;
}
input {
	margin:0 10px;
	accent-color:var(--secondary);
}
/*footer*/
main footer {
	text-align:center;
	border: 2px solid var(--quaternary);
	border-radius:20px;
	max-width:960px;
	margin:auto;
	text-transform:uppercase;
	padding:1em;
	background:#00000055;
	margin-bottom:25px;
	color:var(--quinary);
}
main footer:hover {
	transition:.4s;
	background:var(--primary);
}
main footer:hover h5 {
	transition:.4s;
	color:var(--quinary);
}
main footer:active {
	background:var(--primary);
}
main footer:active h5 {
	color:var(--quinary);
}
/*codeblock*/
.codeblock {
	background:black;
	color:white;
	font-family:monospace;
	border:1px solid green;
	border-radius:8px;
	text-align:left;
	padding:5px;
	margin:10px;
}
.codeblock::selection {
	background:white;
	color:black;
}
.codeblock::-moz-selection {
	background:white;
	color:black;
}
.codetext {
	font-family:monospace;
}
.codetext::selection {
	color:black;
}
.codetext::-moz-selection {
	color:black;
}
/*desktop*/

@media screen and (min-width:800px) {
	.nav-toggle-label {
		display:none;
	}
	body {
		margin-top:5em;
	}
	main {
		padding:2em 3em;
	}
	article {
		text-align:justify;
	}
	header {
		display:grid;
		grid-template-columns: 1fr auto minxmax(600px, 4fr) 1fr;
		padding:0 0 0 2em;
	}
	header h1 {
		grid-column:1 / span 1;
	}
	nav {
		all:unset;
		grid-column:3 / span 1;
		display:flex;
		justify-content:flex-end;
		align-items:center;
		float:right;
	}
	nav li {
		padding:1.5em 1em;
		font-size:20px;
		border-bottom:5px solid var(--primary);
	}
	nav li:hover{
		background:var(--secondary);
		border-bottom:5px solid var(--quaternary);
		color:var(--quinary);
	}
	nav ul {
		display:flex;
		justify-content:flex-end;
	}
	nav a {
		opacity:1;
	}
	.imgleft {
		all:unset;
		float:left;
		margin-right:2em;
		border:4px solid transparent;
		border-radius:10px;
		max-height:300px;
		width:auto;
	}
	.leftart {
		float:left;
		max-width:200px;
		height:auto;
		margin-right:1em;
		margin-bottom:.5em;
	}
	.introimg{
		all:unset;
		float:left;
		margin-right:2em;
		border:4px solid transparent;
		border-radius:10px;
		max-height:300px;
		width:auto;
	}		
	.artimg{
		max-width:75%;
	}
	.title {
		margin-bottom:5px;
	}
}
/*tiny*/
@media screen and (max-width:300px) {
	body {
		margin:0;
		overflow-wrap:break-word;
		padding-top:150px;
	}
	main {
		margin-right:.5em;
		padding:0;
	}
	header {
		position:absolute;
	}
	h1 {
		font-size:24px;
	}
	img {
		max-width:200px;
	}
	.introimg {
		max-width:200px;
	}
	.imgleft {
		max-width:200px;
	}
	.leftart {
		display:block;
		width:180px;
		height:auto;
		margin:auto;
	}
}