give some padding to the Doomsday warning

1 files changed, 11 insertions, 2 deletions

diff --git a/src/views/Registration.vue b/src/views/Registration.vue
index 54bee98..9d37eb8 100644
--- a/src/views/Registration.vue
+++ b/src/views/Registration.vue
@@ -4,8 +4,8 @@
 		<p>Welcome to The Mana World! With this form you can register for a new game account.</p>
 		<p>Please note that you will also need to download and install <a href="https://wiki.themanaworld.org/index.php/Downloads" target="_blank">ManaPlus</a>, our official game client.</p>
 		<br>
-		<div style="background-color: #FFAAAA; text-align: center; border: 1px solid #BB5555; margin-bottom: 10px; text-color: white;">
-		<b>The apocalypse is upon us.</b> Due the Doomsday Event, during event times, powerful monsters may be found in otherwise safe areas, and sometimes even inside towns. <a href="https://forums.themanaworld.org/viewtopic.php?p=160290#p160290">Read more details here &#xffeb;</a>
+		<div class="specialEvent">
+			<b>The apocalypse is upon us.</b> Due the Doomsday Event, during event times, powerful monsters may be found in otherwise safe areas, and sometimes even inside towns. <a href="https://forums.themanaworld.org/viewtopic.php?p=160290#p160290">Read more details here &#xffeb;</a>
 		</div>
 		<button v-if="!step" @click="isRecaptchaAccepted ? start() : step = -2">Begin!</button>
 
@@ -339,6 +339,15 @@ form {
 	margin-top: 20px;
 }
 
+.specialEvent {
+	background-color: #FFAAAA;
+	text-align: center;
+	border: 3px outset #843732;
+	margin-bottom: 10px;
+	padding: 5px;
+	color: #843732;
+}
+
 .registration {
 	& label {
 		display: block;