@font-face {
  font-family: "Minecraft";
   src: url("fonts/minecraft.ttf") format("truetype");
}

:root {
	--global-scale: 3;
	--default-shadow: #3F3F3F;
	--default-color: #FFFFFF
}

::-webkit-scrollbar {
	width: calc(var(--global-scale) * 6px);
	height: calc(var(--global-scale) * 6px);
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
	background: #000000;
}

::-webkit-scrollbar-thumb {
	height: calc(var(--global-scale) * 32px);
	box-shadow: inset calc(var(--global-scale) * -1px) calc(var(--global-scale) * -1px) 0 0 #808080;
	background: #C0C0C0;
}

a {
	text-decoration: none;
	cursor: default;
}

[contenteditable] {
	outline: none;
}

body {
	--local-scale: calc(var(--scale, 1) * var(--global-scale));
    margin: calc(var(--local-scale) * 4px) calc(var(--local-scale) * 4px);
}

@media (min-width: 1440px){
    :root {
		--global-scale: 3;
    }
}

@media (max-width: 1280px){
    :root {
		--global-scale: 3;
    }
}

@media (max-width: 1060px){
    :root {
		--global-scale: 2;
    }
}
@media (max-width: 700px){
    body {
		--global-scale: 1;
    }
}

.grid {
	display: grid;
}


body.grid {
	height: 100vh;
    grid-template-rows: max-content auto max-content;
}

div.scrollitem {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

div.scrollcontent {
	display: grid;
	align-items: center;
    background-attachment: local;
	overflow-y: auto;
	height: auto;
}

div.scrollitem {
	display: grid;
	align-content: center;
	width: calc(var(--local-scale) * 200px);
	height: calc(var(--local-scale) * 20px);
    padding: calc(var(--local-scale) * 5px) calc(var(--local-scale) * 4px);
    border-style: solid;
    text-align: left;
	background-color: transparent;
	border-color: transparent;
	border-width: calc(var(--local-scale) * 1px);
}

div.scrollitem:focus,
div.scrollitem:focus-within {
	background-color: #000000;
	border-color: #808080;
}

div.fgtop,
div.fgbottom,
.dirt {
    margin: 0;
	color: #fff;
	--local-scale: calc(var(--scale, 1) * var(--global-scale));
	background-image: url("images/dirt.svg");
	background-size: calc(var(--local-scale) * 32px);
	background-color: #404040;
	background-blend-mode: multiply;
}
div.fgtop,
div.fgbottom {
	/*position: fixed;*/
	width: 100%;
	z-index:10;
	height: calc(var(--local-scale) * 32px);
	box-shadow: 0px 0px calc(var(--local-scale) * 4px) calc(var(--local-scale) * 2px) #000000;
}
.darkbg {
	background-color: #202020;
	background-blend-mode: multiply;
}

.gradient {
	background-size: cover;
	background-image: linear-gradient(to bottom, #303060, #050500);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

ul {
  list-style-type: square;
}

/* Don't forget to add all classes and ids which change scale and color variables here */
h1,
h2,
a,

.mcgray_ui, .black, .darkblue, .darkgreen, .darkaqua, .darkred, .darkpurple, .gold, .gray, .darkgray, .blue, .green, .aqua, .red, .lightpurple, .yellow, .white, .mcdarkgray_ui,

.mc,
.mcsplash,
.mcbutton,
.mcbutton_disabled,
.mcslider,
.mctextfield,
.mcbuttontext {
	outline:none;
	--local-scale: calc(var(--scale, 1) * var(--global-scale));
	--local-color: var(--text-color, var(--default-color));
	--local-shadow: var(--shadow-color, var(--default-shadow));
	font-weight: 100;
	font-family: "Minecraft";
	word-spacing: calc(2px * var(--local-scale));
	line-height: calc(9px * var(--local-scale));
	font-size: calc(8px * var(--local-scale));
	text-shadow: calc(var(--local-scale)* 1px) calc(var(--local-scale) * 1px) 0 var(--local-shadow);
	color: var(--local-color);
}

.mcslider::before {
	position: absolute;
	text-align: center;
	width: inherit;
	content: var(--slider-text, "");
}

ul {
    padding-inline-start: calc(16px * var(--local-scale));
}

::marker {
	letter-spacing: calc(4px * var(--local-scale));
	content: "\2022";
}

h1 { --scale: 2;}

h1,
h2 {
	margin: calc(8px * var(--local-scale));
    font-weight: 100;
}

.mcsplash {
	display: block;
	--shadow-color: #3F3F00;
	--text-color: #FFFF00;
	--scale: 2;
	animation-name: splash;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	position:relative;
	z-index: 20;
}

.mcbutton,
.mcbutton_disabled,
.mctextfield,
.mcslider,
.mcbuttontext {
	display: block;
	margin-top:calc(var(--local-scale) * 6px);
	margin-bottom:calc(var(--local-scale) * 6px);
	margin-right:calc(var(--local-scale) * 6px);
	margin-left:calc(var(--local-scale) * 6px);
    box-sizing: border-box;
    padding: calc(var(--local-scale) * 6px) 0px;
    text-align: center;
	text-decoration: none;
	cursor: default;
	background-size: cover;
	background-image: url("images/button.svg");
	line-height: 1;
	--shadow-color: #383838;
	--text-color: #E0E0E0;
	width: calc(var(--local-scale) * 200px);
	height: calc(var(--local-scale) * 20px);
}
.mcbutton:focus,
.mcbutton:hover {
	background-image: url("images/button_active.svg");
	cursor: default;
}

.mcbuttontext {
	top:0px;
	margin:0px auto;
	position:absolute;
	background-image: none;
	pointer-events: none;
	cursor: default;
}

.mcbutton:hover,
.mcbutton:focus,
.mcslider:hover,
.mcslider:hover + .mcbuttontext,
.mcslider:focus + .mcbuttontext,
.mcbutton:hover + .mcbuttontext,
.mcbutton:focus + .mcbuttontext {
	--shadow-color: #3F3F28;
	--text-color: #FFFFA0;
	cursor: default;
}

.mcbutton_disabled {
	background-image: url("images/button_inactive.svg");
	pointer-events: none;
	cursor: default;
}


/* Text colors */

a.res { --shadow-color: #153F15; --text-color: #55FF55; }
a.res:hover, a.res:focus { --shadow-color: #002A00; --text-color: #00AA00; }
a { --shadow-color: #15153F; --text-color: #5555FF; }
a:hover, a:focus { --shadow-color: #00002A; --text-color: #0000AA; }
h1, h2 { --shadow-color: #3F3F3F; --text-color: #FFFFFF; }

.mcbutton_disabled,
.mcgray_ui { --shadow-color: #282828 !important; --text-color: #A0A0A0 !important; }
.black { --shadow-color: #000000 !important; --text-color: #000000 !important; }
.darkblue { --shadow-color: #00002A !important; --text-color: #0000AA !important; }
.darkgreen { --shadow-color: #002A00 !important; --text-color: #00AA00 !important; }
.darkaqua { --shadow-color: #002A2A !important; --text-color: #00AAAA !important; }
.darkred { --shadow-color: #2A0000 !important; --text-color: #AA0000 !important; }
.darkpurple { --shadow-color: #2A002A !important; --text-color: #AA00AA !important; }
.gold { --shadow-color: #2A2A00 !important; --text-color: #FFAA00 !important; }
.gray { --shadow-color: #2A2A2A !important; --text-color: #AAAAAA !important; }
.darkgray { --shadow-color: #151515 !important; --text-color: #555555 !important; }
.mcdarkgray_ui { --shadow-color: #151515 !important; --text-color: #555555 !important; }
.blue { --shadow-color: #15153F !important; --text-color: #5555FF !important; }
.green { --shadow-color: #153F15 !important; --text-color: #55FF55 !important; }
.aqua { --shadow-color: #153F3F !important; --text-color: #55FFFF !important; }
.red { --shadow-color: #3F1515 !important; --text-color: #FF5555 !important; }
.lightpurple { --shadow-color: #3F153F !important; --text-color: #FF55FF !important; }
.yellow { --shadow-color: #3F3F15 !important; --text-color: #FFFF55 !important; }
.white { --shadow-color: #3F3F3F !important; --text-color: #FFFFFF !important; }
.changray { --shadow-color: #3f3f3f00 !important; --text-color: #7E7E7E !important; }
.chanwhite { --shadow-color: #3f3f3f00 !important; --text-color: #FFFFFF !important; }

/* --- */

.ver-number {
	position: fixed;
	top: 5px;
	left: 5px;
}

.bottom-right {
	position: fixed;
	bottom: 5px;
	right: 5px;
}

.mctextfield {
    padding: calc(var(--local-scale) * 5px) calc(var(--local-scale) * 4px);
    border-style: solid;
    text-align: left;
	background-image: none;
	background-color: #000000;
	border-color: #A0A0A0;
	border-width: calc(var(--local-scale) * 1px);
}

.mcslider {
	-webkit-appearance: none;
	background-size: cover;
	background-image: url("images/button_inactive.svg");
}

.mcslider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: calc(var(--local-scale) * 8px);
	height: calc(var(--local-scale) * 20px);
	background-size: cover;
	background-image: url("images/slider.svg");
	cursor: default;
}

@keyframes splash {
  0%   {
	  animation-timing-function: ease-out;
	  transform: rotate(-20deg) translateX(calc(var(--local-scale) * 30px)) scale(1);
	  }
  50%   {
	  animation-timing-function: ease-in;
	  transform: rotate(-20deg) translateX(calc(var(--local-scale) * 30px)) scale(0.9);
	  }
  100%   {
	  animation-timing-function: ease-out;
	  transform: rotate(-20deg) translateX(calc(var(--local-scale) * 30px)) scale(1);
	  }
}

.center {
	margin-right: auto;
	margin-left: auto;
}
.center:not(.mctextfield) {
	text-align: center;
}

.center_vertical {
	margin-top: auto;
	margin-bottom: auto;
}

.flex,
.flex_space {
	display: flex;
	column-gap: calc(var(--local-scale) * 6px);
	align-content: center;
	align-items: center;
}
.flex_space {
	justify-content: space-between;
}
.minwidth {
	width: fit-content;
}

.menucontainer{
	margin: calc(var(--local-scale) * 12px) auto;
	width: fit-content;
	height: auto;
	position: relative;
}