/* -------------------- HUDS PAGE -------------------- */
#content{
	display: grid;
	height: 100%;
	min-height: 100%;
	max-height: 80vh;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 100px;
	grid-auto-columns: 1fr;
	grid-auto-flow: row dense;
	gap: 10px;
}
#changelog , .hud {
	background: linen;
	border: 1px solid black;
	padding: 0px;
}
#changelog {
	grid-column: 1;
	grid-row: 2;
	padding: 5px;
}
#huds {
	grid-row: 1;
	display: grid;
	grid-auto-rows: 1fr;
	gap: 0px;
}
#huds > .container.hud {
	grid-column: 2;
	height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 0px;
	justify-content: stretch;
}
#huds > .container.hud > .info {
	height: 100%;
	grid-row: 2;
	padding: 0px;
	gap: 0px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100%;
	align-items: stretch;
	border-top: 1px solid black;
	font-size: 1.5em;
}
#huds > .container.hud > .info > div {
    align-content: center;
	background-color: burlywood;

}
#huds > .container.hud > .info > .name {
	border-right: 1px solid black;
	grid-column: 1;
}
#huds > .container.hud > .info > .download > a { 
	text-decoration: none;
}
#huds > .container.hud > .galleryWrapper {
	display: grid;
	grid-template-columns: 250px auto 250px;
	grid-auto-flow: column;
}
#huds > .container.hud > .galleryWrapper > button {
	color: limegreen;
	top: 0px;
	font-size: 3em;
	border-radius: 0px;
	border-width: 0px;
	background: transparent;
	flex: 1 1 auto;
	min-width: 100px;
	z-index: 0;
}
#huds > .container.hud > .galleryWrapper > button:first-child {
	grid-column: 1;
	grid-row: 1;
}
#huds > .container.hud > .galleryWrapper > button:last-child {
	grid-row: 1;
	grid-column: 3;
}
#huds > .container.hud > .galleryWrapper > .gallery {
	grid-row: 1;
	grid-column: 1 / span 3;
	height: auto;
	display: grid;
	gap: 0px;
	padding: 0px;
	grid-template-columns: 1fr;
	justify-items: center;
	justify-content: center;    
	border: 0px solid black;
	background: linen;
	scrollbar-width: thin;
	flex: 1 1 auto;
	min-width: 100%;
}
#huds > .container.hud > .galleryWrapper > .gallery > .galleryScreen {
	display: none;
}
#huds > .container.hud > .galleryWrapper > .gallery > .galleryScreen.current {
	display: grid;
}
#huds > .container.hud > .galleryWrapper > .gallery > .galleryScreen > .number {
	grid-row: 1;
	grid-column: 1;
	margin-right: 100px;
	justify-self: end;
	align-self: end;
	font-size: 2em;
	color: limegreen;
}
#huds > .container.hud > .galleryWrapper > .gallery img {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	object-fit: contain !important
}