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

body{
	margin:0px;
	padding:0px;
	overflow-x:hidden;
	font-family:Roboto, Arial;
	text-align:center;
	background-color: #001c3e;
	background-image:url('../img/cross.png');
	background-position: center;
	background-repeat: repeat;
	background-size:auto;
}

#background-shade {
	position:absolute;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
}


#items  {
	margin-top: 50px;
	padding: 0px 0px 0px 5px;
	max-width:100vw;
}

#items > .item {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position:relative;
	width: 300px;
	height:200px;
	margin: 20px;
	font-size:2em;
	color: white;
	box-shadow: 0px 2px 10px #000;
	background-color:black;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0.05s;
	cursor: pointer;
	overflow:hidden;
	vertical-align:top;
}

#items > .item:hover {
	filter: saturate(1.4) brightness(1.1);
}

#items > .item:active {
	color:grey;
}


.item > .name {
	position:absolute;
	bottom:0;
	left:0;
	margin:0px 0px 5px 5px;
	padding:5px;
	background-color:rgba(0,0,0, 1.0);
	font-size:0.5em;
	color:rgb(173, 173, 173);
	opacity:0;
	transition: all 0.1s;
	box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
}

.item > .bright-overlay {
	position:absolute;
	width: 100%;
	height:100%; 
	background-color:rgba(255, 255, 255, 0.10);
	transition: background-color 0.1s;
	z-index:1;
}

.item > .dark-overlay {
	position:absolute;
	width: 100%;
	height:100%;
	background-color:rgba(23, 28, 37,0.3);
	transition: background-color 0.1s;
	z-index:2;
}

.item:hover .dark-overlay{
	background-color:rgba(23, 28, 37,0.0);
}

.item:hover .bright-overlay{
	background-color:rgba(255, 255, 255,0.0);
}

.item:hover .name{
	opacity:1;
}

.hidden {
	z-index:-999;
	opacity:0;
	display:none;
}

.invisible {
	opacity:0.5;
}


/*  MODAL ////////////////////////// */
#modal {
	position:fixed;
	top:0;
	background-color: rgba(0,0,0,0.8);
	width:100%;
	height:100%;
	z-index:-99;
	opacity:0;
	display:none; /* toggles to flex when visible */
	justify-content: center;
	align-items: center;
	overflow:hidden;
	margin:0px;
	padding:0px;
	cursor:pointer;
}

#modal > #modal-background {
	width:100%;
	height:100%;
}

#modal > img#modal-image, #modal > img#modal-thumbnail {
	max-width:100%;
	max-height:98%;
	height: 98%; 
	display:inline-block;
	object-fit: contain;
}

#modal > img#modal-image {
	z-index:2;
	box-shadow: 0 4px 30px #000;
}

img#modal-thumbnail{
	z-index:1;
	position:absolute;
	object-fit: cover;
}

#modal > #modal-text {
	xborder:1px solid red;
	opacity:0.5;
	display:inline-block;
	position: absolute;
	bottom:0;
	left:0;
	margin:0px 0px 10px 10px;
	color:rgb(173, 173, 173);
	padding:10px;
	background-color:rgba(0,0,0,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	font-size:1em;
	z-index:3;
	transition: all 0.1s;
}

#modal > #modal-text:hover {
	opacity:1;
} 

#modal > #modal-text > #modal-game {
	font-weight:700;
	display:inline-block;
	
}

#modal > #modal-text > #modal-comment {
	display:inline-block;
	font-style: italic;
	margin-left:10px;
	
}
/* END MODAL ////////////////////////// */


/* mobile style */
@media screen and (max-width:620px) {
	#topbar {
		flex-direction: column;
	}


	#topbar-content {
		flex-direction: column;
	}

	#title {
		xborder:1px solid red;
		flex-direction: column;
		font-size:2em;
		background-color:rgba(0,0,0,0.5);
		width:100vw;
	}

	#topbar-content  > #menu-items  {
		xjustify-content: space-around;
		display:none;
	}	

	
	#topbar-content  > #menu-items > a.menuitem   {
		xborder:1px solid red;
		xborder: 1px solid #2b2f34;
		xborder-radius:5px;
		padding:10px 20px 10px 20px;
		xpadding:5px;
		font-size:1.3em;
		flex-grow:1;
	
	}	

	#topbar-content > #menu-items > .item:hover {
		background-color:none;
		color:auto;
		text-shadow:auto ; 
	}
	
}