<script>

</script>

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

<style>
	:global(body) {
		overflow-y: hidden;
	}

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

	.wall {
		display: flex;
		margin: 0;
		padding: 0;
	}

	.column {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		height: 97vh;
		margin-right: 0.1vw;
		margin-left: 0.1vw;
		overflow: hidden;
		flex-basis: 0;
		/* border: 2px solid black; */
	}

	.column:first-child {
		margin-left: 0;
	}

	.column:last-child {
		margin-right: 0;
	}

	.priority {
		text-align: center;
		align-self: center;
		line-height: 24vh;
		overflow: hidden;
		/* border-bottom: 2px solid black; */
	}

	.priority#p {
		font-size: 18vmin;
		background-color: lightgray;
		width: 100%;
		margin-bottom: 0.1vh;
	}

	.priority#n {
		font-size: 14vmin;
		background-color: gray;
		width: 100%;
		margin-bottom: 0.1vh;
	}

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