Added the first basic slide in/slide out animations

multistream-alerts/style.css

@@ -1,7 +1,7 @@
 * {
 	margin: 0;
 	padding: 0;
-	--margin: 40px;
+	--margin: 20px;
 	/* --border-radius: 20px; */
 	font-size: 30px;
 	/* --line-spacing: 1.7em; */
@@ -40,19 +40,22 @@ html {
 	display: block;
 	position: absolute;
 	width: 100%;
-	padding: var(--margin);
+	padding: calc(2 * var(--margin));
 	box-sizing: border-box;
 }
 
 #alertBox {
-	display: flex;
-	padding: 0.5em;
+	/* padding: 0.5em; */
 	border-radius: 0.75em;
 	filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1));
 	position: relative;
-	align-items: center;
 	overflow: hidden;
+	box-sizing: border-box;
 	/* text-align: center; */
+	position: relative;
+	/* transition: all 1s ease-in-out; */
+	min-height: 0px;
+	height: 0px;
 }
 
 /* #alertBox::before {
@@ -71,6 +74,16 @@ html {
 	z-index: -1;
 } */
 
+#theContentThatShowsFirstInsteadOfSecond {
+	display: flex;
+	align-items: center;
+	z-index: 1;
+	position: absolute;
+	left: var(--margin);
+	top: var(--margin);
+	transition: inherit;
+}
+
 #avatar {
 	display: inline;
 	max-width: 100%;
@@ -99,14 +112,48 @@ html {
 	font-weight: 400;
 }
 
-.profilePic {	
+.profilePic {
 	border-radius: 50%;
 }
 
-.square {	
+.square {
 	border-radius: 0.5em;
 }
 
+#message {
+	position: absolute;
+	width: calc(100% - 2 * var(--margin));
+	z-index: 0;
+	left: var(--margin);
+	top: var(--margin);
+	transition: inherit;
+	font-style: italic;
+}
+
+@keyframes slideInFromTop {
+	0% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackUp {
+	0% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
 /*****************/
 /** CARD COLORS **/
 /*****************/