*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


a:link{color:#18b495} 
a:visited{color:#18b495 } 
a:hover{color:#16e980;} 
a:focus{color: #16e980;} 
a:active{color:#d4d365;} 

body{ 
	font-family:Arial; 
	overflow-x:hidden; 
	margin:0;
	padding:0px;
	color:grey;
	xbackground-color:rgb(37, 42, 55);
	background-color:black;
}

/*
a, a:visited { color:#0000EE; }
a:hover { color:#8080ff; }
a:active{ color:#EE0000; }
*/

#content{	
	xborder:1px solid red;
	overflow-x:hidden; 
	display:flex;
	flex-direction:column;
	max-width:100vw;
	max-height:100vh;
	width:100vw;
	height:100vh;
}

#top-area, #bottom-area{
	xborder:1px solid red;
	xposition:absolute;
	xmax-width:1000px;
	width:100%;
	xmargin: auto auto;	
	padding:10px;
	text-align:center;
	z-index:1;
	background-color:black;
}
	

#bottom-surface-container {
	xborder:1px solid red;
	position:absolute;
	max-width:750px;
	width:100%;
}	

#bottom-surface {
	xborder:1px solid lime;
	position:relative;
	margin-top:140px;

	display:flex;
	justify-content: center;
    align-items:center;
}
	
#bottom-surface-top {
	xborder:1px solid magenta;
	max-width:635px;
	width:100%;
	height:250px;
	xmargin: 140px auto auto 0px;
	display:inline-block;
	background-color:rgba(204, 51, 51,.8);
	
	transform: perspective(800px) rotateX(80deg) translateZ(0px) translateX(0px);

	xborder:2px solid rgba(204, 51, 51,0.2);
	xbox-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.7);
}	

#bottom-surface-bot {
	xborder-top:1px solid #d36565;
	xborder-radius: 3px 3px 0px 0px;
	background-color:#602020;
	opacity:0.8;
	xmax-width:745px;
	width:100%;
	height:15px;
	xmargin: 0px 0px 0px 2.5px;
	position:absolute;
	bottom:84.5px;
	xbox-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.7);	
}

#items-container{
	xborder:2px solid magenta;
	position:relative;
	background-color:rgb(37, 42, 55);
	width:100vw;
	height:50vh;

	xtext-align:center;
	xbox-shadow: inset 0px 0px 50px 10px rgba(0, 0, 0, 0.7);
	x-ms-scroll-limit-x-min:10px solid rgba(0,0,0,0.99);
	xborder-left:none;
	xborder-right:none;

	xoverflow:hidden;
	position:relative;

	display: flex;
	justify-content: center;
	align-items: center;
}

#items{
	xborder:1px solid orange;
	display:flex;
	justify-content: center;
    align-items:center;
}

.item{
	xwidth:150px;
	xheight:200px;
	xfloat:left;
	padding:50px 30px 50px 30px;
	display:inline-block;
	
}

.imageWall {
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
	image-rendering: crisp-edges;
}


.wrap {
	perspective: 800px; /* 800px */
	perspective-origin: 50% 100px;	
}

.cube {
	xposition: relative;
	width: 150px;
	transform-style: preserve-3d;
}

.cube div {
	position: absolute;
}

.front {
	width: 150px;
	height: 150px;
	transform: translateZ(2px);
	xfilter: drop-shadow(0px 0px 4px rgb(57, 222, 255));
	xfilter:drop-shadow(0px 0px 4px rgb(0, 204, 153) );
}

.back {
	width: 150px;
	height: 150px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	transform: translateZ(-2px) rotateY(180deg) scaleX(-1);
}

.item-normal-glow-container{
	width: 150px;
	height: 150px;
	transform: translateZ(0px);
}

.item-normal-glow {
	width: 1px;
	height: 1px;
	border-radius:50%;
	box-shadow: 0px 0px 50px 30px rgba(0, 172, 230, 0.7);
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%); 
	filter:saturate(200%) brightness(150%) blur(3px);
}

.item-bottom-shadow-container {
	margin-top:80%;	
	transform: perspective(200px) rotateX(80deg) translateZ(-10px);
	xfilter:blur(5px)
}

.item-bottom-shadow {
	width: 100px;
	height: 100px;
	border-radius:50%;
	background-color:rgba(0,0,0,0.5);
	margin: auto auto;
}

.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}


@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

@keyframes hopper {
	from { transform: translateY(0px); }
	to { transform: translateY(-5px); }
}

@keyframes shrinker {
	from { transform: scale(1.0, 1.0) }
	to { transform: scale(0.96, 0.96); }
	}

@keyframes enlarger {
	from { transform: scale(0.5, 0.5) }
	to { transform: scale(1.5, 1.5); }
	}

.cube {
	animation:spin 6s infinite linear;
	}

.wrap {
	animation:hopper 1s infinite alternate ease-in-out;
	}

.item-normal-glow{
	animation:enlarger 1s infinite alternate ease-in-out;
	}


.item-bottom-shadow{
	animation:shrinker 1s infinite alternate ease-in-out;
	}


.pixelate{
	 image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
	
	}



#bottom-text{
	text-align:center;
}


#btn-reload {
    padding:10px 30px 10px 30px;
	max-width:300px;
	width:100%;
	height:50px;
	margin:auto;

  
    background-color: #181818;
	color: grey;
    border-radius: 5px;
    cursor:pointer;
    user-select:none;
    text-align:center;
    font-size:1.5em;
    -ms-scroll-snap-x:#1db954; 
    border: 2px solid #333333; 


}

#btn-reload:hover {
    background-color:#222222;

}

#btn-reload:active {
    background-color:#1d1d1d;
	border:2px solid #602020;; 
	
}