remove cakes from header, adjust markup

index.html

@@ -16,19 +16,18 @@
 
 <main>
   <header>
-    <h1>so basically? <b class=cake>im gecs</b></h1>
+    <h1>so basically? <b>im gecs</b></h1>
     <div id=mlem>
       <p class='mlem-text niss'>“mlem”</p>
       <p class='mlem-text nisse'>“mlem also”</p>
       <picture>
         <source srcset=images/mlem_static.png media='(prefers-reduced-motion)'>
-        <img src=images/mlem.gif alt='niss &amp; nisse'>
+        <img src=images/mlem.gif alt='— the gecs'>
       </picture>
     </div>
-    <h2>
+    <p>
       a <ruby><b>big one</b> <rp>(<rt>niss<rp>)</ruby>
       and a <ruby><b>little one</b> <rp>(<rt>nisse<rp>)</ruby>
-    </h2>
   </header>
 
   <hr>

style.css

@@ -12,6 +12,7 @@ body {
         hsl(155deg, 70%,  62%)
       );
   --bg-image: url(images/niss_uwu_bg.png);
+  --size: 1.75rem;
   --weight: 600;
 
   background:
@@ -20,7 +21,7 @@ body {
   background-blend-mode: overlay;
 
   font-family: 'Muller';
-  font-size: 1.75rem;
+  font-size: var(--size);
   font-weight: var(--weight);
   color: white;
   text-shadow:
@@ -45,7 +46,7 @@ main {
   margin: 0 auto 1em;
 }
 
-h1, h2, h3, h4, h5, h6 {
+header p, h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
   margin-top: 0;
 }
@@ -54,6 +55,10 @@ h1 {
   font-size: 200%;
 }
 
+h2, header p {
+  font-size: 150%;
+}
+
 b {
   font-weight: 800;
 }
@@ -65,6 +70,7 @@ b {
   width: 420px;
 }
 .mlem-text {
+  font-size: var(--size);
   position: absolute;
   font-weight: 700;
   margin: 0;
@@ -82,7 +88,7 @@ header {
 header h1 {
   margin-top: 0;
 }
-header rt {
+rt {
   font-size: 60%;
   font-style: italic;
 }
@@ -144,29 +150,26 @@ a:hover {
   color: hsl(50deg, 100%, 82%);
 }
 
-.cake {
+
-  color: hsl(115deg, 100%, 84%);
+:is(rt, h1, h2)::before, :is(rt, h1, h2)::after {
-}
-.cake::before, .cake::after,
-header rt::before, header rt::after,
-section h2::before, section h2::after {
-  mix-blend-mode: overlay;
   padding: 0 0.25em;
   vertical-align: middle;
   display: inline-block;
   height: 1em; width: 1em;
+  mix-blend-mode: overlay;
+  content: var(--around-image);
 }
-.cake::before, .cake::after { content: url(images/shortcake.svg); }
+
-header rt::before, header rt::after { content: url(images/star.svg); }
+rt { --around-image: url(images/star.svg); }
-section h2::before, section h2::after {
+h1, h2 { --around-image: url(images/sparkles.svg); }
-  content: url(images/sparkles.svg);
+
-}
 
 .emojo {
   vertical-align: middle;
   height: 1.2em; width: 1.2em;
 }
 
+
 footer {
   max-width: 35em;
   margin: 2em auto 0;
@@ -244,9 +247,7 @@ footer a {
     border-color: hsla(0, 0%, 0%, 30%);
   }
 
-  .cake::before, .cake::after,
+  :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after {
-  header rt::before, header rt::after,
-  section h2::before, section h2::after {
     mix-blend-mode: screen;
   }
 
@@ -280,10 +281,7 @@ footer a {
     background-blend-mode: initial;
   }
 
-  .cake::before, .cake::after,
+  :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after {
-  header rt::before, header rt::after,
-  section h2::before, section h2::after,
-  [title]::after {
     mix-blend-mode: initial;
   }
 }