/*
	THIS IS THE STYLESHEET FOR THE BACKLOG MODAL MODULE
*/

.modal {cursor:pointer}

#modal-container {
	z-index:32768;
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	background:#000;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.2s linear;
	&.active {pointer-events:initial;opacity:1}}

#modal-item {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	max-width:80vw;
	max-height:90vh;
	width:auto;
	& img {
		max-width:100%;
		max-height:90vh;
		box-shadow:0 0 4px #eee
	}}

#modal-close {
	position:absolute;
	display:block;
	top:4em;
	right:4em;
	font-family:DINish,sans-serif;
	cursor:pointer;
	&::before {
		position:absolute;
		top:-1em;
		left:50%;
		transform:translateX(-50%);
		display:block;
		width:100%;
		text-align:center;
		content:"X";
		font-size:3em}
	}

#modal-description {
	position:absolute;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	padding:10px;
	font-size:0.75em}