.skin_button {
	position: absolute;
	transform: translateY(-40%);
	top: 40%;
	background: transparent;
	image-rendering: crisp-edges;
	border: 0;
	cursor: pointer;
	outline: none;
	z-index: 100;
}

.skin_button--left {
	left: 50px;
}

.skin_button--left:active {
	left: 45px;
}

.skin_button--right {
	right: 50px;
}

.skin_button--right:active {
	right: 45px;
}

.tapped--left {
	left: 45px;
}

.tapped--right {
	right: 45px;
}
.skin_button img {
	width: 30px;
	image-rendering: pixelated;
}

.skin_nav {
	display: flex;
	position: absolute;
	top: 100%;
	transform: translateY(-50%);
	left: 30%;
	justify-content: center;
	padding: 10px 0;
	image-rendering: pixelated;
}

.skin_nav img {
	width: 30px;
	image-rendering: pixelated;
}

.skin_nav img:active {
	filter: brightness(0);
	image-rendering: pixelated;
}

.skinSubmitBtn {
	position: absolute;
	top: 130%;
	transform: translateY(-50%);
	left: 33%;
	width: 100px;
	height: 40px;
	margin: 0 5px;
	font-family: 'Press Start 2P', bold;
	font-size: 12px;
	font-weight: 300;
	color: #000000;
	background-color: #ffffff;
	box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
	transition: 0.1s;
	text-shadow: 0px 2px rgba(0, 0, 0, 0.2);
	appearance: none;
	outline: none;
	margin: 0;
	cursor: pointer;
	padding: 3px 3px;
	border-radius: 8px;
	image-rendering: pixelated;
}

.skinSubmitBtn:active {
	color: dimgray;
	outline: 2px solid whitesmoke;
	width: 95px;
	height: 35px;
	box-shadow: inset 0 -100px 0 0 rgba(0, 0, 0, 0.2);
}

#white {
	position: absolute;
	top: 50%;
	left: 44.4%;
	transform: scale(1.3);
	width: 32px;
	height: 32px;
	overflow: hidden;
	background-image: url('https://raw.githubusercontent.com/AFShiva/Project-X/main/images/CCreator/skintypes/whitewalker.png');
	image-rendering: pixelated;
}

#pale {
	position: absolute;
	top: 50%;
	left: 44.4%;
	transform: scale(1.3);
	width: 32px;
	height: 32px;
	overflow: hidden;
	background-image: url('https://raw.githubusercontent.com/AFShiva/Project-X/main/images/CCreator/skintypes/palewalker.png');
	image-rendering: pixelated;
}

#brown {
	position: absolute;
	top: 50%;
	left: 44.4%;
	transform: scale(1.3);
	width: 32px;
	height: 32px;
	overflow: hidden;
	background-image: url('https://raw.githubusercontent.com/AFShiva/Project-X/main/images/CCreator/skintypes/brownwalker.png');
	image-rendering: pixelated;
}

#dark {
	position: absolute;
	top: 50%;
	left: 44.4%;
	transform: scale(1.3);
	width: 32px;
	height: 32px;
	overflow: hidden;
	background-image: url('https://raw.githubusercontent.com/AFShiva/Project-X/main/images/CCreator/skintypes/darkwalker.png');
	image-rendering: pixelated;
}

.darkfix {
	background-image: url('https://raw.githubusercontent.com/AFShiva/Project-X/main/images/CCreator/skintypes/darkwalkerfix.png');
	image-rendering: pixelated;
}

.whitebutton {
	width: 40px;
	height: 40px;
	margin: 0 5px;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	image-rendering: pixelated;
}

.palebutton {
	width: 40px;
	height: 40px;
	margin: 0 5px;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	image-rendering: pixelated;
}
.tanbutton {
	width: 40px;
	height: 40px;
	margin: 0 5px;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	image-rendering: pixelated;
}
.darkbutton {
	width: 40px;
	height: 40px;
	margin: 0 5px;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	image-rendering: pixelated;
}