@import url(/resources/fonts/web-fonts.css);
@font-face {
	font-family: "Daydream";
	src: url(fonts/Daydream.ttf) format("truetype");
}

/* dither-it colors
[ { "hex": "#000000" },
{ "hex": "#fda6ff" },
{ "hex": "#feb4ae" },
{ "hex": "#e9e875" },
{ "hex": "#a4febe" },
{ "hex": "#90cce8" },
{ "hex": "#cc26ff" },
{ "hex": "#7396ff" },
{ "hex": "#ff5443" },
{ "hex": "#ffffff" },
{ "hex": "#6dffa1" }]
*/

/* gradient colors
 background: #FE918C;
 background: linear-gradient(-90deg, rgba(254, 145, 140, 1) 0%, rgba(255, 254, 129, 1) 20%, rgba(7, 255, 209, 1) 40%, rgba(117, 159, 255, 1) 60%, rgba(220, 74, 254, 1) 80%, rgba(254, 145, 140, 1) 100%);
*/

* {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	scrollbar-color: rgb(0, 0, 0) rgba(255, 255, 255, 0);

}

body {
	background-color: #000080;
	background-image: url(../img/Hextra-DarkBluePtz.png);

	font-family: "Comic Sans Pixelated 16", "Comic Sans MS", "Comic Sans", cursive;
	font-size: 16px;
	color: white;

	padding: 0;
	margin: 0;

	width: 100vw;
	overflow-x: clip;

	scrollbar-color: black rgba(255, 255, 255, 0);
}


.wrapper {
	margin: auto;
	height: 100vh;
	width: fit-content;
	max-width: 100vw;
	overflow-y: visible;

	display: grid;
	column-gap: 10px;
	grid-template-columns: min-content 1fr;
	grid-template-areas:
		".   header"
		"nav main";
	position: relative;
}

header {
	grid-area: header;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 3px auto;

	max-width: 100%;
}
header > img {
	max-width: 100%;
}

main {
	grid-area: main;

	width: 850px;
	min-height: 435px;
	margin-bottom: 25px;
	max-height: 100%;

	color: #000000;

	position: relative;
}
.main-clip {
	overflow: hidden;
	height: 100%;
	border: #000000 solid 8px;
	border-radius: 15px;

	background-color: #e5e5e5;
	background-image: url(../img/wiz.png);
}
.main-wrapper {
	height: 100%;
	overflow: auto;
	padding: 8px 10px;
}
.main-inner {
	max-width: 695px;
	margin: auto;
	padding-bottom: 10px;
}

footer {
	font-size: 10px;
	grid-area: footer;
	text-align: center;
	margin: 0;
}

.corner-img {
	position: absolute;
	right: -110px;
	bottom: -20px;
}

hr {
	background-image: url(../img/dither_it_hr2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	width: 100%;
	min-width: 0;
	max-width: 400px;

	height: 44px;

	border: 0;
	display: block;
	margin: auto;
}

img {
	width: fit-content;
	max-width: 100%;
	min-width: none;
}

.margin-top {
	margin-top: 10px;
}
.margin-bottom {
	margin-bottom: 10px;
}

a:not(.new-btn) {
	color: #7396ff;
}
a:visited:not(.new-btn) {
	color: #cc26ff;
}
a:hover:not(.new-btn) {
	color: #ede2a7;
	background: linear-gradient(
		-90deg,
		rgba(254, 145, 140, 1) 0%,
		rgba(255, 254, 129, 1) 20%,
		rgba(7, 255, 209, 1) 40%,
		rgba(117, 159, 255, 1) 60%,
		rgba(220, 74, 254, 1) 80%,
		rgba(254, 145, 140, 1) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

p {
	padding: 0;
	margin: 10px;
}
p.center {
	text-align: center;
}

h2 {
	padding: 0;
	margin: 0;
	font-family: "Comic Sans Pixelated 24", "Comic Sans MS", "Comic Sans", cursive;
	font-weight: bold;
	font-size: 24px;

	color: white;
	letter-spacing: 0.1em;
	-webkit-text-stroke: 6px black;
	paint-order: stroke fill;
}

ul {
	list-style: none;
	padding: 8px;
	padding-top: 6px;
	padding-left: 21px;
	margin: 0;
}

li {
	padding-left: 5px;
}

ul li::marker {
	font-family: "Starborn";
	content: "a";
	font-size: 0.9em;
	padding-right: 3px;
}

.divider {
	margin: 10px auto;
	text-align: center;
	display: block;
}
.crisp {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}
.bold {
	font-weight: bold;
}

.section-header {
	margin-bottom: 15px;
}

.flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.gap-10 {
	gap: 10px;
}
.padding-10 {
	padding: 10px;
}

.border {
	border: #000000 solid 8px;
	background-image: url(../img/wiz.png);
	background-color: #e5e5e5;
	border-radius: 15px;

	padding: 8px 10px;
	color: #000000;
}

a.new-btn {
	font-family: Daydream, "Comic Sans MS", cursive;
	padding: 15px 8px;

	font-size: 11px;

	background-position: center;
	border-radius: 16px;

	margin: 0;
	text-decoration: none;
	text-wrap: nowrap;
	text-align: center;
	color: white;

	border: solid black 3px;

	text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px,
		rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px,
		rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px,
		rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px,
		rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}
a.new-btn:nth-child(n) {
	background-image: url(../img/button0.png);
	/* border: #FE918C ridge 5px; */
}
a.new-btn:nth-child(2n) {
	background-image: url(../img/button1.png);
	/* border: #E9E875 ridge 5px; */
}
a.new-btn:nth-child(3n) {
	background-image: url(../img/button2.png);
	/* border: #07FFD1 ridge 5px; */
}
a.new-btn:nth-child(4n) {
	background-image: url(../img/button3.png);
	/* border: #759FFF ridge 5px; */
}
a.new-btn:nth-child(5n) {
	background-image: url(../img/button4.png);
	/* border: #DC4AFE ridge 5px; */
}
a.new-btn:nth-child(6n) {
	background-image: url(../img/button0.png);
	/* border: #FE918C ridge 5px; */
}

nav {
	grid-area: nav;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 6px auto;

	width: 100%;
	align-items: center;
}

.mobile-nav {
	display: none;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	text-align: center;

	padding: 9px;

	font-family: Daydream, "Comic Sans MS", cursive;
	background-color: #000000;
	width: 100%;
}
.mobile-nav-text {
	flex-grow: 99;
}

.nav-btn-box {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	gap: 4px 10px;
}
.nav-btn-box .mobile-hide {
	display: flex;
}

.nav-sub-box {
	border: solid black 3px;
	border-radius: 16px;
	background-image: url(../img/wiz.png);
	color: black;
	overflow: auto;
	min-height: 0;
	width: 100%;
}
.nav-sub-box a {
	color: black !important;
	paint-order: stroke fill;
	text-decoration: none;
	font-weight: normal;
}

.inner-box {
	border: #1d1d1d solid 3px;
	background-color: #e5e5e5;
	border-radius: 12px;
	overflow: hidden;

	display: flex;
	flex-direction: column;
}
.inner-box > .content {
	overflow: auto;
	flex-grow: 99;
	padding: 10px;
}

.rainbow-header {
	padding: 3px;
	border-bottom: 3px black solid;

	background: #fe918c;
	background: linear-gradient(
		-90deg,
		rgba(254, 145, 140, 1) 0%,
		rgba(255, 254, 129, 1) 20%,
		rgba(7, 255, 209, 1) 40%,
		rgba(117, 159, 255, 1) 60%,
		rgba(220, 74, 254, 1) 80%,
		rgba(254, 145, 140, 1) 100%
	);
	background-image: url(../img/dither_it_hori-gradient.png);
}
.rainbow-header h2 {
	letter-spacing: normal;
	text-align: center;
	font-family: Daydream, "Comic Sans MS", cursive;
	color: white;
	font-weight: normal;
	-webkit-text-stroke: 6px black;
	paint-order: stroke fill;
	padding: 3px 0;
}
.plain-header {
	padding: 3px;
	border-bottom: 3px black solid;

	padding-bottom: 8px;
	text-align: center;
	background: #ede2a7;
}
.plain-footer {
	padding: 3px;
	border-top: 3px black solid;

	padding-bottom: 8px;
	text-align: center;
	background: #ede2a7;
}

@media screen and (max-width: 1000px) {
	.wrapper {
		margin: auto;
		width: 100%;
		height: auto;

		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"nav"
			"main";

				overflow-x: auto;
				
	}

	main {
		width: 100%;
		height: fit-content;
		margin: auto;
	}
	.main-clip {
		border: none;
		border-radius: 0;
		border-top: #000000 solid 8px;
	}
	.main-wrapper {
		height: fit-content;
		overflow: auto;
		padding: 8px 10px;
	}

	.main-inner {
		max-width: 695px;
		margin: auto;
	}

	.nav-btn-box {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.nav-sub-box {
		display: none;
	}

	.corner-img {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	.flex-row,
	.facts-content {
		flex-direction: column;
	}

	.mobile-nav {
		display: flex;
	}

	nav {
		margin: 0;
		gap:0;
	}

	.nav-btn-box {
		flex-direction: column;
		justify-content: stretch;
		width: 100%;
		gap:0;
	}

	a.new-btn {
		border: none;
		border-bottom: black 8px solid;
		border-radius: 0;
	}

	.nav-btn-box.mobile-hide {
		display: none;
	}

	.main-clip {
		border: none;
	}
}