:root {
	--bg-color: #080e14;
	--sidebar-background-color: #2e1d1d;
	--wrapper-bg: #2e1d1d;
	--builder-light: #8b6363;
	--builder-dark: #835959;
  --border: 1px solid #ffffff;
  --border-radius: 8px;
   --sidebar-width: 268px;
   --margin: 10px;
}


.layout {
margin-left: 35px;
    position: absolute;
  top: 15 px;
  width: 1300px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "leftSidebar main" auto "footer footer" auto / var(--sidebar-width) auto;
}



#dressup-wrapper main {
  background: var(--bg-color);
	margin:0;
	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 {
  height: 520px;
  -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: var(--border);	
	display:flex;
	flex-direction:column;
	padding: 1em;
    justify-content: center;
    width: fit-content;
    margin: var(--margin);
	  border-radius: var(--border-radius);
}

#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;}

/* MUST KEEP CHARACTER WRAPPER SIZE SAME AS IMAGE SIZES OR IT DISPLAYS WEIRD*/
#character-wrapper {
  grid-area: main;
	width: 520px;
	height: 520px;
	margin: auto;
	background-image: url('img/bg.png');
    border: var(--border);	
  border-radius: var(--border-radius);
}

#character-wrapper img {
	position: absolute;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
aside {
  grid-area: aside;
 border: var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
   margin: var(--margin);
 background: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
  height: fit-content;
}


.left-sidebar {
  grid-area: leftSidebar;

}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}
  
/* -------------------------------------------------------- */

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

.options label {
    border:var(--border);	
	  border-radius: var(--border-radius);
}

.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 TIME */
	
	/* element breakdown: we don't need to worry about front vs back because i'm not doing both sides for all four of the characters. z-index has to do with the before-behind thing which i'm not 100% sure i need either, i guess we'll see. display: none lets you toggle hidden and shown.*/
	
	.makeup { z-index: 90; display: none;} #makeup:checked ~ #character-wrapper .makeup {display: block;}
	
	.barefeet {z-index: 10; display: block;} #slippers:checked ~ #character-wrapper .barefeet {display: none;}
	.slippers {z-index:15; display: none;} #slippers:checked ~ #character-wrapper .slippers {display: block;}
	
	.dress {z-index: 80; display: none;} #dress:checked ~ #character-wrapper .dress {display: block;}
	
	.jewelry {z-index: 85; display: none;} #jewelry:checked ~ #character-wrapper .jewelry {display: block;}
	
	.cap {z-index: 60; display: none;} #cap:checked ~ #character-wrapper .cap {display: block;}
	
	.body {z-index:20; display:block; }
	
.bg {z-index: 5; display: block;}