body {
	background-color: #FFBFEA;
	color: #E305AF;
}

header {
	background-color: #E305AF;
	color: #34E4FF;
	padding: 5px;
	border: 2px solid white;
	border-radius: 25px;
	text-align: center;
	text-shadow: 0px 0px 5px white;
	font-family: Allura, cursive;
	font-size: 35px;
}
header h1 {
	padding: 0;
	margin: 0;
}

nav {
	width: 50%;
	border: 1px dotted green;
	border-radius: 20px;
	border-width: 3px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
	background-color: #ADFFB9;
	font-family: "Ink Free", sans-serif;
	height: 30px;
}

nav a {
	text-decoration: none;
	margin-top: 50px;
}

nav a:link {
	color: #E305AF;
} 

nav a:visited {
	color: #E305AF;
}

nav a:hover {
	color: white;
}

nav a:active {
	color: white;
}

#navflex div a {
	position: relative;
	margin: 30px 25px 25px 25px;
	padding-top: 5px;
}
main p {
	padding:5px;
	
}

footer {
	color: #E305AF;
	text-shadow: 1px 1px 1px white;
	margin-top: 35px;
	background-image: url("https://media.giphy.com/media/7W6Op1OqVBi0mnivIl/giphy.gif");
	background-repeat: repeat;
}

#homewrap {
	display: grid;
	grid-template:
		"header header" 100px
		"nav nav" 50px
		"main aside" auto
		"footer footer" auto
		/ 50% 50%;
}
#homewrap header {
	grid-area: header;
}
#homewrap nav {
	grid-area: nav;
}
#homewrap main {
	grid-area: main;
}
#homewrap aside {
	grid-area: aside;
	margin: 15px;
	height: auto;
}
#homewrap footer {
	grid-area: footer;
}

#homewrap2 {
	display: grid;
	grid-template:
		"header header" 100px
		"nav nav" 50px
		"main main" auto
		"footer footer" auto
		/ 50% 50%;
}
#homewrap2 header {
	grid-area: header;
}
#homewrap2 nav {
	grid-area: nav;
}
#homewrap2 main {
	grid-area: main;
}
#homewrap2 footer {
	grid-area: footer;
}


#slideshow {
	width: 500px;
	height: 500px;
	margin: 5px;
}
#slideshow img {
	position: absolute;
}
#slideshow img:nth-of-type(1) {
	animation-name: fader;
	animation-delay: 4s;
	animation-duration: 1s;
	z-index: 20;
}
#slideshow img:nth-of-type(2) {
	z-index: 10;
}

@keyframes fader {
	from {opacity: 1.0;}
	to {opacity: 0.0;}
}

#navflex {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#navflex div {
	background-image: radial-gradient(#ADFFB9, #FFEF94, #FFBFEA);
	list-style-type: none;
	display: inline;
	
	border: 3px solid #827AD3;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 20px;
	
}

#game {
	border: 3px solid #E305AF;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #34E4FF;
	display: flex;
	
	
	/*
	display: grid;
	grid-template:
		"menu stage closet clorack" 40%
		"menu stage closet clorack" 30%
		"menu stage closet clorack" 30%
		/ 200px 450px 100% 100px;
		
	*/
}

#menu {
	grid-area: menu;
	display: grid;
	grid-template:
	"toolbox" 45%
	
	"stickers" 25%
	"bgs" 30%
	/ 100%;
	flex-grow: 0;
	width: 200px;
}
#menu input {
	background-color: #FFEF94;
	border-color: #E305AF;
	color: #E305AF;
	border-radius: 10px;
}

#toolbox {
	grid-area: toolbox;
	background-color: #827AD3;
	text-align: center;
	border: solid 2px #E305AF;
	margin: 2px;
	color: #ADFFB9;
}

#toolbox > * {
	margin-top: 10px;
	
}

#preColour {
	background-color: black;
}

#stickers {
	grid-area: stickers;
	background-color: #34E4FF;
	text-align: center;
	
	border: solid 2px #E305AF;
	margin: 2px;
}

#stickers input {
	margin-top: 10px;
	border-radius: 16px;
	background-color: #ADFFB9;
	border-color: #E305AF;
	color: #E305AF;
	border-style: solid;
}

#bgs {
	grid-area: bgs;
	background-color: #ADFFB9;
	text-align: center;
	border: solid 2px #E305AF;
	margin: 2px;
}

#bgs > * {
	margin-top: 10px;
}

#preBG {
	
}

#stage {
	width: 450px;
	height: 600px;
	background-image: url("imgs/bgs/bg1.png");
	grid-area: stage;
	z-index: 1;
	/*flex-grow: 0;*/
}

#stage div {
	position: absolute;
}

#doll {
	width: 450px;
	height: 600px;
	z-index: 5;
	background-image: url("imgs/dolls/doll1.png");
}

#underwear {
	width: 450px;
	height: 600px;
	z-index: 6;
	background-image: url("imgs/under/under1a1.png");
}

/*
#closet {
	flex-grow: 1;
	background-color: blue;
	grid-area: closet;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-basis: 100px;
	flex-shrink: 0;
}
*/

#closet {
	/*flex-grow: 1;*/
	background-color: #34E4FF;
	grid-area: closet;
	width: 500px;
	display: grid;
	grid-template-areas: 
		'clo1 clo2 clo3 clo4 clo5'
		'clo6 clo7 clo8 clo9 clo10'
		'clo11 clo12 clo13 clo14 clo15'
		'clo16 clo17 clo18 clo19 clo20'
		'clo21 clo22 clo23 clo24 clo25'
		'clo26 clo27 clo28 clo29 clo30'
		'clo31 clo32 clo33 clo34 clo35';
		/*
		gap: 10px;
		padding: 10px;
	    */
}

#closetpages {
	width: 100%;
	border: none;
	text-align: center;
}

#closetpages input {
	
}

#clorack {
	background-color: #827AD3;
	grid-area: clorack;
	display: flex;
	flex-direction: column;
	width: 100px;
	flex-grow: 0;
	border: solid 2px #E305AF;
	margin: 2px;
}

#clorack input {
	border-radius: 8px;
	border: border-style: solid;
	border-width: 2px;
}
.clorackButt {
	background-color: #FFBFEA;
	border-color: #827AD3;
	margin-top: 5px;
	color: #E305AF;
	
}
#nextCloset {
	background-color: #FFEF94;
	border-color: #34E4FF;
	color: #34E4FF;
}

#backCloset {
	background-color: #FFEF94;
	border-color: #34E4FF;
	color: #34E4FF;
}

#reorderMenu {
	width: 500px;
	background-color: white;
	color: orange;
	display: none;
	flex-direction: column;
	
}
#reorderMenu input {
	background-color: white;
}


#selecPre {
	width: 50px;
	height: 50px;
	border-color: pink;
	border-radius: 1px;
	border-style: solid;
	background-size: 100px 100px;
	
	
}
#clearType {
	margin-top: 50px;
	border-color: #34E4FF;
	color: #827AD3;
	background-color: #FFEF94;
}

#clearAll {
	margin-top: 5px;
	border-color: #34E4FF;
	color: #827AD3;
	background-color: #FFEF94;
}

.reorderButt {
	background-color: #FFEF94;
	color: orange;
	width: 100px;
	height: 30px;
}
.reorderItem {
	
	text-align: center;
	
}
.reorderItem p {
	background-color: orange;
	color: pink;
	width: 200px;
	
	border-color: pink;
	border-style: dotted;
	padding: 5px;
	margin: 0px;
	height: 25px;
}

/*
#clorack input {
	margin: 3px;
}
*/


/* NOTE ON THUMBNAIL POSITION

tops:
	background-position: 40% 40%;
bottoms:
	background-position: 40% 55%;
*/

/*
TEMPLATE:
.thumbnail {
	width: 75px;
	height: 75px;
	background-color: blue;
	border: 1px solid #FFEF94;
	background-image: url("imgs/bottoms/jirt merged.png");
	background-position: 40% 55%;
}
*/

/*
#clorack div {
	width: 75px;
	height: 75px;
	border-style: solid;
	border-width: thick;
	margin: 5px;
}
*/
.centermain {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  }
.menuIcon {
	display: inline;
	height: auto;
}

.thumbhair {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 50% 22%;
}

.thumbhat {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 40% 20%;
}

.thumbtp {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 40% 40%;
}

.thumbbottom {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 40% 55%;
}

.thumbfull {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 40% 40%;
}

.thumbover {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 40% 40%;
}

.thumbacc {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 40% 50%;
}

.thumbshoe {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 45% 90%;
}

.thumbsock {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 45% 90%;
}

.thumbmakeup {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	
	background-position: 46% 27%;
}
.thumbsticker {
	width: 75px;
	height: 75px;
	background-color: #827AD3;
	border: 1px solid #FFEF94;
	background-repeat: none;
	
	background-position: 46% 35%;
}

.sticker {
	position: absolute;
	height: auto;
	width: auto;
}
.sticker:hover{
	background-image: url("imgs/highlight.png");
	
}

.notsticker {
	width: 450px;
	height: 600px;
	position: absolute;
}

/*.clothes {
	z-index: 7;
}*/
/*
@media (max-height: 600px) {
	#doll {
		background-size: 450px 300px;
		background-repeat: no-repeat;
	}
}
*/