alerts now float all the way to the top

templates/default-layout.lucius

@@ -152,6 +152,7 @@ h4 {
 
 /* LAYOUT */
 .main {
+  position: relative;
   min-height: calc(100vh - var(--header-height));
 }
 

templates/standalone/alerts.lucius

@@ -43,10 +43,7 @@
   padding-left: 20px;
   margin-left: 20px;
   animation: slide-in-alert .2s ease-out forwards;
-
-  + .alert:not(.alert--invisible) {
-    margin-top: 20px;
-  }
+  margin-bottom: 20px;
 
   &:hover {
 
@@ -190,4 +187,6 @@
 .alert--invisible {
   max-height: 0;
   transform: translateX(120%);
+  margin-bottom: 0;
+  overflow: hidden;
 }