@font-face {
    font-family:'ballpointpenerator';
    src: url('fonts/ballpointpenerator.eot');
    src: url('fonts/ballpointpenerator.eot?#iefix') format('embedded-opentype'),
         url('fonts/ballpointpenerator.woff2') format('woff2'),
         url('fonts/ballpointpenerator.woff') format('woff'),
         url('fonts/ballpointpenerator.ttf') format('truetype');
}

@font-face {
    font-family:'nimbusmonl';
    src: url('fonts/nimbusmonl.eot');
    src: url('fonts/nimbusmonl.eot?#iefix') format('embedded-opentype'),
         url('fonts/nimbusmonl.woff2') format('woff2'),
         url('fonts/nimbusmonl.woff') format('woff'),
         url('fonts/nimbusmonl.ttf') format('truetype');
}

@font-face {
    font-family:'jackpot';
    src: url('fonts/jackpot.eot');
    src: url('fonts/jackpot.eot?#iefix') format('embedded-opentype'),
         url('fonts/jackpot.woff2') format('woff2'),
         url('fonts/jackpot.woff') format('woff'),
         url('fonts/jackpot.ttf') format('truetype');
}

@font-face {
    font-family:'belwemonostd';
    src: url('fonts/belwemonostd.eot');
    src: url('fonts/belwemonostd.eot?#iefix') format('embedded-opentype'),
         url('fonts/belwemonostd.woff2') format('woff2'),
         url('fonts/belwemonostd.woff') format('woff'),
         url('fonts/belwemonostd.ttf') format('truetype');
}

/********************* Main **********************/

html{ 
	background:#000;
	height:100%;
}

body{
	width:100vw;
	height:100dvh;
	margin:0;
	padding:0;
	font-family:'belwemonostd', monospace;
	font-size:19px;
	letter-spacing:-.01em;
    color:#000;
    position:relative;
    background-size:100% 100%;
    overflow:hidden;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
    
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

a img, img, a, body *{ -webkit-tap-highlight-color:transparent; }

/******* Loader ********/

#loader{
    width:100%;
	height:100%;
	margin:0;
	padding:0;
    position:absolute;
    z-index:999998;
    overflow:hidden;
    background:#000;
}

#loader svg{
    transform:translate(-50%, -50%);
    position:absolute;
    stroke:none;
    fill:#272f22;
    left:50%;
    top:50%;
    width:4em;
    height:4em;
}

.loadline{
	fill:none;
	stroke:#272f22;
	stroke-width:8;
	stroke-linecap:round;
	stroke-dasharray:396 396;
	stroke-dashoffset:0;
	animation-duration:2s; 
    animation-iteration-count:infinite; 
    animation-timing-function:linear;
    animation-name:fr0;
}

@keyframes fr0 { 
  0%{ stroke-dashoffset:0; } 
  100%{ stroke-dashoffset:792; }
}

/***********/

#gamestuff{
    position:fixed;
    top:50%;
    left:50%;
	transform:translate(-50%,-50%);
    width:100%;
    height:100%;
	max-width:1500px;
	max-height:900px;
}

#gamestuff, #gamestuff *{
	-webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

#gamestuff:after{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	box-shadow:inset 0 0 40px 40px #000;
	z-index:101;
	pointer-events:none;
}

@media all and (max-width:1500px){
	#gamestuff:after{ box-shadow:inset 0 0 3vw 3vw #000; }
}

@media all and (max-height:900px){
	#gamestuff:after{ box-shadow:inset 0 0 3vw 3vw #000; }
}

#game{
    position:fixed;
    top:0;
    left:0;
    overflow:hidden;
    z-index:100;
    cursor:none;
	width:100%;
	height:100%;
}

#botview{ 
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:101;
    background:transparent;
    overflow:hidden;
}

/************* Login ***************/

#login{
    width:100%;
    height:100%;
    position:relative;
    z-index:999997;
    top:0;
    left:0;
    text-align:center;
	overflow-y:scroll;
	overscroll-behavior-y:none;
	touch-action:auto;
	background:#000 url("images/main.jpg") calc(50% - 50px) calc(50% - 100px) / 1100px auto no-repeat;
}

/*.backg{ background:#000 url("images/main.jpg") right bottom / cover no-repeat; }*/

#boxmover{
	position:relative;
	width:100%;
	height:auto;
	left:0;
	top:47%;
	transform:translateY(-50%);
}

.boxout{
    position:relative;
	text-align:center;
    top:0;
    left:0;
    width:100%;
    height:auto;
    box-sizing:border-box;
    padding:1rem 0;
	z-index:10;
}

.copy{
	color:rgba(255,255,255,.5) !important;
	font-size:.8rem;
	font-weight:bold;
	position:relative;
	width:100%;
	text-align:center;
	box-sizing:border-box;
	padding:2.5rem 1rem .5rem;
}

.box, #deegin{ display:inline-block; }

.box{
    position:relative;
    box-sizing:border-box;
    width:100%;
    max-width:370px;
    margin:0 auto;
    font-family:'belwemonostd', monospace;
    color:#43484f;
    font-weight:bold;
    border-radius:.25rem;
	background:rgba(109,131,109,1.00) center / 100% 100% no-repeat;
	text-align:left;
	transform:rotate(-2deg);
	box-shadow:inset 0 0 .2em rgba(0,0,0,.2), -.1em .14em .35em rgba(0,0,0,0.5);
}

.texture{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url("images/paper.jpg") center / cover no-repeat;
	border-radius:.25rem;
	mix-blend-mode:multiply;
	opacity:.75;
}

.boxin{
    box-sizing:border-box;
    padding:.85em .85em .75em;
	position:relative;
}

.box p{
    text-align:left;
    margin:0;
    line-height:1.15;
	mix-blend-mode:multiply;
	font-size:.9em;
	font-weight:bold;
	letter-spacing:.01em;
}

.blocker{
	display:inline-block;
	float:right;
	width:2.5em;
	height:4em;
	margin:0;
	vertical-align:baseline;
}

.logos{
    width:100%;
	margin:0 0 1rem 0;
}

.logo{
	width:50%;
	margin:-.1em .65em .35em -.2em;
	float:left;
	max-width:140px;
}

.logo svg{
    width:100%;
    height:auto;
    fill:#43484f;
}

.boxcont{
    box-sizing:border-box;
    width:100%;
}

#loginform{
    width:100%;
	text-align:left;
}

.formin{
    width:100%;
    margin:0 auto .35rem;
    line-height:1;
    text-align:left;
    font-size:1.1em;
	border:.15em solid #43484f;
	border-radius:.3rem;
	box-sizing:border-box;
}

label, .underlined{
    display:table-cell;
    vertical-align:middle;
    padding:.35em .85em .25em .5em;
    box-sizing:border-box;
    font-weight:bold;
}

label{
    background:#43484f;
    color:#fff;
	width:fit-content;
	width:2em;
}
.underlined{ padding-right:1.5em; }
.bc{ padding-right:2.2em; }

.checklist .underlined{ padding-bottom:0; }

input{
    font-size:1.1em;
    -webkit-appearance:none;
    appearance:none;
    background:none;
    border:0;
    padding:0;
    font-family:"ballpointpenerator", sans-serif;
    color:#ff3400;
    position:relative;
    z-index:10;
    top:0;
	width:100%;
	box-sizing:border-box;
}

input::placeholder{ color:#9EB5A9; }

input[type="color"]{
    width:1.2em;
    height:1.2em;
    margin-right:.4em;
    display:inline-block;
    border-radius:0;
    overflow:hidden;
}

.clr-picker{ z-index:999999 !important; }

.checkitem{
    display:inline-block;
    font-size:.8em;
    margin:0 .5em .35em 0;
}

.checkb{
    display:inline-block;
    width:.85em;
    height:.85em;
    margin:0 .35em 0 0;
    vertical-align:middle;
    position:relative;
    border:.15em solid #43484f;
    border-radius:.2em;
    top:-.1em;
    cursor:pointer;
}

.checked:before{
    width:120%;
    height:120%;
    position:absolute;
    top:-10%;
    left:-10%;
    z-index:10;
    content:'';
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 458.8 553.4'%3E%3Cpath fill='%23ff3400' d='M457.6 512.7c-14-28.8-47.4-43.2-70.6-64.3 2.5 2 5.1 3.9 7.6 5.9-46-35.9-86.1-78.7-121.9-124.6-14.5-19-28.4-38.4-41.8-58.2 10.5-10.5 21-21.1 31.4-31.7 37.3-37.8 73.8-76.6 105.1-119.6-1.7 2.3-3.5 4.5-5.2 6.8 6.2-7.9 11.9-16.2 17.2-24.7 0 0 0 0 0 .1 6.7-12.8 17.9-26.6 15.6-41.7-.5-20.3-23.1-32.8-40.8-23.3-17.5 9-26.4 29.3-40.1 43-25 30-52.4 57.9-80.1 85.5-14.7 14.6-29.7 28.9-44.6 43.4-23.6-34.2-47.6-68.1-69.6-103.4C95.8 74.2 84.7 32.7 55.6 5.5 37-11.3 18.2 12.3 21.8 31.9c.2 23.5 13.3 45 22.1 66.4-.2-.5-.5-1.1-.7-1.6 101.4 211 134 110.7 20.8 243.8-22.6 33.6-84.6 93-56.2 134.4 48.1 48.9 74.6-35 98.5-65.4 22.3-31.1 48.3-59.2 74.6-86.9 34 50.7 71 99.8 114.2 143.1 29.8 30.5 160.2 148.9 162.6 47Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.formin, .buttons, .logos, .coltitle, #colorbord{ mix-blend-mode:multiply; }

#colorblocks{
	display:inline-block;
	position:relative;
	width:fit-content;
	text-align:left;
	margin:0;
	vertical-align:top;
}

#colorbord{
	border-radius:.3rem;
	border:.15em solid #43484f;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	box-sizing:border-box;
}

.coltitle{
	background:#43484f;
	color:#fff;
	padding:.5em .5em .35em;
	box-sizing:border-box;
	display:inline-block;
	margin:0 auto .4rem 0;
	border-radius:.3rem .3rem 0 0;
	font-weight:bold;
	letter-spacing:.01em;
	text-align:left;
}

.formcolor{
	width:3em;
	height:4.5em;
	position:relative;
	z-index:100;
	margin:0 .15em -2.5em;
	display:inline-block;
	left:.38em;
	cursor:pointer;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

.formcolor:after{
	width:120%;
	height:.65em;
	left:-10%;
	too:0;
	background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 70%, rgba(0,0,0,.4) 100%);
	content:"";
	position:absolute;
}

.formcolor:before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	top:0;
	left:0;
	box-shadow:inset 0 0 1em rgba(0,0,0,.35);
	background:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(0,0,0,0.2) 100%);
}

.stripes{
	width:100%;
	position:absolute;
	height:100%;
	top:0;
	left:0;
	background:url("images/stripes.png") top left / auto auto repeat;
	opacity:.3;
}

.swshadows{
	-webkit-filter:blur(2px);
	filer:blur(3px);
	position:relative;
	left:.37em;
}

.swatchsh{
	position:absolute;
	left:0;
	top:1px;
	width:3em;
	height:4.6em;
	background:rgba(0,0,0,.4);
	filter:blur(4deg);
	transform-origin:top left;
	transform:skewX(-2deg);
	clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

.swatchsh:nth-child(2){ left:calc(3.65em); } 

.hider, .clr-field{
	height:0;
	width:3em;
	line-height:0;
	margin:0 auto 0 0;
	padding:0;
	position:absolute;
}

.buttons{
	display:inline-block;
    text-align:left;
    margin:0 0 0 auto;
    width:40%;
	vertical-align:top;
}

#mcbody{ fill:#bd692a; }
#botColor2{ background:#bd692a; }
#mcpack{ fill:#58693e; }
#packColor2{ background:#58693e; }

/* D83#sl10a*xNM */

#deegin{
	width:300px;
	height:395px;
	position:relative;
	margin:0 -40px 0 -102px;
	bottom:-157px;
}

#deegin .outlines, #deegin .color{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

#deegin .outlines img, #deegin .color svg{
	width:100%;
	height:auto;
}

#loginbutton{
	position:absolute;
	z-index:100;
	color:#fff;
	top:50%;
	transform:translateY(-45%);
	left:0;
	font-family:'jackpot';
	text-align:center;
	font-size:3.5em;
	width:100%;
	text-indent:-.6em;
	text-transform:uppercase;
	line-height:1;
	/*text-shadow:-2px -3px 2px rgba(0,0,0,.65), 2px 3px 2px rgba(255,255,255,.25);*/
	text-shadow:2px 3px 1px rgba(0,0,0,.65);
	transition:.5s color;
	cursor:pointer;
	box-sizing:border-box;
	padding:.26em 0;
}

#loginbutton:hover{ color:#eb752b; }

#formmessage{
	background:#fff;
	padding:1em;
	border-radius:50%;
	text-align:center;
	position:absolute;
	bottom:100%;
	transform-origin:60% calc(100% + .7em);
	left:0;
	width:100%;
	max-width:7em;
	line-height:1;
	z-index:1000;
	margin:0 auto;
	color:#000;
	box-sizing:border-box;
	font-family:'jackpot';
	font-size:1.5em;
	box-shadow:.08em .1em .35em rgba(0,0,0,0.65);
	opacity:0;
	transform:scale(.1);
}

#formmessage:after{
	position:absolute;
	bottom:-.7em;
	left:60%;
	width:.6em;
	height:1em;
	content:"";
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E %3E%3Cg fill='%23fff'%3E%3Cpath d='M0,0L50 100 100 0' /%3E%3C/g%3E%3C/svg%3E") top center / 100% 100% no-repeat;
	transform:rotate(-13deg);
}

.dots{
	display:inline-block;
	margin:0 .04em;
	animation-duration:1s; 
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-name:dots;
}

.dB{ animation-delay:.3s; }
.dC{ animation-delay:.6s; }

@keyframes dots { 
  0%{ opacity:1; } 
  50%{ opacity:0; }
  100%{ opacity:1; }
}

/******************* Main Stuff ****************/

#shade{
    box-shadow:inset 0 0 20vw rgba(25,163,240,1);
    width:100%;
	height:100%;
    top:0;
    left:0;
    position:fixed;
    z-index:-1;
}

#toucharea{
    position:absolute;
    width:100%;
    height:100%;
    z-index:105;
    margin:0;
    left:0;
    top:0;
    overflow:hidden;
    pointer-events:none;
}

/************** Bots *****************/

.bot{
	position:absolute;
	left:-200px;
	top:-200px;
	cursor:pointer;
}

.bname{
	width:auto;
	height:auto;
	white-space:nowrap;
	position:absolute;
    top:-1.5em;
    left:50%;
	color:rgba(255,255,255,.7);
	transform:translateX(-50%);
    font-size:1em;
	opacity:0;
	transition:.5s opacity;
}

.pop{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:url("images/blip.svg") center / 100% auto no-repeat;
	display:none;
}

/********************* Scroll Bar **********************/

::-webkit-scrollbar {
  width:7px;
}

/* Track */
::-webkit-scrollbar-track {
    
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:#919f93;
  transition:.5s background;
  border-radius:6px;
  border:2px solid #000;
}

/**************** Inventory Bar ***************/

#inv{
	width:auto;
    z-index:105;
	max-width:10em;
	bottom:3em;
	right:5.8em;
	position:absolute;
	opacity:0;
	transform:scale(.1);
	transform-origin:bottom right;
	display:none;
}

#invbar{
    box-sizing:border-box;
	width:auto;
	max-width:100%;
    line-height:1;
	padding:1em;
	border-radius:1.5em;
	background:white;
}

#invbar:after{
	position:absolute;
	bottom:-.45em;
	right:-.55em;
	width:1.5em;
	height:1.4em;
	content:"";
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E %3E%3Cg fill='%23fff'%3E%3Cpath d='M0,0L45 0 100 100 0 55' /%3E%3C/g%3E%3C/svg%3E") top center / 100% 100% no-repeat;
}

#backpackbar{
	width:40%;
	max-width:8em;
	height:5.35em;
	position:absolute;
	line-height:1;
	bottom:0;
	right:-1em;
	z-index:104;
	cursor:pointer;
}

#backpack{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	top:0;
	left:0;
	z-index:1;
}

#backpackbar img, #backpackbar svg{
	position:absolute;
	bottom:0;
	left:0;
	width:300%;
}

.bphovering img, .bphovering svg{
	animation-duration:.25s;
	animation-timing-function:step-end;
	animation-name:closeb;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

.bphovered img, .bphovered svg{
	left:-200% !important;
	animation:none;
}

@media (hover:hover){ #backpackbar:hover .bphovering img, #backpackbar:hover .bphovering svg{ animation-name:openb; } }

@keyframes openb{
	0%{ left:0%; }
	33%{ left:-100%; }
	66%{ left:-200%; }
	100%{ left:-200%; }
}

@keyframes closeb{
	0%{ left:-200%; }
	33%{ left:-200%; }
	66%{ left:-100%; }
	100%{ left:0%; }
}

#closeinv{
	position:absolute;
	top:-.35em;
	right:-.35em;
	width:1.5em;
	height:1.5em;
	cursor:pointer;
	background:#eb752b;
	line-height:1;
	padding:.35em .2em 0;
	box-shadow:.04em .05em .075em rgba(0,0,0,0.5);
	border-radius:1em;
	text-align:center;
	box-sizing:border-box;
	z-index:100;
	transition:.5s background;
}

#closeinv:hover{ background:#000 !important; }

#closeinv svg{
	position:relative;
	width:.75em;
	height:auto;
	fill:#fff;
	margin:0 auto;
}

.sec{
    padding:.25em;
    box-sizing:border-box;
}

.invbutton{
    width:1.5rem;
    height:1.5rem;
    background:#4975A1;
    display:inline-block;
	box-sizing:border-box;
    margin:0 .05rem;
    border-radius:.15rem;
    transition:.5s background;
    cursor:pointer;
    color:#fff;
    text-align:center;
    font-size:2.2rem;
    line-height:0;
}

.invbutton:hover{ background:#123; }

.item{
	font-size:1.2rem;
	width:1.5em;
	display:inline-block;
	vertical-align:middle;
	background:blue;
	color:#fff;
	box-sizing:border-box;
	margin:0 .2em;
	line-height:1.2;
	text-align:center;
	padding:.2em;
}

#debug{
	position:fixed;
	line-height:1.2;
	font-size:12px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	display:block;
	box-sizing:border-box;
	width:auto;
	top:0;
	left:0;
	background:rgba(255,255,255,.4);
	padding:.5em;
}

#kjstore{
	position:fixed;
	width:100%;
	height:100%;
	box-sizing:border-box;
	top:0;
	left:0;
	z-index:130;
	padding:2em;
	line-height:1;
	background:rgba(0,0,0,0.8);
	display:none;
	opacity:0;
}

#kjback{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	cursor:pointer;
}

#kwikistore{
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:1em 1.5em;
	background:#fff;
	border-radius:.5em;
	box-shadow:.1em .12em .35em rgba(0,0,0,.5);
	transform:scale(.1);
	opacity:0;
	position:relative;
	z-index:5;
	margin:0 auto;
	max-width:500px;
}

/**************** Touch Area *******************/

#touchpad{
    width:160px;
    height:160px;
    background:url("images/dpad.svg") center / contain no-repeat;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    -webkit-mask:url("images/dpad.svg") center / contain no-repeat;
    mask:url("images/dpad.svg") center / contain no-repeat;
}

#touchplace{
    position:absolute;
    transform:scale(.2);
    opacity:0;
    top:0;
    left:0;
    width:70px;
    height:70px;
    border-radius:100px;
    background:radial-gradient(rgba(45,125,187,.6) 20%, rgba(45,125,187,0) 100%);
    z-index:-1;
}

/**************** Resizing *********************/

@media all and (max-width:640px){
	#boxmover{
		top:0;
		transform:none;
	}
	.boxout{ padding:2em 10% 0; }
	#deegin{
		bottom:0;
		width:10rem;
		height:4.5rem;
	}
	.blocker{ display:none; }
	.logo{ width:47%; }
	.copy{ padding:calc((640px - 100%) * .1 + 2.5rem) 1rem 1.5rem; }
	#loginbutton{ 
		font-size:2.2em;
		text-indent:-.45em;
		top:100%;
		transform:translateY(.1em);
	}
	#formmessage{ 
		font-size:1.2em;
		left:-20%;
	}
}

@media all and (max-width:500px){
	.boxout{
		padding-left:0;
		padding-right:0;
	}
	.box{ width:calc(100% - 4rem); }
	.copy{ padding:calc((640px - 100%) * .1 + 2rem) 1rem 1.5rem; }
}

@media all and (max-width:380px){
	#colorblocks, .coltitle{ width:100%; }
	.buttons{
		margin-top:.35rem;
		width:100%;
		text-align:right; 
	}
}

@media all and (max-width:380px) and (max-height:690px){
	.boxin{ font-size:4vw; }
}

@media all and (max-aspect-ratio:0.8732970027/1){
	#boxmover{
		top:50% !important;
		transform:translateY(-50%) !important;
	}
}

@media all and (min-aspect-ratio:1.3417721519/1) and (max-width:970px){
	#boxmover{
		top:0 !important;
		transform:none !important;
	}
}