diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
index 925fdd7..98fc38a 100755
--- a/src/_includes/layout.njk
+++ b/src/_includes/layout.njk
@@ -4,25 +4,29 @@ username: Laureηt
 
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ username }}</title>
-    <link rel="stylesheet" href="{{ '/css/main.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
     <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
     <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
   </head>
+
   <body>
 
-    <header>
+    <header role="banner">
       <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
-      <span class="blink" style="display:inline;">_</span>
+      <i class="blink">_</i>
     </header>
 
-    {{ content | safe }}
+    <main role="main">
+      {{ content | safe }}
+    </main>
 
-    <footer>
+    <footer role="contentinfo">
       &copy; {% year %}
       {{ username }}
     </footer>
@@ -52,6 +56,7 @@ username: Laureηt
           }, 10000)
         });
     </script>
+
   </body>
 
 </html>
diff --git a/src/_includes/layout_eportfolio.njk b/src/_includes/layout_eportfolio.njk
index 25394bf..3095644 100755
--- a/src/_includes/layout_eportfolio.njk
+++ b/src/_includes/layout_eportfolio.njk
@@ -4,35 +4,41 @@ username: Laureηt
 
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ username }}</title>
-    <link rel="stylesheet" href="{{ '/css/main.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/eportfolio.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
     <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
     <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
   </head>
+
   <body>
 
-    <header style="margin-bottom: 0;">
-      <div style="height: 30px;">
-        <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
-        <span class="blink" style="display:inline;">_</span>
-      </div>
-      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
+    <header role="banner">
+      <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
+      <i class="blink" style="display:inline;">_</i>
     </header>
 
-    <hr style="margin-top: .5em;">
-    {{ content | safe }}
+    <nav id="11ty-nav" role="navigation">
+      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
+      <hr>
+    </nav>
 
-    <div class="btn-back">
-      <span>&laquo;</span>
+    <main role="main">
+      {{ content | safe }}
+    </main>
+
+    <nav id="btn-back" role="navigation">
+      <i>&laquo;</i>
       <a href="{{ '/' | url }}">Go back</a>
-    </div>
+    </nav>
 
-    <footer>
-        &copy; {% year %}
+    <footer role="contentinfo">
+      &copy; {% year %}
       {{ username }}
     </footer>
 
@@ -61,6 +67,7 @@ username: Laureηt
           }, 10000)
         });
     </script>
+
   </body>
 
 </html>
diff --git a/src/resume/resume.njk b/src/resume/resume.njk
index 041fa3d..4787a19 100644
--- a/src/resume/resume.njk
+++ b/src/resume/resume.njk
@@ -15,9 +15,9 @@ permalink: "resume/{{ resume.locale }}/index.html"
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ username }}</title>
-    <link rel="stylesheet" href="{{ '/css/main.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/resume.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
     <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
     <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
diff --git a/src/scss/blink.scss b/src/scss/anim.scss
similarity index 86%
rename from src/scss/blink.scss
rename to src/scss/anim.scss
index b201202..a877292 100755
--- a/src/scss/blink.scss
+++ b/src/scss/anim.scss
@@ -17,9 +17,11 @@
   0% {
     opacity: 1.0;
   }
+
   50% {
     opacity: 0.0;
   }
+
   100% {
     opacity: 1.0;
   }
@@ -29,9 +31,11 @@
   0% {
     opacity: 1.0;
   }
+
   50% {
     opacity: 0.0;
   }
+
   100% {
     opacity: 1.0;
   }
@@ -41,3 +45,13 @@
   animation: blink 1s step-start 0s infinite;
   -webkit-animation: blink 1.5s step-start 0s infinite;
 }
+
+@keyframes intro {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/scss/eportfolio.scss b/src/scss/eportfolio.scss
new file mode 100644
index 0000000..28cb2af
--- /dev/null
+++ b/src/scss/eportfolio.scss
@@ -0,0 +1,16 @@
+hr {
+  visibility: hidden;
+  margin: 1rem 0;
+}
+
+nav {
+  hr {
+    visibility: visible;
+  }
+}
+
+#btn-back {
+  display: flex;
+  justify-content: center;
+  gap: .2rem;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
deleted file mode 100755
index c5ad437..0000000
--- a/src/scss/main.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-* {
-  scrollbar-color: #202324 #454a4d;
-}
-
-html,
-body {
-  background-color: #232830;
-}
-
-body {
-  font-family: 'Lora', serif;
-  font-size: 26px;
-  text-rendering: optimizeLegibility;
-  max-width: 40em;
-  margin: 0 auto;
-  padding: 1em;
-  animation: intro .3s both;
-  animation-delay: .15s;
-}
-
-body,
-a {
-  color: #c0c5ce;
-}
-
-a {
-  text-decoration: underline;
-  text-decoration-color: #283593;
-  text-decoration-thickness: 2px;
-}
-
-a:hover {
-  text-decoration: underline;
-  text-decoration-color: #5f5fc4;
-  text-decoration-thickness: 2px;
-}
-
-p {
-  margin-bottom: .7em;
-  text-align: justify;
-}
-
-h1 {
-  font-size: 2em;
-  margin-bottom: .7em;
-}
-
-ol,
-ul {
-  margin: .7em 0 0 1.4em;
-}
-
-li {
-  margin-bottom: 0.4em;
-}
-
-hr {
-  border: 0;
-  border-top: 1px dashed #c0c5ce;
-  height: 0;
-  margin: 1.7em 0;
-}
-
-header {
-  margin: 1.2em 0 2em;
-}
-
-footer {
-  color: #8e8e8e;
-  font-size: .7em;
-  text-align: center;
-  margin: 5em 0 2em;
-}
-
-.blink {
-  margin-left: -5px;
-}
-
-.btn-back {
-  text-align: center;
-  margin: 3em 0 3em;
-}
-
-.btn-back span {
-  display: inline-block;
-  transform: scale(2.5);
-  translate: -.2em -.1em;
-}
-
-@media screen and (max-width: 700px) {
-  body {
-    font-size: 17px;
-  }
-
-  ol,
-  ul {
-    padding-left: 17px;
-  }
-}
-
-video {
-  width: 100%;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-}
-
-header>ul {
-  list-style: none;
-  padding: 0;
-  margin: 1em 0 0 0;
-}
-
-header>ul>li {
-  display: inline;
-  margin-right: .5em;
-}
-
-
-@keyframes intro {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/src/scss/style.scss b/src/scss/style.scss
new file mode 100755
index 0000000..919a473
--- /dev/null
+++ b/src/scss/style.scss
@@ -0,0 +1,98 @@
+$background: #232830;
+$foreground-text: #c0c5ce;
+
+* {
+  margin: 0;
+  padding: 0;
+  scrollbar-color: #202324 #454a4d;
+}
+
+body {
+  background-color: $background;
+  color: $foreground-text;
+
+  font-family: 'Lora', serif;
+  text-rendering: optimizeLegibility;
+  font-size: 1.5rem;
+
+  width: 60rem;
+  margin: auto;
+
+  animation: intro .3s both;
+  animation-delay: .15s;
+}
+
+a {
+  color: $foreground-text;
+  text-decoration: underline;
+  text-decoration-color: #283593;
+
+  &:hover {
+    text-decoration-color: #5f5fc4;
+  }
+}
+
+header {
+  margin: 2rem 0;
+}
+
+footer {
+  color: #8e8e8e;
+  font-size: 1rem;
+  text-align: center;
+  margin: 3rem 0;
+}
+
+hr {
+  border: 0;
+  height: 0;
+  border-top: 1px dashed #c0c5ce;
+  margin: 2rem 0;
+}
+
+h1 {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  text-align: justify;
+}
+
+ol,
+ul {
+  margin: 1rem 0 0 3rem;
+
+  li {
+    margin-bottom: 1rem;
+  }
+}
+
+video {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
+nav {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 1em 0 0 0;
+
+    li {
+      display: inline;
+      margin-right: .5em;
+    }
+  }
+
+  hr {
+    margin: 0.5rem 0 2rem 0;
+  }
+}
