:root {
	--color-bg: #333333;
	--color-mg: #080e31;
	--color-fg: #e9d0c9;
	--color-text: #f27351;
	--padding: 0.25vmin;
}

body {
	height: 100vh;
	width: 100vw;
	margin: 0px;
	padding: 0px;
	background-color: var(--color-bg);
	font-size: 0px;
}

/* Draws the grid overlay of the background for some visual flair */
.gridOverlay {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 10%;
	image-rendering: pixelated;
	background-repeat: repeat;
	background-size: 24px;
	background-image: url("./assets/bgpatt.png");
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.backgroundContainer {
	width: 100%;
	height: 100%;
	overflow: scroll;
}

/* Container for all page content */
.contentContainer {
	width: 75%;
	height: 100%;
	margin: auto;
}

/* Header with hero and title */
.headerContainer {
	height: 20vh;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.headerContainer > * {
	margin: var(--padding);
	height: calc(100% - 0.5vmin);
	pointer-events: none;
	user-select: none;
}

/* Adjust hero and title widths */
.heroCard {
	width: 70%; /* FIXME RM */
	background-image: url("./assets/hero.png");
	background-size: cover;
	background-position: center;
}

.heroCard > img {
	width: 100%;
	height: 100%;
}

.titleCard {
	min-width: 20%;
	background-color: var(--color-fg);
	flex-grow: 1; /* Fill remaining header space */
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--color-bg);
	text-align: center;
}

.titleCard > span {
	font-size: medium;	
}

.titleCard > .titleText {
	text-align: center;
	font-size: xx-large;	
}

#galleryHead {
	width: 100%;
}

#galleryHeadImg {
	max-width: 100%;
	max-height: 75vh;
	width: auto;
	height: auto;
}

/* Gallery styles */
.galleryContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	justify-content: center;
	margin: 0px;
	padding: 0px;
}

.galleryColumn {
	flex: 1%;
	flex-direction: column;
	justify-content: center;
	align-content: top;
	offset-position: 25%;
	margin: 0px;
}

.galleryCard {
	max-width: calc(100% - 2 * var(--padding));
	max-height: 100vh;
	filter: brightness(50%) grayscale(50%);
	transition: filter .5s;
	margin: var(--padding);
	margin-bottom: calc(2 * var(--padding));
	user-select: none;
	overflow: none;
}

.galleryCard:hover {
	filter: none;
}

.galleryImg {
	max-width: 100%;
	max-height: 100%;
}

a {
	padding: 0px;
	margin: 0px;
	background-color: #f00;
	font-size: 0rem;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
} 

/* FIXME Set selection colors */
::selection {
	color: var(--color-fringe);
	background: rgba(255, 255, 255, 0.3);
}

::-moz-selection {
	color: var(--color-fringe);
	background: rgba(255, 255, 255, 0.3);
}

/* Responsiveness & fonts */
@media (max-aspect-ratio: 1) {
	:root {
		--padding: 0px;
	}
	.contentContainer {
		width: 100%;
	}
	.headerContainer {
		height: 15vh;
	}
	.heroCard {
		width: 100%;
	}
	.titleCard {
		display: none;
	}
	.galleryColumn {
		flex: 100%;
	}
	.galleryCard {
		filter: none;
	}
}