Added tabs

styles.css

@@ -4,8 +4,10 @@
     --footer-colour: #00000031;
     --text-colour: #f6f7eb;
     --text-accent-colour: #e94f37;
+    --button-border-colour: var(--text-accent-colour);
+    --button-border-highlight-colour: #f7b3a9;
 
-    --header-size: 100px;
+    --header-size: 50px;
 }
 
 
@@ -40,6 +42,11 @@ header {
 header > div {
     width: 100vw;
     height: var(--header-size);
+    backdrop-filter: blur(10px);
+}
+
+header > div > * {
+    height: var(--header-size);
 }
 
 main {
@@ -49,6 +56,16 @@ main {
     background-color: var(--main-colour);
 }
 
+main > article {
+    display: unset;
+    transition: filter 0.5s, opacity 0.5s;
+}
+
+.hiddenTab {
+    filter: blur(10px);
+    opacity: 0;
+}
+
 footer {
     flex: 0 1 auto;
     display: flex;
@@ -68,6 +85,28 @@ footer > div > * {
 }
 
 
+button {
+    display: inline-flex;
+    padding: 5px;
+    border: none;
+    border-bottom: 2px solid var(--text-accent-colour);
+    background-color: #212425;
+    color: var(--text-colour);
+    align-items: center;
+    cursor: pointer;
+    transition: border-bottom-color 0.5s;
+}
+
+button > img {
+    filter: invert();
+    margin-right: 5px;
+}
+
+button:hover, .buttonHighlight {
+    border-bottom-color: var(--button-border-highlight-colour);
+}
+
+
 
 .textHighlight {
     color: var(--text-accent-colour);