<script>
	
</script>

<ul>
	<li>
		<div class="priority" id="n">2</div>
		<div class="color" id="black"></div>
	</li>
	<li>
		<div class="priority" id="p"><a href="/">P</a></div>
		<div class="color" id="red"></div>
	</li>
	<li>
		<div class="priority" id="n">4</div>
		<div class="color" id="blue"></div>
	</li>
	<li>
		<div class="priority" id="n">3</div>
		<div class="color" id="green"></div>
	</li>
	<li>
		<div class="priority" id="n">5</div>
		<div class="color" id="yellow"></div>
	</li>
</ul>

<style>
	:global(body) {
		overflow-y: hidden;
		overflow-x: hidden;
		margin: 0.2vmin;
		align-content: center;
		justify-content: center;
	}

	a:link,
	a:hover,
	a:visited,
	a:active {
		text-decoration: none;
		color: black;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: flex;
		flex-direction: row;
		/* border: 2px solid black; */
		/* min-height: 18.8vh; */
		/* width: 99.4vw; */
		margin-top: 0.2vh;
		margin-bottom: 0.2vh;
		overflow: hidden;
	}

	.priority {
		text-align: center;
		align-self: center;
		min-height: 19vh;
		min-width: 19vh;
		/* border-right: 2px solid gray; */
		margin-right: 0.2vw;
		background-color: gray;
	}

	.priority#p {
		font-size: 16vmin;
		background-color: lightgray;
		height: 100%;
	}

	.priority#n {
		font-size: 14vmin;
		height: 100%;
	}

	.color {
		width: 100vw;
	}

	.color#black {
		background-color: black;
	}
	.color#red {
		background-color: red;
	}
	.color#blue {
		background-color: blue;
	}
	.color#green {
		background-color: green;
	}
	.color#yellow {
		background-color: yellow;
	}
</style>
