fixed styling issues

src/app/footer/footer.component.scss

@@ -13,7 +13,7 @@
 
   .naam {
     font-size: 1.5rem;
-    font-weight: bold;
+    font-weight: 500;
     text-transform: uppercase;
     word-spacing: 0.7rem;
     margin-bottom: 0.5rem;

src/app/hero/hero.component.html

@@ -1,5 +1,5 @@
 <a href="/" aria-label="Ontvlambaar"><img src="assets/logo-dark.svg" alt="Logo dark" class="only-on-dark" /></a>
 <a href="/" aria-label="Ontvlambaar"><img src="assets/logo-light.svg" alt="Logo light" class="only-on-light" /></a>
 <h1>Ontvlambaar</h1>
-<span class="slogan">Jullie het vuur, wij de branding</span>
+<span class="slogan">Jullie&nbsp;het&nbsp;vuur, wij&nbsp;de&nbsp;branding</span>
 <app-toggle (toggleOn)="themeClicked($event)" [toggleValue]="isDarkMode()"></app-toggle>

src/app/hero/hero.component.scss

@@ -33,10 +33,10 @@ img {
 
 @media only screen and (max-width: $small-screen) {
   h1 {
-    font-size: 2rem;
+    font-size: 3rem;
   }
   .slogan {
-    font-size: 1.5rem;
+    font-size: 2rem;
   }
 
   :host {

src/app/services/services.component.scss

@@ -16,7 +16,7 @@
   gap: 1rem;
 
   h2 {
-    font-size: 1.3rem;
+    font-size: 1.5rem;
     font-weight: 300;
     margin: 0;
     display: flex;
@@ -36,6 +36,10 @@
     width: fit-content;
     align-self: flex-start;
 
+    h2 {
+      font-size: 1.3rem;
+    }
+
     img {
       height: 100%;
     }

src/styles.scss

@@ -17,6 +17,10 @@ html {
   .only-on-dark {
     display: none;
   }
+
+  h2 {
+    font-weight: 500;
+  }
 }
 
 [data-theme="dark"] {