Explain difference in logo variants

styleguide/assets/style/styleguide.scss

@@ -31,16 +31,16 @@ body {
       object-fit: contain;
     }
 
-    #backToWiki > img {
+    #backToWiki>img {
       transition: transform 200ms;
     }
 
-    #backToWiki:hover > img {
+    #backToWiki:hover>img {
       transform: scale(1.05);
     }
   }
 
-  > div {
+  >div {
     display: flex;
     gap: 1rem;
     flex-grow: 1;
@@ -136,7 +136,7 @@ body {
             }
           }
 
-          > a {
+          >a {
             display: flex;
             align-items: center;
             gap: 0.5rem;
@@ -226,6 +226,10 @@ body {
   }
 }
 
+.background {
+  background-color: var(--color-background);
+}
+
 a {
 
   &.a-regular,
@@ -298,14 +302,14 @@ pre,
   display: flex;
   width: 100%;
 
-  & > * {
+  &>* {
     width: 100%;
   }
 
   @media (max-width: $breakpoint-mobile) {
     flex-wrap: wrap;
 
-    & > * {
+    &>* {
       width: 100%;
     }
   }
@@ -315,7 +319,7 @@ pre,
   display: flex;
   align-items: center;
 
-  & > * {
+  &>* {
     width: 100%;
   }
 
@@ -323,14 +327,14 @@ pre,
     flex-wrap: wrap;
     justify-content: center;
 
-    & > * {
+    &>* {
       width: 100%;
     }
   }
 }
 
 
-main > div.generator {
+main>div.generator {
   display: flex;
   flex-direction: column;
   gap: 1em;
@@ -361,7 +365,7 @@ main > div.generator {
     gap: 1rem;
     margin-top: 2rem;
 
-    & > span {
+    &>span {
       width: 100%;
       font-size: var(--text-xl);
     }