Refactor hero section layout and update footer privacy notice for clarity

base/static/css/main.css

@@ -77,11 +77,6 @@ article.message {
 }
 
 #hero {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background: radial-gradient(
         circle 50vh at calc(100vw - 4rem) 50%,
         var(--pico-primary-background),
@@ -90,19 +85,41 @@ article.message {
         color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%,
         color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%,
         var(--pico-background-color));
-    display: grid;
-    grid-template-rows: 1fr min-content;
-    align-items: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow-y: auto;
     padding: 4rem;
 
-    .big-logo {
-        font-size: 8rem;
+    main {
+        display: contents;
     }
-
-    h1 {
-        font-size: 4rem;
+    section {
+        max-width: 20rem;
     }
 }
+.full-page {
+    height: 100%;
+        display: grid;
+        grid-template-rows: 1fr;
+        align-items: center;
+        margin-bottom: 4rem;
+
+        &.r {
+            -ms-grid-column-align: end;
+        }
+        .big-logo {
+            font-size: 8rem;
+        }
+
+        h1 {
+            font-size: 4rem;
+        }
+}
+
 
 h1,
 h2,
@@ -201,3 +218,7 @@ table.results, table.musics {
         }
     }
 }
+
+.brand-name {
+    color: var(--pico-primary);
+}