diff --git a/package.json b/package.json
index 5a75b04..1ad64f0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "accessible-astro-starter",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "start": "astro dev",
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3dd5409..7c28676 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -15,10 +15,10 @@ import SkipLinks from '../components/SkipLinks.astro'
   </section>
 </header>
 
-<style lang="scss" global>
+<style lang="scss">
   @use '../styles/base/breakpoint' as *;
 
-  .container.temp {
+  .container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 1d0031d..1677939 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -53,7 +53,7 @@
 
 </script>
 
-<style lang="scss" global>
+<style lang="scss">
   @use '../styles/base/breakpoint' as *;
 
   nav {
diff --git a/src/styles/base/_auto-grid.scss b/src/styles/base/_auto-grid.scss
index d702886..fe190ae 100644
--- a/src/styles/base/_auto-grid.scss
+++ b/src/styles/base/_auto-grid.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> auto-grid
- | -------------------------------------------------------------
- |
- | 	Easy to implement column layouts with display grid.
- |
-*/
+// | -------------------------------------------------------------
+// | > Auto Grid
+// | -------------------------------------------------------------
+// |   Easy to implement column layouts with display grid.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;
diff --git a/src/styles/base/_breakpoint.scss b/src/styles/base/_breakpoint.scss
index 20431f4..8e825b7 100644
--- a/src/styles/base/_breakpoint.scss
+++ b/src/styles/base/_breakpoint.scss
@@ -1,11 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> breakpoint
- | -------------------------------------------------------------
- |
- | 	Breakpoint mixin used in the other base files.
- |
-*/
+// | -------------------------------------------------------------
+// | > Breakpoint
+// | -------------------------------------------------------------
+// |   Breakpoint mixin used in the other base files or in a
+// |   project.
+// | -------------------------------------------------------------
 
 // breakpoints map
 $breakpoints: (
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index dc578a1..960fa87 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> color
- | -------------------------------------------------------------
- |
- | 	Color map with HSL values. Used to create Custom Properties
- |  in _root.scss.
- |
-*/
+// | -------------------------------------------------------------
+// | > Color
+// | -------------------------------------------------------------
+// |   Color map with HSL values. Used to create Custom
+// |   Properties in _root.scss.
+// | -------------------------------------------------------------
 
 $colors: (
   primary-clr: (
diff --git a/src/styles/base/_elevation.scss b/src/styles/base/_elevation.scss
index 31772e9..2681c01 100644
--- a/src/styles/base/_elevation.scss
+++ b/src/styles/base/_elevation.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> elevation
- | -------------------------------------------------------------
- |
- |  Box-shadow mixins used as tokens in _tokens.scss
- |
-*/
+// | -------------------------------------------------------------
+// | > Elevation
+// | -------------------------------------------------------------
+// |   Box-shadow mixins used as tokens in _utility.scss.
+// | -------------------------------------------------------------
 
 // use to override other elevations
 @mixin elevation-000 {
diff --git a/src/styles/base/_font.scss b/src/styles/base/_font.scss
index 0884fb2..2b5d68e 100644
--- a/src/styles/base/_font.scss
+++ b/src/styles/base/_font.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> font
- | -------------------------------------------------------------
- |
- | 	Default font declarations and sizes.
- |
-*/
+// | -------------------------------------------------------------
+// | > Font
+// | -------------------------------------------------------------
+// |   Default font declarations and sizes.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;
@@ -22,10 +19,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
-  *:focus {
-    @include outline;
-  }
-
+  // anchor links
   a {
     color: var(--action-color);
 
@@ -47,6 +41,22 @@ body {
   }
 
   // headings
+  :where(h1, h2) {
+    font-family: var(--font-family-special);
+  }
+
+  h1,
+  h2 {
+    font-weight: 800;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
   h1 {
     @include size-36;
 
@@ -94,20 +104,4 @@ body {
       @include size-18;
     }
   }
-
-  :where(h1, h2) {
-    font-family: var(--font-family-special);
-  }
-
-  h1,
-  h2 {
-    font-weight: 800;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 600;
-  }
 }
diff --git a/src/styles/base/_grid.scss b/src/styles/base/_grid.scss
index 2083e9e..453aa7a 100644
--- a/src/styles/base/_grid.scss
+++ b/src/styles/base/_grid.scss
@@ -1,15 +1,12 @@
-/*
- | -------------------------------------------------------------
- |	--> grid
- | -------------------------------------------------------------
- |
- | 	This file contains all the settings for making flexible
- |	grids. Just apply a combination of these classes to build
- | 	your own grid in the front-end.
- |
- |  Docs: https://www.markteekman.nl/project/flexbox-grid
- |
-*/
+// | -------------------------------------------------------------
+// | > Grid
+// | -------------------------------------------------------------
+// |   This file contains all the settings for making flexible
+// |   grids. Just apply a combination of these classes to build
+// |   your own grid in the front-end.
+// |
+// |   Docs: https://www.markteekman.nl/project/flexbox-grid
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "sass:math";
diff --git a/src/styles/base/_list.scss b/src/styles/base/_list.scss
index d8c79ff..6af2dbb 100644
--- a/src/styles/base/_list.scss
+++ b/src/styles/base/_list.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> lists
- | -------------------------------------------------------------
- |
- | 	A set of defaults styles for standard ordered and unordered
- |  lists.
- |
-*/
+// | -------------------------------------------------------------
+// | > Lists
+// | -------------------------------------------------------------
+// |   A set of default styles for standard ordered and
+// |   unordered lists.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;
diff --git a/src/styles/base/_outline.scss b/src/styles/base/_outline.scss
index 2f394f8..6960079 100644
--- a/src/styles/base/_outline.scss
+++ b/src/styles/base/_outline.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> outline
- | -------------------------------------------------------------
- |
- | 	Outline mixin to help with (tab)focus of different elements
- | 	on the page.
- |
-*/
+// | -------------------------------------------------------------
+// | > Outline
+// | -------------------------------------------------------------
+// |   Outline mixin to help with (tab)focus of different
+// |   elements on the page.
+// | -------------------------------------------------------------
 
 @mixin outline {
   outline: 2px dotted black;
@@ -15,3 +12,13 @@
   -webkit-box-shadow: 0 0 0 2px white;
   box-shadow: 0 0 0 2px white;
 }
+
+*:focus,
+*:focus-visible {
+  @include outline;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss
index e5faac2..175cfb8 100644
--- a/src/styles/base/_reset.scss
+++ b/src/styles/base/_reset.scss
@@ -1,12 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> reset
- | -------------------------------------------------------------
- |
- | 	A set of reset declarations to prevent inconsistencies
- | 	between browser vendors.
- |
-*/
+// | -------------------------------------------------------------
+// | > Reset
+// | -------------------------------------------------------------
+// |   A set of reset declarations to prevent inconsistencies
+// |   between browser vendors.
+// | -------------------------------------------------------------
 
 // set box sizing and scroll behaviour
 html {
diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss
index 11864ce..de4252c 100644
--- a/src/styles/base/_root.scss
+++ b/src/styles/base/_root.scss
@@ -1,11 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> root
- | -------------------------------------------------------------
- |
- | 	Sets all custom properties (variables) to the root element.
- |
-*/
+// | -------------------------------------------------------------
+// | > Root
+// | -------------------------------------------------------------
+// |   Sets all custom properties (variables) to the root
+// |   element.
+// | -------------------------------------------------------------
 
 @use "color" as *;
 
diff --git a/src/styles/base/_size.scss b/src/styles/base/_size.scss
index b1ff2f1..ff93c99 100644
--- a/src/styles/base/_size.scss
+++ b/src/styles/base/_size.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> size
- | -------------------------------------------------------------
- |
- |  Size mixins used in _tokens.scss and other base files.
- |
-*/
+// | -------------------------------------------------------------
+// | > Size
+// | -------------------------------------------------------------
+// |   Size mixins used in _utility.scss and other base files.
+// | -------------------------------------------------------------
 
 // size mixins
 @mixin size-10 {
diff --git a/src/styles/base/_space.scss b/src/styles/base/_space.scss
index 2c94e4f..f9414ac 100644
--- a/src/styles/base/_space.scss
+++ b/src/styles/base/_space.scss
@@ -1,11 +1,9 @@
-/*
- | -------------------------------------------------------------
- |	--> space
- | -------------------------------------------------------------
- |
- |  Space variables used in _tokens.scss and other base files.
- |
-*/
+// | -------------------------------------------------------------
+// | > Space
+// | -------------------------------------------------------------
+// |   Space variables used in _utility.scss and other base
+// |   files.
+// | -------------------------------------------------------------
 
 // space variables
 $space-2: 0.125rem;
diff --git a/src/styles/base/_utility.scss b/src/styles/base/_utility.scss
index 1cd7adb..f07d3d9 100644
--- a/src/styles/base/_utility.scss
+++ b/src/styles/base/_utility.scss
@@ -1,12 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> utility
- | -------------------------------------------------------------
- |
- | 	This file contains all the utility tokens which are distilled
- |  from bases styles.
- |
-*/
+// | -------------------------------------------------------------
+// | > Utility
+// | -------------------------------------------------------------
+// |   This file contains all the utility tokens.
+// | -------------------------------------------------------------
 
 @use 'utilities/align-horizontal';
 @use 'utilities/align-vertical';
diff --git a/src/styles/base/utilities/_align-horizontal.scss b/src/styles/base/utilities/_align-horizontal.scss
index 776e584..1518378 100644
--- a/src/styles/base/utilities/_align-horizontal.scss
+++ b/src/styles/base/utilities/_align-horizontal.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> align horizontal
- | -------------------------------------------------------------
- |
- | 	Align horizontal utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Align Horizontal
+// | -------------------------------------------------------------
+// |   Align Horizontal utility token.
+// | -------------------------------------------------------------
 
 .align-horizontal {
   display: flex;
diff --git a/src/styles/base/utilities/_align-vertical.scss b/src/styles/base/utilities/_align-vertical.scss
index 8d32b19..a2040a1 100644
--- a/src/styles/base/utilities/_align-vertical.scss
+++ b/src/styles/base/utilities/_align-vertical.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> align vertical
- | -------------------------------------------------------------
- |
- | 	Align vertical utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Align Vertical
+// | -------------------------------------------------------------
+// |   Align Vertical utility token.
+// | -------------------------------------------------------------
 
 .align-vertical {
   display: flex;
diff --git a/src/styles/base/utilities/_colors.scss b/src/styles/base/utilities/_colors.scss
index 392529a..ebc1330 100644
--- a/src/styles/base/utilities/_colors.scss
+++ b/src/styles/base/utilities/_colors.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> Colors
- | -------------------------------------------------------------
- |
- | 	Colors utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Colors
+// | -------------------------------------------------------------
+// |   Colors utility token.
+// | -------------------------------------------------------------
 
 .color-neutral {
   background-color: var(--neutral-background);
diff --git a/src/styles/base/utilities/_contents.scss b/src/styles/base/utilities/_contents.scss
index 7fa3d4c..447dfd5 100644
--- a/src/styles/base/utilities/_contents.scss
+++ b/src/styles/base/utilities/_contents.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> Contents
- | -------------------------------------------------------------
- |
- | 	Contents utility token.
- |
-*/
+// | -------------------------------------------------------------
+// | > Contents
+// | -------------------------------------------------------------
+// |   Contents utility token.
+// | -------------------------------------------------------------
 
 .contents {
   display: contents;
diff --git a/src/styles/base/utilities/_elevations.scss b/src/styles/base/utilities/_elevations.scss
index cfd12f7..05b7667 100644
--- a/src/styles/base/utilities/_elevations.scss
+++ b/src/styles/base/utilities/_elevations.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> elevation
- | -------------------------------------------------------------
- |
- | 	Elevation utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Elevations
+// | -------------------------------------------------------------
+// |   Elevations utility token.
+// | -------------------------------------------------------------
 
 @use '../elevation' as *;
 
diff --git a/src/styles/base/utilities/_gutter-gap.scss b/src/styles/base/utilities/_gutter-gap.scss
index c142a80..ff4f92b 100644
--- a/src/styles/base/utilities/_gutter-gap.scss
+++ b/src/styles/base/utilities/_gutter-gap.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> gutter gap
- | -------------------------------------------------------------
- |
- | 	Gutter gap utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Gutter
+// | -------------------------------------------------------------
+// |   Gutter utility token.
+// | -------------------------------------------------------------
 
 .gap-small {
   gap: var(--gap-small);
diff --git a/src/styles/base/utilities/_margins.scss b/src/styles/base/utilities/_margins.scss
index d6d3c05..277be51 100644
--- a/src/styles/base/utilities/_margins.scss
+++ b/src/styles/base/utilities/_margins.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> margins
- | -------------------------------------------------------------
- |
- | 	Margins utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Margins
+// | -------------------------------------------------------------
+// |   Margins utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../space' as *;
diff --git a/src/styles/base/utilities/_paddings.scss b/src/styles/base/utilities/_paddings.scss
index b33cbd0..d58f46c 100644
--- a/src/styles/base/utilities/_paddings.scss
+++ b/src/styles/base/utilities/_paddings.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> padding
- | -------------------------------------------------------------
- |
- | 	Padding utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Paddings
+// | -------------------------------------------------------------
+// |   Paddings utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../space' as *;
diff --git a/src/styles/base/utilities/_size-content.scss b/src/styles/base/utilities/_size-content.scss
index a012bb9..1ca3fe6 100644
--- a/src/styles/base/utilities/_size-content.scss
+++ b/src/styles/base/utilities/_size-content.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> size content
- | -------------------------------------------------------------
- |
- | 	Size content utility token.
- |
-*/
+// | -------------------------------------------------------------
+// | > Size Content
+// | -------------------------------------------------------------
+// |   Size Content utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../size' as *;
diff --git a/src/styles/base/utilities/_sizing.scss b/src/styles/base/utilities/_sizing.scss
index acff592..d3c2bc3 100644
--- a/src/styles/base/utilities/_sizing.scss
+++ b/src/styles/base/utilities/_sizing.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> sizing
- | -------------------------------------------------------------
- |
- | 	Sizing utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Sizing
+// | -------------------------------------------------------------
+// |   Sizing utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../size' as *;
diff --git a/src/styles/base/utilities/_space-content.scss b/src/styles/base/utilities/_space-content.scss
index 4c52dea..72d3d87 100644
--- a/src/styles/base/utilities/_space-content.scss
+++ b/src/styles/base/utilities/_space-content.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> Space content
- | -------------------------------------------------------------
- |
- | 	Space content utility token.
- |
-*/
+// | -------------------------------------------------------------
+// | > Space Content
+// | -------------------------------------------------------------
+// |   Space Content utility token.
+// | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../space' as *;
diff --git a/src/styles/base/utilities/_sr-only.scss b/src/styles/base/utilities/_sr-only.scss
index ed7015a..96a8010 100644
--- a/src/styles/base/utilities/_sr-only.scss
+++ b/src/styles/base/utilities/_sr-only.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> sr only
- | -------------------------------------------------------------
- |
- | 	Screen reader only utility token.
- |
-*/
+// | -------------------------------------------------------------
+// | > SR Only
+// | -------------------------------------------------------------
+// |   Screen Reader Only utility token.
+// | -------------------------------------------------------------
 
 .sr-only {
   position: absolute;
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4c1ce04..f99e2a5 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> global styles
- | -------------------------------------------------------------
- |
- | 	This file contains all the global styling components.
- |
-*/
+// | -------------------------------------------------------------
+// | > Globals
+// | -------------------------------------------------------------
+// |   This file contains all the global styling.
+// | -------------------------------------------------------------
 
 // global styles
 @use "base/reset";