:root {
	color-scheme: dark;
	color: white;
}
* {
    box-sizing: border-box;
	color: white;
}
@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-color: #07070777 #fff2;
		scrollbar-width: thin;
	}
}
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
	user-select: none;
	background: repeating-linear-gradient(
		45deg,
		#171717 0px,
		#171717 20px,
		#111 20px,
		#111 40px
	);
}
#v {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	color: white;
	font-family: Helvetica;
}
#border {
	position: relative;
	padding: 0.2em;
	width: calc(480px + 0.4em);
	height: calc(480px + 0.4em);
	border-radius: 0.4em;
}
#gamewin {
	position: relative;
	width: 480px;
	height: 480px;
	border-radius: 0.2em;
	overflow: hidden;
}
#p5_loading {
	color: white;
	width: 100%;
	height: 100%;
	text-align: center;
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.reset-menu-btn {
	width: 50% !important;
	padding-top: 15px !important;
	/* margin-bottom: 10px; */
}

.reset-menu-btn > span {
	padding-bottom: 10px;
}

.flashdiv {
	position: relative;
	display: flex;
	flex-direction: column;
	white-space: pre-wrap;
	overflow: hidden;
}
.flashdiv:not(.stylent) {
	border-radius: 10px;
    box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(255,255,255,0.25), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.5);
	background: repeating-linear-gradient(
		45deg,
		#070707bb 0px,
		#070707bb 20px,
		#070707cc 20px,
		#070707cc 40px
	);
	border: 1px solid #070707bb;
	filter: drop-shadow(0 0 3px #07070777);
	padding: 12px;
}
.flashdiv div {
	border-radius: 5px;
	box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(0,0,0,0.5), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.5);
	padding: 5px;
    overflow-y: scroll;
    flex: 1;
    overflow-x: hidden;
	white-space: pre-wrap;
}
.flashdiv button, .flashdiv .upload {
	cursor: pointer;
}
.flashdiv button, .flashdiv .upload, .flashdiv input[type=text], .flashdiv input[type=password], .flashdiv input[type=range] {
    box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(255,255,255,0.25), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.5);
	border: 1px solid #070707bb;
	filter: drop-shadow(0 0 3px #07070777);
	background: #fff1;
	padding: 4px 8px;
	border-radius: 5px;
	width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.flashdiv button.flexbtn, .flashdiv .upload.flexbtn {
    justify-content: space-between;
}
.flashdiv button:hover, .flashdiv .upload:hover, .flashdiv button:focus-visible, .flashdiv .upload:focus-visible, .flashdiv input[type=text]:focus-visible, .flashdiv input[type=password]:focus-visible {
	background: #ffffff17;
	outline: none;
} 
.flashdiv input[type=text], .flashdiv input[type=password], #border {
	box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(0,0,0,0.5), inset -0.2em -0.2em 0.1em 0 rgba(255,255,255,0.25);
}
.flashdiv button:active, .flashdiv .upload:active, .flashdiv input[type=text]:active, .flashdiv input[type=password]:active {
	box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(0,0,0,0.5), inset -0.2em -0.2em 0.1em 0 rgba(255,255,255,0.25);
	background: #ffffff07;
}
.flashdiv button:disabled, .flashdiv .upload:disabled, .flashdiv input[type=text]:disabled, .flashdiv input[type=password]:disabled {
	color: #fff7;
	box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(255,255,255,0.25), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.55);
	background: #ffffff07;
	cursor: default;
}
.flashdiv hr {
	border: 1px solid #fff3;
}
.flashdiv button * {
	pointer-events: none;
}
.flashdiv input[type=checkbox] {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
.flashdiv input[type=range] {
	appearance: none;
	height: 10px;
	padding: 0px;
	width: unset;
	display: inline;
}
.flashdiv input[type=range]::-webkit-slider-thumb, .flashdiv input[type=range]::-moz-range-thumb {
	box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(255,255,255,0.25), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.5);
	border: 1px solid #070707bb;
	filter: drop-shadow(0 0 3px #07070777);
	background: #333;
	appearance: none;
	width: 20px;
	height: 20px;
	cursor: pointer;
	border-radius: 5px;
}

input[type=checkbox] {
	box-shadow: inset 0.3em 0.3em 0.15em 0 rgba(0,0,0,0.25), inset -0.3em -0.3em 0.15em 0 rgba(255,255,255,0.25);
}
input[type=checkbox]:checked {
	accent-color: #bbb;
}
h1,h2,h3,h4,h5,h6,p {
	filter: drop-shadow(0 0 3px #07070777);
	text-shadow: -1px -1px 0 #07070777, 1px -1px 0 #07070777, -1px 1px 0 #07070777, 1px 1px 0 #07070777;
	font-weight: normal;
	margin-block-start: 0px;
	margin-block-end: 10px;
}
/* width */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #07070777; 
    border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #fff2; 
    border-radius: 5px;
    box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(255,255,255,0.25), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.5);
}
/* width */
::-moz-scrollbar {
    width: 12px;
}

/* Track */
::-moz-scrollbar-track {
    background: #07070777; 
    border-radius: 5px;
}
 
/* Handle */
::-moz-scrollbar-thumb {
    background: #fff2; 
    border-radius: 5px;
    box-shadow: inset 0.2em 0.2em 0.1em 0 rgba(255,255,255,0.25), inset -0.2em -0.2em 0.1em 0 rgba(0,0,0,0.5);
}

.flashdiv .upload > input[type="file"] {
	display: none;
}