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

/* Hover on items ONLY on desktop view */
@media all and (min-width:769px) {
	.item:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}
}

body{	
	background-color:	#071a30;
	xbackground-color:	rgb(50, 50, 50); ;
	background-image:url('../img/cross.png');
	font-family:Roboto, Arial;
	color:#e6eef4;
	padding:0px;
	margin:0px;
	overflow-x:hidden;
	width:100vw;
	xheight:100vh;
}
	
a:link{
	color:grey;
	xtext-decoration: none;
	
} 
a:visited{color:#5799ef; } 
a:hover{xcolor:#16e980;} 
a:focus {
	color:#5799ef;
	text-decoration: underline;
} 
a:active{color:#d4d365;} 


#topbar{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height: 100%;
	max-height:50px;
	padding:0px;
	margin:0px;
	background-color:#151719;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
	z-index: 2;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}	

#topbar > #topbar-content {
	xborder: 1px solid grey;
	width:100%;
	height:100%;
	max-width: 800px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}


#topbar > #topbar-content > #title {
	xborder:1px solid grey;
	height:100%;
	padding:5px;
	font-size: 2em;
	margin:0px 5px 0px 0px;
	height:100%;
	color:grey;
	font-family: Roboto Mono, Consolas, monospace;	
	padding:5px;
	font-size: 2em;

	color: #ffd748;
	text-shadow: 
		0 0 1vw #FA1C16, 
		0 0 3vw #FA1C16, 
		0 0 10vw #FA1C16, 
		0 0 10vw #FA1C16, 
		0 0 .4vw #FED128, 
		1px 1px 0px #806914
	;

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

#topbar > #topbar-content > #title > i {
	margin-right:10px;
}

#topbar > #topbar-content > #movie-count-cont {
	xborder:1px solid grey;
	height:100%;
	color:grey;
	padding:5px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgb(0, 195, 255);
	text-shadow: 0px 0px 5px rgb(0, 195, 255);
	font-family: Roboto Mono, Consolas, monospace;	
}

#topbar > #topbar-content > #movie-count-cont > i {
	margin-right:5px;
}

#topbar > #topbar-content > #movie-count-cont > .movie-count {
	margin-right:10px;
}



#content{
	margin:auto;
	width:100%;
	max-width: 800px;
	border-radius:2px;

	xbackground-color:rgba(0,0,0,0.5);
	line-height: 1.4;
	margin-top:60px;
	overflow-x: hidden;
	margin-bottom:50px;
}

#movies {
	xborder:1px solid grey;
	width:100%;
	padding: 30px 0px;
}



.item {
	padding:0px 5px 0px 40px;
	position: relative;
	display:flex;
	justify-content: start;
	align-items: center;
}



.item.selected{
	background-color: rgba(255, 255, 255, 0.1);
}


.item.selected > .title {
	color: rgb(0, 195, 255);
	color: rgb(0, 211, 204);
	color: #ffd748;
	color: #00c867;

}

.item.selected > .date,
.item.selected > .year {
	color:white;
	
}




.item > div {
	xborder:1px solid grey;
	height:100%;
	flex-grow: 0;     /* do not grow   - initial value: 0 */
	flex-shrink: 0;   /* do not shrink - initial value: 1 */
	xflex-basis: 30%; /* width/height  - initial value: auto */
	pointer-events:none;
}


.item > .date {
	xborder:1px solid grey;
	font-family: Roboto Mono, Consolas, monospace;	
	color:grey;
}

.item > .title {
	xborder:1px solid red;
	padding-left:10px;
	xflex-basis: 50%; 
	xwidth:50%;
	flex:1;
	font-family:Roboto;
}

.item > .year {
	xborder:1px solid grey;
	color:grey;

	display:flex;
	align-items: center;
	justify-content: center;
	xflex-basis: 10%; 
	xwidth:10%;
	xfont-family: Roboto Mono, Consolas, monospace;	
}

.item > .tags {
	xborder:1px solid grey;
	display:flex;
	display:flex;
	align-items: space-evenly;
	justify-content: space-evenly;
	flex-basis: 10%; 
}

.item > .tags > .tag {
	xborder: 1px solid rgb(64, 64, 64);
	
	border-radius:50px;
	color:grey;
	xbackground-color:#2b2b2b;
	padding:5px 10px 5px 10px;
	margin:3px;
	font-weight: 300;
	font-size:0.7em;
	xcolor:green;
	xbox-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2);
	
	xflex:10%;
	display:flex;
	justify-content: center;
	align-items: center;
}


.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.splitter {
	xborder:1px solid red;
	width:100%;
	height:50px;
	xbackground-color:rgba(0, 0, 0, 0.2);
}

.date-splitter {
	xborder:1px solid red;
	width:100%;
	height:50px;
	xbackground-color:rgba(0, 0, 0, 0.2);
	display:flex;
	flex-direction:row;
	align-items: end;
	color: rgb(0, 195, 255);
}

.date-splitter > .month {
	xborder:1px solid red;
	padding: 0px 10px 0px 40px;
}

.date-splitter > .year {
	xborder:1px solid red;
}