:root {
	--bg-color: #080e14;
	--wrapper-bg: #2e1d1d;
	--builder-light: #8b6363;
	--builder-dark: #835959;
	--outline: #ffffff;
}

body {
	background: var(--bg-color);
	margin:0;
	margin-top: 10px;
	overflow: overlay;
}

#dressup-wrapper img { 
  -webkit-user-drag: none; 
  -khtml-user-drag: none; 
  -moz-user-drag: none; 
  -o-user-drag: none; 
  user-drag: none; 
}

.char_object {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

#dressup-wrapper button {
    background: transparent;
    border: 0;
}

#dressup-wrapper {
	background-color: var(--wrapper-bg);
    border: 4px var(--outline) solid;	
	display:flex;
	flex-direction:column;
	padding: 1em;
    justify-content: center;
    width: fit-content;
    margin: auto;
	border-radius: 10px;
}

#dressup-wrapper > div {
	margin: 1em;
}

#dressup-wrapper img {image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: optimize-contrast;image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor;}

#character-wrapper {
	width: 600px;
	height: 600px;
	margin:auto;
	background-image: url('img/bg.png');
    border: 4px var(--outline) solid;	
	border-radius: 5px;
}

#character-wrapper img {
	position: absolute;
}

.options {
	position:relative;
	display:flex;
	flex-direction: row;
    justify-content: space-between;
}

.options label {
    border: 4px var(--outline) solid;	
	border-radius: 5px;
}

.options label img {
	height: 75px;
	width: 75px;
	cursor: pointer;
}

.light.options label {
    background: var(--builder-light);
}

.dark.options label {
    background: var(--builder-dark);
}

.order-1 {
	order: 1;
}

.order-2 {
	order: 2;
}

.order-3 {
	order: 3;
}

.arrow {
  border: solid white;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 4px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.hidden {
	display:none;
}

#character-builder input {appearance:none; display:none;}

@media (min-width: 900px) {
	
	#dressup-wrapper {
		flex-direction:row;
	}
	
	.options {
		flex-direction: column;
	}
		
	.order-1-r {
		order: 1;
	}
	
	.order-2-r {
		order: 2;
	}
	
	.hidden-r {
		display: none;
	}
}

/*Clothing on image*/

.sword-front {z-index:100; display:none;} #sword:checked ~ #character-wrapper .sword-front {display: block;}
.sword-front {opacity:0;} #belt:checked ~ #character-wrapper .sword-front {opacity:1}

.scarf-hair-down {z-index:95; display:none;} #scarf:checked ~ #character-wrapper .scarf-hair-down {display: block;}
.scarf-hair-up {z-index:95; display:none;} #scarf:checked ~ #character-wrapper .scarf-hair-up {display: block;}

.scarf-hair-down {opacity:1;} #hair-accessory:checked ~ #character-wrapper .scarf-hair-down {opacity:0}
.scarf-hair-up {opacity:0;} #hair-accessory:checked ~ #character-wrapper .scarf-hair-up {opacity:1}


.hair-front-down {z-index:90; display:block;} #hair-accessory:checked ~ #character-wrapper .hair-front-down {display: none;}
.hair-front-up {z-index:90; display:none;} #hair-accessory:checked ~ #character-wrapper .hair-front-up {display: block;}



.mask {z-index:85; display:none;} #mask:checked ~ #character-wrapper .mask {display: block;}
.belt {z-index:85; display:none;} #belt:checked ~ #character-wrapper .belt {display: block;}


.overshirt-belt {z-index:80; display:none;} #overshirt:checked ~ #character-wrapper .overshirt-belt {display: block;}
.overshirt-open {z-index:80; display:none;} #overshirt:checked ~ #character-wrapper .overshirt-open {display: block;}

.overshirt-belt {opacity:0;} #belt:checked ~ #character-wrapper .overshirt-belt {opacity:1}
.overshirt-open {opacity:1;} #belt:checked ~ #character-wrapper .overshirt-open {opacity:0}


.gloves {z-index:75; display:none;} #gloves:checked ~ #character-wrapper .gloves {display: block;}

.shirt-bunched {z-index:70; display:none;} #shirt:checked ~ #character-wrapper .shirt-bunched {display: block;}
.shirt {z-index:70; display:none;} #shirt:checked ~ #character-wrapper .shirt {display: block;}

.shirt-bunched {opacity:0;} #gloves:checked ~ #character-wrapper .shirt-bunched {opacity:1}
.shirt {opacity:1;} #gloves:checked ~ #character-wrapper .shirt {opacity:0}


.boots {z-index:65; display:none;} #boots:checked ~ #character-wrapper .boots {display: block;}

.pants-bunched {z-index:60; display:none;} #pants:checked ~ #character-wrapper .pants-bunched {display: block;}
.pants-down {z-index:60; display:none;} #pants:checked ~ #character-wrapper .pants-down {display: block;}

.pants-bunched {opacity:0;} #boots:checked ~ #character-wrapper .pants-bunched {opacity:1}
.pants-down {opacity:1;} #boots:checked ~ #character-wrapper .pants-down {opacity:0}


.bandages {z-index:55; display:none;} #bandages:checked ~ #character-wrapper .bandages {display: block;}
.earrings {z-index:55; display:none;} #earrings:checked ~ #character-wrapper .earrings {display: block;}
.body {z-index:50; display:block;}

.hair-back-down {z-index:45; display:block;} #hair-accessory:checked ~ #character-wrapper .hair-back-down {display: none;}
.hair-back-up {z-index:45; display:none;} #hair-accessory:checked ~ #character-wrapper .hair-back-up {display: block;}

.sword-back {z-index:40; display:none;} #sword:checked ~ #character-wrapper .sword-back {display: block;}
.sword-back {opacity:0;} #belt:checked ~ #character-wrapper .sword-back {opacity:1}

.bg {z-index:5; display:block;}