@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
	background-image: url("https://forceinline.pw/cs2/static/background.webp");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	
	font-family: "Roboto";
	font-weight: 100;
	
	min-width: 700px;
	
	margin: 0px;
}

.item-container {
	display: flex;
	flex-wrap: wrap;
	row-gap: 3em;
	column-gap: 2.5em;
}

.content {
	padding: 5em;
	min-height: calc(100vh - 10em);
}

.header-container {
	display: flex;
	margin: 0em 0em 1.5em 0em;
}

@media only screen and (max-width: 1200px) {
	.header-container {
		display: block;
		margin: 0em 0em 1.5em 0em;
	}
}

.content-label {
	color: white;
	font-size: 42pt;
	display: flex;
	position: relative;
	justify-content: center;
	width: 100%;
	text-shadow: 0.1em 0.1em 0.125em black;
}

.back-button {
	height: 100%;
	position: absolute;
	left: 0;
	display: flex;
	align-items: center;
}

.utility-filters {
	display: flex;
	align-items: center;
	margin-top: 0.5em;
	position: absolute;
	right: 5em;
}

@media only screen and (max-width: 1200px) {
	.utility-filters {
		display: flex;
		align-items: center;
		justify-content: center;
		position: inherit;
	}
}

.filter-button {
	height: 3em;
}

.filter-button:not(:last-child) {
	margin-right: 0.625em;
}

.filter-active {
}

.filter-inactive {	
	transition: 0.25s;
	filter: invert(84%) sepia(2%) saturate(4%) hue-rotate(315deg) brightness(99%) contrast(89%);
	cursor: pointer;
}

.filter-inactive:hover {
	transition: 0.25s;
	filter: invert(67%) sepia(6%) saturate(14%) hue-rotate(345deg) brightness(91%) contrast(83%);
}

/* Items */

.item-entry {
	position: relative;
	top: 0;
	transition: all ease 0.25s;
	
	text-decoration: none;
	background-color: rgba(35, 35, 35, 0.75);
	box-shadow: 0em 0em .25em .25em rgba(75, 75, 75, 0.5);
	flex-grow: 1;
	min-width: 25em;
	height: 100%;
	cursor: pointer;
}

.map {
	flex-basis: 30%;
}

.util {
	flex-basis: 22%;
}

.item-entry:hover {
	top: -0.75em;
	box-shadow: 0em 0em .25em .25em rgba(150, 150, 150, 0.5);
}

.map-image {
	object-fit: cover;
	width: 100%;
	height: 20em;
}

.util-image {
	object-fit: cover;
	width: 100%;
	height: 15em;
}

.util-icon {
	position: absolute;
	max-height: 12.5%;
	right: 0.5em;
	bottom: calc(1em + 1%);
}

.item-label {
	font-size: 18pt;
	color: white;
	margin: 0.5em;
	max-width: calc(100% - 3.8em);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden; 
}

.item-location-label {
	font-size: 12pt;
	color: rgb(200, 200, 200);
	margin: calc(-0.5em * 18/12) calc(0.5em * 18/12) calc(0.5em * 18/12) calc(0.5em * 18/12) /* Relying on item-label font-size*/
}

.item-location-svg {
	max-height: 1em;
	position: relative;
	top: calc(0.2 * 1em);
}

.item-description {
	display: none;
}

/* Video overlay */

.video-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	
	background-color: rgba(20, 20, 20, 0.85);
	
	width: 100%;
	height: 100%;
	min-width: 750px;
}

.video-overlay-container {
	margin: 5em;
	height: 100%;
}

.video-top-bar {
	width: 100%;
	font-size: 32pt;
	color: white;
	display: flex;
	border-bottom: 0.05em solid white;
}

.video-container {
	margin: 2em;
	height: calc(100% - 10em - 4em);
	text-align: center;
}

.video-label {
	margin: 0em 0em 0.5em 0em;
}

.video-description {
	color: white;
	font-size: 18pt;
	margin-bottom: 1em;
}

.video-close {
	margin: 0em 0em 0.5em auto;
	cursor: pointer;
}

.video-src {
	background-color: white;
	max-height: calc(100% - 2em - 3em) !important;
	max-width: 100%;
}