/* ***************************************************************************** */
/* Vulgata                                                                       */
/* ***************************************************************************** */

/* ***************************************************************************** */
/* IMPERIUM                                                                      */
/* ***************************************************************************** */
div#imperium {
	height: 100%;
	overflow: auto;
	scroll-behavior: smooth;
	width: 100%
}

div#continensImperium {
	align-items: flex-start;
	display: flex;
	flex-wrap: nowrap;
	min-width: 282px
}

div.continensInstrumentorumX > div#musivorumTabula {
	flex-grow: 1
}

div.continensInstrumentorumX,
div.continensInstrumentorumY {
	display: flex;
	flex-grow: 1
}

div.continensInstrumentorumX {
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 100%;
	justify-content: space-evenly
}

div.vacuumContinentis {
	align-items: center;
	color: #fefdf9;
	display: flex;
	height: 100vh;
	justify-content: space-evenly;
	width: 100%
}

div.continensInstrumentorumY {
	flex-direction: column
}

div.continensInstrumentorumX > div#musivorumTabula > div.musivum {
	width: 30%
}

div.continensImperiorum {
	color: #fefdf9;
	background-color: #546f9f;
	border-radius: 6px;
	box-sizing: content-box;
	font-size: 1rem;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
	width: 100%
}

/* ***************************************************************************** */
/* COMMANDS                                                                      */
/* ***************************************************************************** */
div.imperia {
	flex-grow: 1;
	margin: 9px;
	text-align: center
}

	div.imperia p {
		font-size: 0.75rem;
		margin: 11px 0
	}

div.imperium {
	border-radius: 50%;
	box-shadow: 0 0 1px 1px rgba(101,101,101,0.4444), inset -2px -2px 6px 1px rgba(0,0,0,0.5555), inset 2px 2px 6px 1px rgba(255,255,255,0.5555);
	height: 99px;
	left: 0;
	margin: auto;
	position: relative;
	right: 0;
	transition: ease-out;
	transition-property: height, margin, width, box-shadow;
	transition-duration: 0.33s;
	width: 99px
}

	div.imperium:after {
		background-image: linear-gradient(-180deg, rgba(255,255,255,0.6666) 0%, rgba(255,255,255,0.3333) 10%, rgba(255,255,255,0.0) 55%);
		border-radius: 50%;
		box-shadow: 0 0 1px 0 rgba(101,101,101,0.1111), inset -2px -2px 6px 1px rgba(0,0,0,0.1111), inset 2px 2px 6px 1px rgba(255,255,255,0.1111);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}

	div.imperium:before {
		border-radius: 50%;
		box-shadow: 0 0 1px 1px rgba(101,101,101,0.1111), inset -1px -1px 3px 1px rgba(0,0,0,0.2222), inset 1px 1px 3px 1px rgba(255,255,255,0.2222);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		right: 0;
		width: 100%
	}

	div.imperium:focus-within,
	div.imperium:hover {
		filter: url(#umbra);
		cursor: pointer
	}

		div.imperium:focus-within > div div:before,
		div.imperium:hover > div div:before {
			background-position-y: center;
			background-repeat: repeat-x;
			animation: imperium 1.618s linear infinite alternate both
		}

	div.imperium div,
	div.imperium div div {
		border-radius: 50%
	}

		div.imperium div div:before {
			z-index: 1;
		}

		div.imperium div:before {
			content: "";
			background-image: radial-gradient(circle at 44% 44%,transparent 50%, rgba(0,0,0,0.66));
			border-radius: 50%;
			right: 0;
			bottom: 0;
			position: absolute;
			width: 100%;
			height: 100%
		}

		div.imperium div:after {
			content: "";
			background-image: linear-gradient(135deg, rgba(255,255,255,0.666), transparent 66%);
			border-radius: 100% 22% 50% 22%;
			left: 8%;
			top: 8%;
			position: absolute;
			width: 50%;
			height: 50%
		}

		div.imperium div.numerusNuntia {
			background-color: #f00;
			box-shadow: 0 0 0.666px 1px #095aea, inset 0 0 0.666px 1.618px #fff;
			color: #fff;
			height: 38.2%;
			position: absolute;
			right: -5.57%;
			top: -5.57%;
			width: 38.2%;
			z-index: 1
		}

	div.imperium svg {
		left: 0;
		position: absolute;
		top: 0;
		transform: scale(1.2)
	}

@keyframes imperium {
	0% {
		background-image: radial-gradient(ellipse at 50%,transparent 21.2132%,rgba(255,255,255,0.111) 23.5702%);
		background-position-x: 50%;
		background-size: 300% 300%
	}

	25% {
		background-image: radial-gradient(ellipse at 50%,transparent 21.2132%,rgba(255,255,255,0.111) 23.5702%);
		background-position-x: 50%;
		background-size: 300% 300%
	}

	37.4999% {
		background-image: radial-gradient(ellipse at 50%,transparent 21.2132%,rgba(255,255,255,0.111) 23.5702%);
		background-position-x: 72.5%;
		background-size: 300% 900%
	}

	37.5% {
		background-image: radial-gradient(ellipse at 50%,rgba(255,255,255,0.111) 21.2132%,transparent 23.5702%);
		background-position-x: 27.5%;
		background-size: 300% 900%
	}

	50% {
		background-image: radial-gradient(ellipse at 50%,rgba(255,255,255,0.111) 21.2132%,transparent 23.5702%);
		background-position-x: 50%;
		background-size: 300% 300%
	}

	62.5% {
		background-image: radial-gradient(ellipse at 50%,rgba(255,255,255,0.111) 21.2132%,transparent 23.5702%);
		background-position-x: 72.5%;
		background-size: 300% 900%
	}

	62.5001% {
		background-image: radial-gradient(ellipse at 50%,transparent 21.2132%,rgba(255,255,255,0.111) 23.5702%);
		background-position-x: 177.5%;
		background-size: 300% 900%
	}

	75% {
		background-image: radial-gradient(ellipse at 50%,transparent 21.2132%,rgba(255,255,255,0.111) 23.5702%);
		background-position-x: 200%;
		background-size: 300% 300%
	}

	100% {
		background-image: radial-gradient(ellipse at 50%,transparent 21.2132%,rgba(255,255,255,0.111) 23.5702%);
		background-position-x: 200%;
		background-size: 300% 300%
	}
}

/* ***************************************************************************** */
/* MEDIA QUERIES                                                                 */
/* ***************************************************************************** */
@media (max-width: 999px) {
	div .continensInstrumentorumX > div#musivorumTabula > div.musivum {
		width: 48%
	}
}

@media (max-width: 777px) {
	div.continensInstrumentorumX > div#musivorumTabula > div.musivum {
		width: 99%
	}

	div.continensImperiorum {
		font-size: 0.75rem
	}

	div.imperium {
		height: 66px;
		width: 66px
	}

	div.imperia {
		margin: 6px
	}

		div.imperia p {
			font-size: 0.66rem;
			margin: 6px 0
		}
}

@media (max-width: 666px) {
	div#continensImperium {
		flex-wrap: wrap
	}

		div#continensImperium > div.portae {
			flex-grow: 1
		}

			div#continensImperium > div.portae > div.porta {
				width: 100%
			}

}

@media (max-width: 333px) {
	div.imperium {
		height: 55px;
		width: 55px
	}

	div.imperia {
		margin: 3px
	}

		div.imperia p {
			font-size: 0.55rem;
			margin: 3px 0
		}
}