/* 
Fonts: Minecraft, Monocraft, Minecrafter, Minecraft Alt, Minecraft Evenings
CSS Variables:
    --block-size: 48px; all sizing is relative to this property to keep everything tiled together
    --zoom: 1; Set indiviualy for each class use this property to control how 'zoomed' in or out you want your UI textures to be
    --( 1/16 | 1/8 | 1/4 | 1/2 )-block
    --{1-32}-block 
Classes:
    text-shadow-(xs|sm|md|lg|xl)
    link
    bg-dark-(75|50|25)
    map
    book
    sign
    button
    scrollbar
    transparent-panel, paenl, panel-dark
    transparent-achievement panel, achievement panel
    transparent-slot, slot
    transparent-raised-slot, raised-slot, raised-slot-hover, raised-slot-active
    enchanting-slot, enchanting-slot-hover, enchanting-slot-active
    anvil-textbox, anvil-textbox-active
    table
    markdown
*/

:root {
	--block-size: 48px;
	--zoom: 1;

	--1\/16--block: calc(var(--block-size) / 16);
	--1\/8-block: calc(var(--block-size) / 8);
	--1\/4-block: calc(var(--block-size) / 4);
	--1\/2-block: calc(var(--block-size) / 2);
	--1-block: calc(var(--block-size) * 1);
	--2-block: calc(var(--block-size) * 2);
	--3-block: calc(var(--block-size) * 3);
	--4-block: calc(var(--block-size) * 4);
	--5-block: calc(var(--block-size) * 5);
	--6-block: calc(var(--block-size) * 6);
	--7-block: calc(var(--block-size) * 7);
	--8-block: calc(var(--block-size) * 8);
	--9-block: calc(var(--block-size) * 9);
	--10-block: calc(var(--block-size) * 10);
	--11-block: calc(var(--block-size) * 11);
	--12-block: calc(var(--block-size) * 12);
	--13-block: calc(var(--block-size) * 13);
	--14-block: calc(var(--block-size) * 14);
	--15-block: calc(var(--block-size) * 15);
	--16-block: calc(var(--block-size) * 16);
	--17-block: calc(var(--block-size) * 17);
	--18-block: calc(var(--block-size) * 18);
	--19-block: calc(var(--block-size) * 19);
	--20-block: calc(var(--block-size) * 20);
	--21-block: calc(var(--block-size) * 21);
	--22-block: calc(var(--block-size) * 22);
	--23-block: calc(var(--block-size) * 23);
	--24-block: calc(var(--block-size) * 24);
	--25-block: calc(var(--block-size) * 25);
	--26-block: calc(var(--block-size) * 26);
	--27-block: calc(var(--block-size) * 27);
	--28-block: calc(var(--block-size) * 28);
	--29-block: calc(var(--block-size) * 29);
	--30-block: calc(var(--block-size) * 30);
	--31-block: calc(var(--block-size) * 31);
	--32-block: calc(var(--block-size) * 32);

	--fluid-0: clamp(0.72rem, calc(0.67rem + 0.24vw), 0.87rem);
	--fluid-1: clamp(0.91rem, calc(0.87rem + 0.22vw), 1.04rem);
	--fluid-2: clamp(1.09rem, calc(1.04rem + 0.26vw), 1.25rem);
	--fluid-3: clamp(1.31rem, calc(1.25rem + 0.31vw), 1.5rem);
	--fluid-4: clamp(1.58rem, calc(1.5rem + 0.38vw), 1.8rem);
	--fluid-5: clamp(1.89rem, calc(1.8rem + 0.45vw), 2.16rem);
	--fluid-6: clamp(2.27rem, calc(2.16rem + 0.54vw), 2.59rem);
	--fluid-7: clamp(2.72rem, calc(2.59rem + 0.65vw), 3.11rem);
	--fluid-8: clamp(3.27rem, calc(3.11rem + 0.78vw), 3.73rem);
	--fluid-9: clamp(3.73rem, calc(3.48rem + 1.24vw), 4.48rem);
}

/* Typogrpahy */
.text-shadow-none {
	text-shadow: none;
}
.text-shadow-xs {
	text-shadow: 0.75px 0.75px #000;
}
.text-shadow-sm {
	text-shadow: 1px 1px #000;
}
.text-shadow,
.text-shadow-md,
.table td,
.button,
.markdown > p,
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6,
.markdown ul,
.markdown :not(pre) code,
.markdown td {
	text-shadow: 1.5px 1.5px #000;
}
.text-shadow-lg {
	text-shadow: 1.75px 1.75px #000;
}
.text-shadow-xl {
	text-shadow: 2px 2px #000;
}

.link,
.markdown a:not(.button) {
	text-shadow: none;
	color: #aaaaff;
}
.link,
.markdown a:not(.button):hover {
	text-decoration: underline;
}

/* Backgrounds */
[class*="bg-block"],
[class*="bg-item"] {
	image-rendering: pixelated;
	background-repeat: repeat;
	background-size: var(--block-size);
	-o-background-size: var(--block-size);
	-moz-background-size: var(--block-size);
	-webkit-background-size: var(--block-size);
}

[class*="bg-painting"] {
	image-rendering: pixelated;
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

.bg-dark-25 {
	background-size: cover;
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
}
.bg-dark-50 {
	background-size: cover;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.bg-dark,
.bg-dark-75 {
	background-size: cover;
	background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
}

/* UI */
.sign {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-image: url("../imgs/ui/sign.png");
	white-space: pre-line;
	color: #000;
}

.map {
	--zoom: 4;
	box-sizing: content-box;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/map.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 12.75% 15.75% fill;
	border-image-repeat: repeat;
}

.book {
	--zoom: 4;
	--size: calc((var(--block-size) / var(--zoom) * 3));
	border-width: var(--size);
	border-style: solid;
	border-left-width: calc(var(--size) / 1.5);
	border-image: url("../imgs/ui/book.png");
	border-image-width: var(--size) var(--size) var(--size) calc(var(--size) / 1.5);
	border-image-slice: 8.5% 15% 12.75% 10% fill;
	border-image-repeat: stretch;
	color: #000;
	text-shadow: none;
}

.input {
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
	outline: none;
	color: #fff;
	padding: 0 0.25rem;
	text-shadow: 1.5px 1.5px #000;
	font-family: "Minecraft";
	font-size: 1.2rem;
}

.button {
	position: relative;
	z-index: 0;
	--zoom: 10;
	user-select: none;
	cursor: pointer;
	image-rendering: pixelated;
	background-size: cover;
	background-image: url("../imgs/ui/button-inside.png");
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/button-border.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 10% 4%;
	border-image-repeat: stretch;
	color: #d1d5db;
}
.button:hover {
	background-size: cover;
	background-image: url("../imgs/ui/button-inside-hover.png");
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/button-border-hover.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 10% 4%;
	border-image-repeat: stretch;
	color: #fef08a;
}
.button:active {
	background-size: cover;
	background-image: url("../imgs/ui/button-inside-active.png");
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/button-border-active.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 10% 4%;
	border-image-repeat: contain;
	color: #a8a29e;
}

.button:disabled,
.button.disabled {
	cursor: disabled;
}
.button:disabled:hover,
.button.disabled:hover {
	cursor: disabled;
	image-rendering: pixelated;
	background-size: cover;
	background-image: url("../imgs/ui/button-inside.png");
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/button-border.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 10% 4%;
	border-image-repeat: stretch;
	color: #d1d5db;
}

.button:disabled::after,
.button.disabled::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--block-size) / var(--zoom));
	left: calc(-1 * var(--block-size) / var(--zoom));
	right: calc(-1 * var(--block-size) / var(--zoom));
	bottom: calc(-1 * var(--block-size) / var(--zoom));
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 1;
}

.scrollbar {
	scrollbar-width: thin;
	scrollbar-color: #909090 #bfbfbf;
}
.scrollbar::-webkit-scrollbar {
	width: 16px;
}
.scrollbar::-webkit-scrollbar-thumb {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/scroll-thumb.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.scrollbar::-webkit-scrollbar-thumb:active {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/scroll-thumb-active.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}

.transparent-panel {
	--zoom: 10;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/transparent-panel.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 43% 43% fill;
	border-image-repeat: stretch;
}

.panel,
.table,
.markdown table {
	--zoom: 10;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/panel.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 43% 43% fill;
	border-image-repeat: stretch;
}

.panel-dark {
	--zoom: 10;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/panel-dark.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 43% 43% fill;
	border-image-repeat: stretch;
}

.transparent-achievement-panel {
	--zoom: 10;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/transparent-achievement-panel.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 45.5% 45.5% fill;
	border-image-repeat: stretch;
}

.achievement-panel,
.markdown hr,
.markdown pre,
.markdown :not(pre) code,
.markdown blockquote {
	--zoom: 10;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/achievement-panel.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 45.5% 45.5% fill;
	border-image-repeat: stretch;
}

.transparent-slot {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/transparent-slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}

.slot,
.table td,
.markdown td,
.scrollbar::-webkit-scrollbar-track {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}

.transparent-raised-slot {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/transparent-raised-slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}

.raised-slot,
.raised-slot-button,
.scrollbar::-webkit-scrollbar-corner {
	position: relative;
	z-index: 0;
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/raised-slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.raised-slot-hover,
.raised-slot-button:hover {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/raised-slot-hover.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.raised-slot-active,
.raised-slot-button:active {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/raised-slot-active.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.raised-slot-disabled,
.raised-slot-button:disabled {
	cursor: disabled;
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/raised-slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.raised-slot-disabled:hover,
.raised-slot-button:disabled:hover {
	cursor: disabled;
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/raised-slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.raised-slot-disabled::after,
.raised-slot-button:disabled::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--block-size) / var(--zoom));
	left: calc(-1 * var(--block-size) / var(--zoom));
	right: calc(-1 * var(--block-size) / var(--zoom));
	bottom: calc(-1 * var(--block-size) / var(--zoom));
	background-color: rgba(0, 0, 0, 0.15);
	z-index: 1;
}

.enchanting-slot,
.enchanting-slot-button {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/enchanting-slot.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.enchanting-slot-hover,
.enchanting-slot-button:hover {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/enchanting-slot-hover.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}
.enchanting-slot-active,
.enchanting-slot-button:active {
	--zoom: 24;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/enchanting-slot-active.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 33.5% 33.5% fill;
	border-image-repeat: stretch;
}

.anvil-textbox {
	--zoom: 16;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/anvil-textbox.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 40% 40% fill;
	border-image-repeat: stretch;
}
.anvil-textbox-active,
.anvil-textbox:active,
.anvil-textbox:focus {
	--zoom: 16;
	border-width: calc(var(--block-size) / var(--zoom));
	border-image: url("../imgs/ui/anvil-textbox-active.png");
	border-image-width: calc(var(--block-size) / var(--zoom));
	border-image-slice: 40% 40% fill;
	border-image-repeat: stretch;
}

/* markdown */
.markdown {
	overflow: hidden;
	font-family: Minecraft;
	font-size: 1rem;
	color: #fff;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
	margin: 0.75rem 0;
}

.markdown h1 {
	font-size: var(--fluid-7);
}
.markdown h2 {
	font-size: var(--fluid-6);
}
.markdown h3 {
	font-size: var(--fluid-5);
}
.markdown h4 {
	font-size: var(--fluid-4);
}
.markdown h5 {
	font-size: var(--fluid-3);
}
.markdown h6 {
	font-size: var(--fluid-2);
}

.markdown hr {
	height: 5px;
	margin: 1rem 0;
	border-width: 4px !important;
}

.markdown > p {
	margin: 0.75rem 0;
	font-size: 0.875rem;
	font-size: var(--fluid-1);
}

.markdown ul {
	margin: 0 2rem;
}

.markdown ul li::marker {
	content: "- ";
}

.markdown blockquote {
	margin: 1rem 0;
	padding: 0.5rem;
}

.markdown :not(pre) code {
	--zoom: 12 !important;
	font-family: Minecraft !important;
	text-align: center;
}

.markdown pre {
	overflow-x: visible !important;
	padding: 0.5rem;
	font-size: var(--fluid-0);
}

.markdown pre code span {
	font-family: Monocraft !important;
	white-space: pre-wrap;
}

.markdown code {
	padding: 0 0.2rem;
}

.table,
.markdown table {
	border-collapse: separate;
	padding: 0.5rem;
}
.table th,
.markdown th {
	font-weight: normal;
	font-size: var(--fluid-2);
	color: #3d3c3d;
}
.table td,
.markdown td {
	position: relative;
	padding: 0 0.25rem;
	color: #fff;
}

/* Fonts */
@font-face {
	font-family: "Minecraft";
	src: url("/static/fonts/Minecraft-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Minecraft";
	src: url("/static/fonts/Minecraft-BoldItalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Minecraft";
	src: url("/static/fonts/Minecraft-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Minecraft";
	src: url("/static/fonts/Minecraft-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Monocraft";
	src: url("/static/fonts/Monocraft.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Minecrafter";
	src: url("/static/fonts/Minecrafter.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Minecrafter Alt";
	src: url("/static/fonts/MinecrafterAlt.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Minecraft Evenings";
	src: url("/static/fonts/MinecraftEvenings.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}