<h5 class="text-center h4 my-7">This app is a little different from what you're used to.</h5>
<div class="grid place-content-center text-justify text-lg mb-10">
	<p class="text-xl mb-3 italic underline underline-offset-8">
		So please actually read the following:
	</p>
	<div id="info">
		<p>
			<b class="text-secondary-500">Discreetly</b> is an <b>anonymous</b> chat app
		</p>
		<p>Yes, you are <i>actually</i> anonymous, don't abuse it</p>
		<p>
			But you can still get <b class="text-secondary-500">banned</b> if you
			<b class="text-secondary-500">spam</b>, or if you get
			<b class="text-secondary-500">voted out</b>
			<small class="text-surface-400 italic">coming soon</small>.
		</p>
		<p>
			There is
			<b class="text-secondary-500">no unban</b>
		</p>
		<p>
			<b>Backup your identity</b>, there is
			<i class="text-secondary-500">no account recovery</i>
		</p>
		<p class="mt-2 mb-4">
			If you want to understand how this works:
			<a href="/about" class="btn btn-sm variant-soft-tertiary ms-2 mt-2">Read More Here</a>
		</p>
	</div>
</div>

<style>
	#info p {
		margin-bottom: 0.7rem;
	}
	#info p::before {
		content: '•';
		padding-right: 0.45em;
		color: rgb(var(--color-secondary-500));
	}
</style>
