/* ======================== */
/* GENERIC STYLING          */
/* ======================== */

#modal {
	display:none;
	backdrop-filter:blur(5px) grayscale(1);
	animation:modalFadeIn 0.25s cubic-bezier(0, 0.5, 0.1, 1);
	background:rgba(0, 0, 0, 0.5);
	width:100%;
	max-width:100%;
	height:100%;
	max-height:100%;
	line-height:normal;
}

::backdrop {
	display:none;
}

@keyframes modalFadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@media (max-width:1000px) and (orientation:portrait) {
	#modal {
		flex-direction:column;
	}
}

/* ======================== */
/* CONTENTS                 */
/* ======================== */

#modalImage {
	display:flex;
	flex-grow:1;
	justify-content:center;
	align-items:center;
	cursor:zoom-out;
	padding:0% 5%;
	width:70%;
	height:100%;
}

#modalImage img {
	max-width:100%;
	max-height:100%;
}

#modalLoading {
	display:none;
	position:absolute;
	animation:loading 1s linear infinite;
	border:10px solid var(--colTFLighter);
	border-bottom-color:transparent;
	border-radius:50%;
	width:100px;
	height:100px;
}

@keyframes loading {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

#modalContent {
	display:flex;
	flex-shrink:0;
	flex-direction:column;
	justify-content:space-between;
	gap:1vh;
	box-shadow:0px 0px 0.3vw rgba(0, 0, 0, 0.5);
	background: repeating-linear-gradient(-60deg, transparent 0% 2%, rgba(0, 0, 0, 0.15) 2% 3.25%), rgba(0, 0, 0, 0.5);
	padding:2%;
	width:30%;
	height:100%;
	color:var(--colTFLighter);
}

#modalInfo {
	display:flex;
	flex-direction:column;
	gap:1vh;
}

#modalTitle {
	font-size:2vw;
	font-family:var(--fontBuild);
}

#modalSubtitle {
	font-size:1vw;
}

#modalTitle, #modalSubtitle {
	text-shadow:0px 0.1vw 0.2vw #000000;
}

@media (max-width:1000px) {
	#modalTitle {
		font-size:3vw;
	}

	#modalSubtitle {
		font-size:1.5vw;
	}

	@media (orientation:portrait) {
		#modalImage {
			padding:5%;
			width:100%;
			height:65%;
		}

		#modalContent {
			padding:5%;
			width:100%;
			height:35%;
		}

		#modalTitle {
			font-size:6vw;
		}

		#modalSubtitle {
			font-size:3vw;
		}
	}
}

/* ======================== */
/* BUTTONS                  */
/* ======================== */

#modalButtons div {
	display:flex;
	gap:2vh;
}

#modalButtons a {
	cursor:pointer;
	width:100%;
}

#modalMobile {
	display:none !important;
	justify-content:space-between;
}

#modalMobile a {
	display:flex;
	box-shadow:0px 0.5vw 1vw rgba(0, 0, 0, 0.5);
	border-radius:50%;
	background:var(--colOrangeLight);
	padding:5%;
	max-width:25vw;
	user-select:none;
}

#modalMobile a:hover, #modalMobile a:focus {
	background:var(--colOrangeLighter);
}

#modalMobile a:active {
	background:var(--colOrangeMid);
}

#modalMobile a img {
	width:100%;
	height:100%;
}

#modalLeft img {
	transform:rotate(270deg);
}

#modalRight img {
	transform:rotate(90deg);
}

@media (max-width:1000px) {
	#modalButtons div {
		display:none;
	}

	#modalMobile {
		display:flex !important;
	}
}