body {
	margin : 0;
	padding: 0;
	overflow: hidden;
	positionm: fixed;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	     -o-user-select: none;
	        user-select: none;
	background-color: #eee;
	background: -webkit-linear-gradient(#eee, #eee, #aaa);
	text-align:  center;
}

@font-face {
	font-family:  forcedSquare;
	src: url(FORCEDSQUARE.ttf);
}

.off {display: none;}

#content {height: 100vh;}

#content, table { margin: auto; }

h1, a, #lvlist td {font-family: forcedSquare, Calibri, Arial, Sans-Serif;}

#logo {
	height: 36vh;
	background: -webkit-linear-gradient(left top, #f88, #f8f, #88f);
}

h1 {
	margin: 0;
	background: -webkit-linear-gradient(left, #f88, #f8f, #88f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#main h2 {
	margin: 0;
	color: #aaa;
	margin-top: 12vh;
	font-family: Calibri, Arial, Sans-Serif;
}

#home h2, h2#confirm {
	margin: auto;
	color: #eee;
	margin-top: 7vh;
	background-color: #aaa;
	width: 50%;
}

#main > div, #lvl * {
    -webkit-animation: fade-in 1s;
			animation: fade-in 1s;
}

#home::before {
	content: '';
	display: block;
	position: fixed;
	z-index: -1;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	background: url('img/home.png') center center no-repeat;
	background-size: auto 100%;
}

#bg {
	position: fixed;
	z-index: -1;
	left: 0;
	bottom: 0;
	opacity: .5;
	width: 100vw;
	height: 100%;
	background: url('img/fond_1.png') center bottom;
	background-size: auto 100%;
	transition: all .5s;
}

/* -- RULES -- */

#rules {
    font-size: 4vh;
    margin: 3vh 0;
    color: #aaa;
    font-family: Calibri, Arial, Sans-serif;
    font-style: italic;
}

/* --- TEAM --- */

#ocarre h3 {text-align: center;}
#ocarre h3:nth-child(1) {color: #1AA3D1;}
#ocarre h3:nth-child(2) {color: #EDB820;}
#ocarre h3:nth-child(3) {color: #FD376D;}
#ocarre h3:nth-child(4) {color: #8982B5;}
#ocarre h3:nth-child(5) {color: #44D0A8;}
#ocarre a {font-size: 4vh;}

/* -- ERASE DATA -- */

#erasedata h2:nth-child(1) {color: #f08;}

/* -- COLOR -- */

#colormode h2 {margin-top: 0;}

#colormode td {
	color: transparent;
	border-style: solid;
	border-color: transparent;
	opacity: .5;
	transition: .5s all;
}

#colormode td.select {opacity:1;}

#colormode td:after {
	content: '';
	display: block;
	height: 100%;
}

#row1 td:nth-child(1):after {
	background: #93d;
	border-top   : 2vh solid #e25;
	border-left  : 2vh solid #e25;
	border-bottom: 2vh solid #37e;
	border-right : 2vh solid #37e;
}
#row1 td:nth-child(2):after {
	background: #3d8;
	border-top   : 2vh solid #37e;
	border-left  : 2vh solid #37e;
	border-bottom: 2vh solid #ed0;
	border-right : 2vh solid #ed0;
}
#row1 td:nth-child(3):after {
	background: #fa0;
	border-top   : 2vh solid #ed0;
	border-left  : 2vh solid #ed0;
	border-bottom: 2vh solid #f5d;
	border-right : 2vh solid #f5d;
}
#row1 td:nth-child(4):after {
	background: #37e;
	border-top   : 2vh solid #f5d;
	border-left  : 2vh solid #f5d;
	border-bottom: 2vh solid #3bd;
	border-right : 2vh solid #3bd;
}

#row2 td:nth-child(1):after {
	background: #3d8;
	border-top   : 2vh solid #3bd;
	border-left  : 2vh solid #3bd;
	border-bottom: 2vh solid #fa0;
	border-right : 2vh solid #fa0;
}
#row2 td:nth-child(2):after {
	background: #e25;
	border-top   : 2vh solid #fa0;
	border-left  : 2vh solid #fa0;
	border-bottom: 2vh solid #93d;
	border-right : 2vh solid #93d;
}
#row2 td:nth-child(3):after {
	background: #3bd;
	border-top   : 2vh solid #93d;
	border-left  : 2vh solid #93d;
	border-bottom: 2vh solid #3d8;
	border-right : 2vh solid #3d8;
}
#row2 td:nth-child(4):after {
	background: #fa0;
	border-top   : 2vh solid #3d8;
	border-left  : 2vh solid #3d8;
	border-bottom: 2vh solid #e25;
	border-right : 2vh solid #e25;
}

#row3 td:nth-child(1):after {
	background: #f5d;
	border-top   : 2vh solid #e25;
	border-left  : 2vh solid #e25;
	border-bottom: 2vh solid #93d;
	border-right : 2vh solid #93d;
}
#row3 td:nth-child(2):after {
	background: #3bd;
	border-top   : 2vh solid #93d;
	border-left  : 2vh solid #93d;
	border-bottom: 2vh solid #ed0;
	border-right : 2vh solid #ed0;
}
#row3 td:nth-child(3):after {
	background: #f5d;
	border-top   : 2vh solid #fa0;
	border-left  : 2vh solid #fa0;
	border-bottom: 2vh solid #37e;
	border-right : 2vh solid #37e;
}
#row3 td:nth-child(4):after {
	background: #ed0;
	border-top   : 2vh solid #3bd;
	border-left  : 2vh solid #3bd;
	border-bottom: 2vh solid #e25;
	border-right : 2vh solid #e25;
}

#row4 td:nth-child(1):after {
	background: #fa0;
	border-top   : 2vh solid #f5d;
	border-left  : 2vh solid #f5d;
	border-bottom: 2vh solid #3d8;
	border-right : 2vh solid #3d8;
}
#row4 td:nth-child(2):after {
	background: #37e;
	border-top   : 2vh solid #3bd;
	border-left  : 2vh solid #3bd;
	border-bottom: 2vh solid #93d;
	border-right : 2vh solid #93d;
}
#row4 td:nth-child(3):after {
	background: #ed0;
	border-top   : 2vh solid #3d8;
	border-left  : 2vh solid #3d8;
	border-bottom: 2vh solid #fa0;
	border-right : 2vh solid #fa0;
}
#row4 td:nth-child(4):after {
	background: #e25;
	border-top   : 2vh solid #fa0;
	border-left  : 2vh solid #fa0;
	border-bottom: 2vh solid #f5d;
	border-right : 2vh solid #f5d;
}

/* --- NAV --- */

nav {
	background-color: #e1e1e1;
	position: absolute;
	bottom: 0px;
	border-top: 1px solid #fff;
	width: 100vw;
	left: 0;
    -webkit-animation: push-in 1s;
			animation: push-in 1s;
}

nav i {	
	display: inline-block;
}

.fa-caret-left, .fa-caret-right {color: #B3C1C7;}

.fa-times {color: #f88;}
.fa-undo  {color: #d8f;}
.fa-chevron-left {color: #88f;}

/* --- LIST --- */

#lvlist td {
	background: transparent;
	border: 1px solid transparent;
	box-shadow: 1rem 1rem 0px #fff inset, -1rem -1rem 0px #fff inset;
	color: #444;
	font-size: 3vh;
	display: none;
}

#lvlist td.open {display:table-cell;}

/* --- LEVEL --- */

#lvl td:after {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	transition: all .5s;
}

#lvl {background: #eee;}

#lvl td {border: 1px solid #eee;}

#lvl .i000:after {background: #000;} /* Black  */
#lvl .ifff:after {background: #fff;} /* White  */

#lvl .ie25:after {background: #e25;} /*  Red   */
#lvl .if5d:after {background: #f5d;} /*  Pink  */
#lvl .i93d:after {background: #93d;} /* Purple */
#lvl .i37e:after {background: #37e;} /*  Blue  */
#lvl .i3bd:after {background: #3bd;} /*  Cyan  */
#lvl .i3d8:after {background: #3d8;} /* Green  */
#lvl .ied0:after {background: #ed0;} /* Yellow */
#lvl .ifa0:after {background: #fa0;} /* Orange */

#lvl .c0:after, #lvl .c7:after {
	height: 60%;
	width : 60%;
	margin-left: 20%;
}

#lvl .on:after, #lvl .wait:after {
	height: 80%;
	width : 80%;
	margin-left: 10%;
}

#lvl .temp:after {opacity: .5;}

/* -- WIN -- */

#win {
    width: 100vw;
	height: 30vh;
	left: 0;
	top: -30vh;
	position: fixed;
	background-color: rgba(255,255,255,.8);
	opacity: 0;
	transition: .5s opacity, 1s top;
	font-size: 4vh;
	font-family: Calibri, Arial, Sans-Serif;
	text-shadow: 3px 3px white;
}

#win.gg {
	top: 35vh;
	opacity:1;
}

#win h2 {margin-top:0;}

@-webkit-keyframes fade-in {0% {opacity:0;}}
		@keyframes fade-in {0% {opacity:0;}}

@-webkit-keyframes push-in {0% {bottom:-20vh;}}
		@keyframes push-in {0% {bottom:-20vh;}}