main {
	display: flex;
	justify-content: flex-start;
	width: 80%;
	margin-top: 2%;
}

main > h1, h2, span {
	align-self: start;
}

h2 {
	position: relative;
	overflow: hidden;
}

h2::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: var(--main);
}

li > a {
	color: var(--secondary);
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

li > a::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
	background-color: var(--secondary);
	transition: width .5s ease;
}

li > a:hover::before {
	width: 100%
}

.mention {
	border-radius: 3px;
	padding: 0 2px;
}

.interactive {
	-webkit-transition: background-color 50ms ease-out, color 50ms ease-out;
	transition: background-color 50ms ease-out, color 50ms ease-out;
	cursor: pointer;
}

.wrapper-1ZcZW- {
	border-radius: 3px;
	padding: 0 2px;
	font-weight: 500;
	unicode-bidi: -moz-plaintext;
	unicode-bidi: plaintext;
	color: 235 calc(1 * 86.2%) 88.6%;
	background: hsl(235 calc(1 * 85.6%) 64.7%/0.3);
}

.wrapper-Red {
  border-radius: 3px;
	padding: 0 2px;
	font-weight: 500;
	unicode-bidi: -moz-plaintext;
	unicode-bidi: plaintext;
	color: #FF0000;
  background: hsla(0, 100%, 50%, 0.3);
}

.mention.interactive:hover {
	text-decoration: underline;
}

.interactive:hover {
	color: hsl(0 calc(1 * 0%) 100%/1);
	background-color: hsl(235 calc(1 * 85.6%) 64.7%/1);
}

.mention {
	border-radius: 3px;
	padding: 0 2px;
}

.interactive {
	-webkit-transition: background-color 50ms ease-out, color 50ms ease-out;
	transition: background-color 50ms ease-out, color 50ms ease-out;
	cursor: pointer;
}

.wrapper-1ZcZW- {
	font-weight: 500;
	unicode-bidi: plaintext;
	background: hsl(235 calc(1 * 85.6%) 64.7%/0.3);
}