:root {
	--color1:#150F0F; /*DARKEST*/
	--color2:#221918;
	--color3:#2C221F;
	--color4:#423229;
	--color5:#5C4532;
	--color6:#8D7357;
	--color7:#B58F71;
	--color8:#BCAA9B; /*the gray color*/
	--color9:#F5DEAD; /*tan*/
	--color10:#FFF49F; /*BRIGHTEST*/
	
	--windowCorner: 0.3rem;
	--borderSize: 2px;
}

@font-face {
	font-family: "PopMagic"; 
	src: url("fonts/GAU_pop_magic.TTF") format("truetype");
}

::selection {
	background-color: var(--color7);
	color: var(--color9);
}
html {
	background-position: 8px 8px;
}
html, body, .webgarden {
	margin: 0.5rem;
	
	background-image: url("img/checker-mid.png");
	background-color: var(--color4);
	
	font-family: Verdana, Arial, Helvetica, sans-serif; /*pulled straight from 2006 dA*/
	font-size: 16px;
	color: var(--color5);
	line-height: 1.5;
}
a {
	color: var(--color6);
	text-decoration-style: dashed;
	text-decoration-color: var(--color6);
}
a:hover {
	color: var(--color7);
}
blockquote {
	border-left: var(--borderSize) solid var(--color6);
	padding-left: 0.3rem;
	
	font-style: italic;
}
blockquote i {
	font-style: normal;
}
button, input[type=button], input[type=submit] {
	position: relative;
	padding: 0.3rem;
	height: 2rem;
	min-width: 2rem;
	
	font-family: inherit;
	font-size: inherit;
	text-align: center;
	color: var(--color9);
	
	background-color: var(--color7);
	
	border-radius: var(--windowCorner);
	border: 0;
	border-bottom: var(--borderSize) solid var(--color6);
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
	background-color: var(--color8);
	cursor: pointer;
}
a button {
	width: 100%;
}
button a:hover, a button:hover {
	color: var(--color10);
}
button:active, input[type=button]:active, input[type=submit]:active {
	margin-bottom: 0.1rem;
	top: 0.1rem;
	height: 1.9rem;
	background-color: var(--color6);
}
code {
	/*display: block;*/
}
div.flex>figure {
	margin: 0;
}
figure {
	background-color: var(--color7);
	border-radius: var(--windowCorner);
}
figure h1, figure h2, figure h3, figure h4, figure h5, figure h6 {
	border-radius: var(--windowCorner) var(--windowCorner) 0 0;
	margin-bottom: 0 !important;
}
figure h1+img, figure h1+a>img, figure h2+img, figure h2+a>img, figure>h3+img, figure h3+a>img, figure h4+img, figure h4+a>img, figure h5+img, figure h5+a>img, figure h6+img, figure h6+a>img {
	border-radius: 0;
}
figure img {
	width: 100%;
	border-radius: var(--windowCorner) var(--windowCorner) 0 0;
}
figure figcaption {
	margin-top: -0.2rem;
	padding: 0.2rem;
	background-color: var(--color8);
	border-radius: 0 0 var(--windowCorner) var(--windowCorner);
	text-align: center;
	font-style: italic;
	font-size: 0.8rem;
}
figure figcaption a {
	color: var(--color9);
}
figure figcaption a:hover {
	color: var(--color10);
}
footer {
	padding: 0.2rem 0;
	text-align: center;
	color: var(--color9);
	
	background-color: var(--color6);
	border-radius: 0 0 var(--windowCorner) var(--windowCorner);
}
footer p {
	margin: 0 !important;
}
footer a, footer a:hover {
	color: var(--color10);
	text-decoration-color: var(--color10);
}
h1 {
	font-weight: normal;
}
h4, h5, h6, .windowTitle h1, .windowTitle h2, .windowTitle h3 {
	letter-spacing: .1em;
}
h1, h2, h3, h4, h5, h6, p, blockquote {
	margin: 0.5rem 0;
}
h1, h2, h3, h4, h5, h6, .tag, code, pre {
	padding: 0.2rem;
	background-color: var(--color8);
	border-radius: var(--windowCorner);
}
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
	color: var(--color5);
}
h1>a:hover, h2>a:hover, h3>a:hover, h4>a:hover, h5>a:hover, h6>a:hover {
	color: var(--color6);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, blockquote:first-child {
	margin: 0 0 0.5rem;
}
header {
	height: 6.25rem;
	
	background-image: linear-gradient(180deg, rgba(214,194,163,1) 0%, rgba(245,222,173,1) 100%);
	
	border: var(--borderSize) solid var(--color3);
	border-radius: var(--windowCorner) var(--windowCorner) 0 0;
}
header>ul {
	list-style: none;
	padding-left: calc(50% - 6.5rem);
	margin: 0 !important;
	
	background-image: url("img/checker-trans3.png");
	background-size: 6.25rem;
	background-repeat: repeat;
	
	font-size: 2rem !important;
	line-height: initial !important;
	font-family: "PopMagic";
	color: var(--color5);
	
	text-shadow: var(--color7) calc(-2*var(--borderSize)) 0;
	
}
header>ul>li {
	margin-bottom: 0 !important;
}
header>ul>li+li {
	margin-top: -1.2rem !important;
	padding-left: 1.5rem;
}
header>ul>li+li+li {
	padding-left: 3rem;
}
header>ul>li:first-letter {
	font-size: 3rem;
}
header>img {
	pointer-events: none;
	position: relative;
	left: calc(50% - 7.5rem);
	bottom: 64px;
	
	object-fit: cover;
	object-position: 0 0;
	
	width: 60px;
	height: 70px;
	
	/* duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
	animation: bannerImg 1s steps(2) 0s infinite;
	
	filter: drop-shadow(calc(-2*var(--borderSize)) 0 0 var(--color7));
}
header+.pseudoNav {
	margin: calc(-1*var(--borderSize)) 0 0;
	padding: 0.4rem;
	background-color: var(--color5);
	border: var(--borderSize) solid var(--color3);
	border-top: none;
	border-radius: 0 !important;
	text-align: center;
}
header+.pseudoNav h4 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--color8);
	background-color: transparent;
}
header+.pseudoNav h4>a {
	color: inherit !important;
}
header+.pseudoNav+div {
	border: var(--borderSize) solid var(--color3);
	border-top: none;
	border-radius: 0 0 var(--windowCorner) var(--windowCorner);
}
hr {
	color: var(--color8);
	border-top: 1px solid var(--color8);
}
input[type=text], textarea {
	font-size: inherit;
	color: inherit;
	background-color: var(--color8);
	border-radius: var(--windowCorner);
	border: 0;
}
nav {
	margin: calc(-1*var(--borderSize)) 0 1rem;
	border-radius: 0 0 var(--windowCorner) var(--windowCorner) !important;
}
nav>ul {
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	border-radius: 0 0 var(--windowCorner) var(--windowCorner);
	background-color: var(--color5);
	
	text-align: center;
	font-weight: bold;
}
nav>ul>li {
	display: inline;
	padding: 0 0.05rem;
	white-space: pre;
}
nav a {
	color: var(--color8);
	text-decoration: none;
}
nav a:hover {
	color: var(--color9);
}
s {
	color: var(--color7);
}
span.tag {
	padding: 0 0.2rem;
}
table {
	background-color: var(--color8);
	border: var(--borderSize) solid var(--color8);
	border-radius: var(--windowCorner);
}
th, td {
	padding: 0.2rem;
}
td {
	background-color: var(--color9);
}
th {
	background-color: var(--color10);
}
th:first-child, td:first-child {
	border-radius: var(--windowCorner) 0 0 var(--windowCorner);
}
th:last-child, td:last-child {
	border-radius: 0 var(--windowCorner) var(--windowCorner) 0;
}
th:only-child, td:only-child {
	border-radius: var(--windowCorner);
}
ol#toc { /* table of contents */
	display: block;
	float: left;
	margin: 0 0.6rem 0 0;
	padding: 0.3rem 0.6rem 0.3rem 2.1rem;
	border: var(--borderSize) solid var(--color8);
	border-radius: var(--windowCorner) 0 var(--windowCorner) var(--windowCorner);
	background-color: var(--color10);
	width: fit-content;
}
ol#toc>h {
	display: block;
	width: calc(100% - 1.3rem);
	text-align: center;
	font-weight: bold;
}
ol {
	padding: 0 0 0 1.3rem;
}
ol, ul {
	margin: 0.8rem 0;
}
ul {
	padding: 0 0 0 1rem;
	list-style: square;
}
ol:first-child, ul:first-child {
	margin-top: 0;
}
ol>li, ul>li {
	margin: 0.2rem 0;
}
ol>li:first-of-type, ul>li:first-of-type {
	margin: 0;
}
li>ol, li>ul {
	margin-top: 0;
	margin: 0.2rem 0;
}
li>ul {
	list-style: none;
}
li>ol>li>ol, li>ol>li>ul, li>ul>li>ul, li>ul>li>ol {
	padding: 0 0 0 1.5rem;
}
li>ol>li:before, li>ul>li:before, li>span.tag {
	margin-right: 0.3rem;
}
li>ul>li:before {
	content: "↳";
}

.animList {
	flex-basis: 350px;
}
.codeHolder {
	display: block;
	margin: 0.3rem auto;
	resize: none;
}
.column {
	flex-flow: column !important;
	align-items: stretch !important;
}
.flex {
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	flex-flow: row wrap;
	gap: 0.8rem;
}
.flex>div, .flex>a {
	flex-grow: 1;
	flex-shrink: 1;
}

#contentFrame {
	margin-bottom: -0.2rem;
	width: 100%;
	border: none;
}
.contentHolder {
	flex-flow: row-reverse wrap;
	padding: 0 10%;
}
@media only screen and (max-width: 1260px) {
	.contentHolder {
		padding: 0 5%;
	}
}
@media only screen and (max-width: 1080px) {
	.contentHolder {
		padding: 0;
	}
}
.contentHolder+div {
	margin-top: 1rem;
}
.fanLists.flex img, .fanLists.flex a {
	width: 50px;
	height: 50px;
}
.latestSection+div {
	flex-grow: 99999 !important;
}
.homeFlexSmall {
	flex-basis: 250px;
	flex-grow: 20000 !important
}
#latestImg {
	width: 100%;
	border-radius: var(--windowCorner);
	aspect-ratio: 4/3;
	object-fit: cover;
}
.latestSection {
	flex-basis: 450px;
}
.latestSection+div {
	flex-basis: 300px;
}
.latestVideo iframe {
	width: 100%;
	border: 0;
	border-radius: var(--windowCorner);
	aspect-ratio: 16/9;
}
.main, .journalList {
	flex-grow: 99999 !important;
}
.sidebar {
	flex-basis: calc((88px*3) + 1.1rem);
}
nav, .main, .sidebar>div {
	border: var(--borderSize) solid var(--color3);
	border-radius: var(--windowCorner);
	
	background-color: var(--color3);
}
.postButtons.flex {
	margin-top: 0.3rem;
	gap: 0.2rem;
	align-items: stretch !important;
}
.ribbon {
	border-top: var(--borderSize) solid var(--color6);
	border-bottom: var(--borderSize) solid var(--color6);
	
	background-color: var(--color7);
}
.ribbon h3 {
	margin: 0;
	background-color: transparent;
	text-align: center;
}
.ribbon+h5 {
	text-align: center;
}
.siteButtons.flex, .fanLists.flex {
	gap: 0;
}
.siteButtons.flex a, .fanLists.flex a {
	flex-grow: 0;
}
.siteButtons.flex img, .siteButtons.flex a {
	width: 88px;
	height: 31px;
}
.siteButtons textarea {
	min-width: 250px;
	max-width: 250px;
	min-height: 80px;
	max-height: 80px;
}
.webRings.flex {
	gap: 0.4rem 0.2rem;
}

.windowTitle {
	padding: 0.3rem;
	height: 1.4rem;
	color: var(--color9);
	background-color: var(--color6);
	border-radius: var(--windowCorner) var(--windowCorner) 0 0;
	border-bottom: var(--borderSize) solid var(--color3);
	
	background-image: url("img/checker-trans2.png");
	background-size: 2rem;
	background-position: left;
}
.windowTitle h1, .windowTitle h2, .windowTitle h3 {
	margin: 0;
	margin-top: -0.3rem;
	padding: 0.3rem;
	height: 1.4rem;
	font-weight: bold !important;
	background-color: inherit;
}
.main .windowTitle h1, .main .windowTitle h2, .main .windowTitle h3 {
	float: left;
	margin-left: -0.3rem;
	border-radius: var(--windowCorner) 0 0 0;
}
.contentHolder+div>.windowTitle h1, .contentHolder+div>.windowTitle h2, .contentHolder+div>.windowTitle h3 {
	width: fit-content;
	border-radius: 0;
	margin: -0.3rem auto 0;
}
.sidebar .windowTitle h1, .sidebar .windowTitle h2, .sidebar .windowTitle h3 {
	float: right;
	margin-right: -0.3rem;
	border-radius: 0 var(--windowCorner) 0 0;
}
.windowTitle+div, .pageBody>body, .pageBody, header+.pseudoNav+div {
	padding: 0.4rem;
	background-color: var(--color9);
	background-image: none;
	border-radius: 0 0 var(--windowCorner) var(--windowCorner);
}
.pageBody, .pageBody>body {
	margin: 0;
	/*overflow: hidden;*/
}
.pageBody {
	padding: 0 !important;
}
.webgarden {
	width: 250px;
	height: 250px;
}
.webgarden>body {
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* CUSTOM ICONS */
@font-face {
		font-family: "NewgroundsFont"; 
		src: url("fonts/NewgroundsFont-Regular.otf") format("opentype");
}
.ngButton, #newgrounds {
	font-family: "NewgroundsFont";
	font-size: 1.5rem;
}
.sheezyIcon {
	filter: invert(91%) sepia(19%) saturate(653%) hue-rotate(337deg) brightness(100%) contrast(93%);
	height: 100% !important;
}


/*WEBRING STYLING*/
.ringHolder {
	overflow-y: scroll;
	max-height: 400px;
	align-items: center;
	position: relative;
}
.ringHolder>div {
	flex-basis: 70%;
	flex-grow: 0 !important;
}
.ringHolder table {
	border: initial;
	border-radius: initial;
	background-color: initial;
}
.ringHolder td, .ringHolder th, .ringHolder td:nth-child(even), .ringHolder th:nth-child(even) {
	background-color: initial;
	border-radius: initial;
}
.smallHolder {
	flex-basis: 128px !important;
}
#autiring table {
	margin: auto;
}
#deltaring {
	margin: 0 !important;
}
#hotline .flex, #yesterweb .flex {
	gap: 0.2rem;
}
#hotline button, #yesterweb button {
	font-weight: bold;
	left: 50%;
	transform: translateX(-50%);
}
#nullring a {
	flex-grow: 0 !important;
}
#PikRing>.PikRing>a>img {
	max-height: 100px;
}
#tetoring {
	margin: 0 !important;
}
#tetoring table {
	padding: 0.2rem;
}
#wiiRing {
	flex-basis: 200px;
}

/*ANIMATION*/
@keyframes bannerImg {
	/*from {object-position: 0 0;}*/
	to {object-position: calc(-1*(511px/2)/2.12) 0;}
}