main section:first-of-type .article:is(.level1, .level2, .level3, .level4, .level5)
{
	margin-top: 8px;
}

.article:is(.level1, .level2, .level3, .level4, .level5)
{
	display: grid;
	align-content: center;
    justify-content: center;
    align-items: center;	
	background: light-dark(var(--simple-message-bg), var(--simple-message-col));
}

.article:is(.level1, .level2, .level3, .level4, .level5) div
{	
	text-align: center;
	text-wrap-style: balance;		
	padding: 4px 32px;
	border-radius: 50px;		
}
.article:is(.level1, .level2, .level3, .level4, .level5) div *
{	
	color: light-dark(var(--simple-message-col), var(--simple-message-bg));
	line-height: 1.5em;
}
.article:is(.level1, .level2, .level3, .level4, .level5) div a
{
	display: inline-block;
	transition: 0.2s ease;	
    text-decoration: underline;
    text-underline-offset: 4px;	
	cursor: pointer;
}
.article:is(.level1, .level2, .level3, .level4, .level5) div a:hover
{	
	transform: translateY(-1px);
	text-underline-offset: 5px;		
}

.article.level1:has(div)
{
	--simple-message-bg: var(--colour-text-over-main);
	--simple-message-col: red;
}
.article.level2:has(div)
{
	--simple-message-bg: var(--colour-text-over-main);
	--simple-message-col: orange;
}
.article.level3:has(div)
{
	--simple-message-bg: var(--colour-text-over-main);
	--simple-message-col: #FF5722;
}
.article.level4:has(div)
{
	--simple-message-bg: var(--colour-text-over-main);
	--simple-message-col: #3f51b5;
}
.article.level5:has(div)
{
	--simple-message-bg: var(--colour-text-over-main);	
	--simple-message-col: var(--colour-main);	
}