/* HTML */

html, body {
	margin: 0;
	padding: 0;

	background: #24415c;
}

.hide {
	display: none;
}

@font-face {
	font-family: slb; /* The font is called super legend boy */
	src: url(slb.ttf);
}

* {
	font-family: slb;
	/*-webkit-font-smoothing: none;*/
}

/* TITLE */

.titlewrap {
	padding: 10px;
	border-bottom: 1px solid #DEC69C;

	text-align: center;
}

.title {
	color: #DEC69C;
	font-size: 35px;
}

.description {
	color: #A55AFF;
	font-size: 20px;
}

.smalltxt {
	color: #A55AFF;
	font-size: 12px;
}

/* outer wrap babe */
.outerwrap {
	display: flex;
	text-align: center;
	justify-content: center;
}

/* MAMA DIV - the div that contains gb and settings */

.mama {
	display: flex;
	margin: 0 auto;
}

.spread {
	margin: 10px;
	padding: 10px;
}

/* GAMEBOY WRAP */

.gbwrap {
	padding: 30px 25px 40px 25px;

	flex: 50%;
	float: left;

	user-select: none;

	border: 1px solid #A55AFF;
	border-radius: 10px 10px 30px 5px; /* 8 8 24 8 */
}

/* --- */

.gbtop {
	text-align: center;
}

.gbbottom {
	margin: 0;
	padding: 0;

	display: inline-block;
	text-align: center;
}

.gbgap {
	padding: 30px;
}

/* SETTINGS WRAP */

.setwrap {
	padding: 0px 25px 40px 25px;

	width: 320px;
	height: 480px;

	text-align: center;

	flex: 50%;
	float: left;

	border: 1px solid #A55AFF;
	border-radius: 10px 10px 30px 5px; /* 8 8 24 8 */
}

/* text options */
.subtit {
	/* titties lol */
	color: #A55AFF;
	font-size: 16px;
}

.smalltext {
	/* titties lol */
	color: #A55AFF;
	font-size: 11px;
}

/* BUTTONS */

.roundbutton, .filebutton, .smallbutton, .bigbutton {
	margin: 0 auto;
	position: relative;
	display: block;

	height: 20px;

	top: 0;

	user-select: none;

	padding: 10px;
	line-height: 20px;

	text-align: center;
	color: #DEC69C;

	transition: 0.07s linear top;

	background: none;
	border: 1px solid #A55AFF;
	border-radius: 2px;
}
.roundbutton:active, .filebutton:active, .smallbutton:active, .bigbutton:active {
	background-color: #942994;
	border: 1px solid white;
	color: white;
	top: 5px;
}

.roundbutton {
	display: inline-block;

	/* Image properties */
	background-image: url();
	background-position: center;
	background-size: 20px;
	background-repeat: no-repeat;

	width: 25px;
	height: 25px;

	line-height: 30px;

	border-radius: 100%;
}

.smallbutton {
	display: inline-block;

	width: 60px;
	height: 15px;

	font-size: 12px;

	line-height: 15px;
}

.bigbutton {
	display: inline-block;

	width: 160px;
	height: 15px;

	font-size: 14px;

	line-height: 15px;
}

/* RANGE */

.range {
	-webkit-appearance: none;
	appearance: none;

	user-select: none;

	width: 250px;
	height: 14px;

	border: 1px solid #A55AFF;
	border-radius: 10px;

	background: none;
}
.range:active {
	background: #942994;
	border: 1px solid white;
}

.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;

	width: 18px;
	height: 18px;

	border-radius: 4px;

	background: #DEC69C;
}
.range::-moz-slider-thumb {
	-webkit-appearance: none;
	appearance: none;

	width: 18px;
	height: 18px;

	border-radius: 4px;

	background: #DEC69C;
}


/* GAMEBOY */

.screenwrap {
	padding: 12px;
	height: 320px;

	border: 1px solid #942994;
	border-radius: 8px 8px 24px 8px;
}

.screencontainer {
	margin: 0;
	padding: 0;

	position: relative;
}

.screen {
	position: relative;

	display: inline-block;
	width: 320px;

	image-rendering: pixelated;
	-webkit-image-rendering: pixelated;
	-moz-image-rendering: pixelated;

	background: none;

	border: 1px solid #A55AFF;
	border-radius: 2px; /* 8px */
}

.status_text {
	position: absolute;

	padding: 8px;

	/*font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;*/

	/* Style */
	color: #f7bef7;
	font-size: 16px;
	text-shadow: -1.5px 0 black, 0 1.5px black, 1px 0 black, 0 -1.5px black;

	bottom: 0;
	left: 0;
}

.center_flex_div {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	justify-content: center;
	align-items: center;
	height: 30px;
}

.gb_logo {
	position: absolute;
	display: inline;
	width: 100px;

	user-select: none;
}

/* FOOTER */

.footwrap {
	padding: 4px;
	border-top: 1px solid #DEC69C;

	text-align: center;
}

.foottitle {
	color: #A55AFF;
	font-size: 18px;
}

.footsrc {
	display: inline;
	font-size: 15px;

	padding: 10px;

	border: 1px solid #942994;
	border-radius: 2px;
	color: #A55AFF;

	user-select: none;
}
.footsrc:active {
	border: 1px solid white;
	background: #942994;
	color: white;
}

.hidehref {
	color: inherit;
    text-decoration: none;
}

/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #003973;
  border-left: 1px solid #A55AFF;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #A55AFF;
  border-left: 1px solid #A55AFF;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #942994;
}