Add github Actions deploy workflow

.github/workflows/deploy.yml

@@ -0,0 +1,19 @@
+name: Deploy to Server
+on:
+    push:
+        branches: [main]
+jobs:
+    deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Deploy via SSH
+              uses: appleboy/ssh-action@v1.0.3
+              with:
+                  host: ${{ secrets.SERVER_HOST }}
+                  username: ${{ secrets.SERVER_USERNAME }}
+                  key: ${{ secrets.SERVER_SSH_KEY }}
+                  script: |
+                      cd /home/prodesk/live-site || exit 1
+                      git checkout main
+                      git pull origin main
+                      echo "Deployed successfully"

index.html

@@ -21,13 +21,11 @@
         <button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
         <nav>
             <ul id="primary-navigation" data-visible="false" class="primary-navigation flex">
-                <li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://lab.moonmoon.tech"><span aria-hidden="true">01</span>Dashboard</a>
+                <li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://lab1.moonmoon.tech"><span aria-hidden="true">01</span>Dashboard</a>
-                <li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://pdf.moonmoon.tech"><span aria-hidden="true">02</span>PDF.tools</a>
+                <li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://tech.moonmoon.tech"><span aria-hidden="true">02</span>IT.tools</a>
-                <li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://tech.moonmoon.tech"><span aria-hidden="true">03</span>IT.tools</a>
+		<li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://myip.moonmoon.tech"><span aria-hidden="true">03</span>IP.tools</a>
-		<li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://myip.moonmoon.tech"><span aria-hidden="true">04</span>IP.tools</a>
+		<li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://omni.moonmoon.tech"><span aria-hidden="true">04</span>Omni.tools</a>
 		<li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://ll.moonmoon.tech"><span aria-hidden="true">05</span>Socials</a>
-		<li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://csanalyser.moonmoon.tech"><span aria-hidden="true">06</span>CStools</a>
-		<li><a class="ff-sans-cond uppercase text-white letter-spacing-1" href="https://www.cswatch.in"><span aria-hidden="true">07</span>CSwatch</a>
             </ul>
         </nav>
       </header>
@@ -38,8 +36,8 @@
         <div>
           <h1 class="text-accent fs-500 ff-sans-cond uppercase letter-spacing-1">Welcome to
           <span class="d-block fs-900 ff-serif text-white">Moon Moon's Hub</span></h1>
-          
+
-          <p>I am a 28-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server.
+          <p>I am a 29-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server.
             Some of these you can check out at my dashborad.</p>
         </div>
     </main>

navigation.js

@@ -1,14 +1,13 @@
-const nav = document.querySelector(".primary-navigation");
+const nav = document.querySelector(".primary-navigation");
-const navToggle = document.querySelector(".mobile-nav-toggle");
+const navToggle = document.querySelector(".mobile-nav-toggle");
-
+
-navToggle.addEventListener("click", () => {
+navToggle.addEventListener("click", () => {
-    
+    const visibility = nav.getAttribute("data-visible");
-    const visiblity = nav.getAttribute("data-visible");
+    if (visibility === "false") {
-    if (visiblity === "false") {
+        nav.setAttribute("data-visible", true);
-        nav.setAttribute("data-visible", true);
+        navToggle.setAttribute("aria-expanded", true);
-        navToggle.setAttribute("aria-expanded", true);
+    } else {
-    } else {
+        nav.setAttribute("data-visible", false);
-        nav.setAttribute("data-visible", false);
+        navToggle.setAttribute("aria-expanded", false);
-        navToggle.setAttribute("aria-expanded", false);
+    }
-    }
+});
-})

style.css

@@ -1,438 +1,492 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
-
+
-* {
+* {
-    margin: 0;
+    margin: 0;
-    padding: 0;
+    padding: 0;
-    box-sizing: border-box;
+    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
-}
+}
-/* ------------------- */
+/* ------------------- */
-/* Custom properties   */
+/* Custom properties   */
-/* ------------------- */
+/* ------------------- */
-
+
-:root {
+:root {
-    /* colors */
+    /* colors */
-    --clr-dark: 230 35% 7%;
+    --clr-dark: 230 35% 7%;
-    --clr-light: 231 77% 90%;
+    --clr-light: 231 77% 90%;
-    --clr-white: 0 0% 100%;
+    --clr-white: 0 0% 100%;
-    
+
-    /* font-sizes */
+    /* font-sizes */
-    --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
+    --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
-    --fs-800: 3.5rem;
+    --fs-800: 3.5rem;
-    --fs-700: 1.5rem;
+    --fs-700: 1.5rem;
-    --fs-600: 1rem;
+    --fs-600: 1rem;
-    --fs-500: 1rem;
+    --fs-500: 1rem;
-    --fs-400: 0.9375rem;
+    --fs-400: 0.9375rem;
-    --fs-300: 1rem;
+    --fs-300: 1rem;
-    --fs-200: 0.875rem;
+    --fs-200: 0.875rem;
-    
+
-    /* font-families */
+    /* font-families */
-    --ff-serif: "Bellefair", serif;
+    --ff-serif: "Bellefair", serif;
-    --ff-sans-cond: "Barlow Condensed", sans-serif;
+    --ff-sans-cond: "Barlow Condensed", sans-serif;
-    --ff-sans-normal: "Barlow", sans-serif;
+    --ff-sans-normal: "Barlow", sans-serif;
-}
+}
-
+
-@media (min-width: 35em) {
+@media (max-width: 35rem) {
-    :root {
+    .primary-navigation {
-        --fs-800: 5rem;
+        --underline-gap: 0.35rem;
-        --fs-700: 2.5rem;
+        position: fixed;
-        --fs-600: 1.5rem;
+        z-index: 1000;
-        --fs-500: 1.25rem;
+        inset: 0 0 0 28%;
-        --fs-400: 1rem;
+        list-style: none;
-    }
+        margin: 0;
-}
+        padding: min(16vh, 6rem) 1.25rem 1.5rem;
-
+        display: flex;
-@media (min-width: 45em) {
+        flex-direction: column;
-    :root {
+        gap: 0.5rem;
-        /* font-sizes */
+
-        --fs-800: 6.25rem;
+        background: rgba(10, 12, 18, 0.96);
-        --fs-700: 3.5rem;
+        backdrop-filter: blur(10px);
-        --fs-600: 2rem;
+        -webkit-backdrop-filter: blur(10px);
-        --fs-500: 1.75rem;
+        border-left: 1px solid rgba(255, 255, 255, 0.08);
-        --fs-400: 1.125rem;
+        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
-    }
+
-}
+        transform: translateX(100%);
-/* ------------------- */
+        transition: transform 500ms ease-in-out;
-/* Reset               */
+    }
-/* ------------------- */
+
-
+    .primary-navigation[data-visible="true"] {
-/* https://piccalil.li/blog/a-modern-css-reset/ */
+        transform: translateX(0);
-
+    }
-/* Box sizing */
+
-*,
+    .primary-navigation.underline-indicators > .active {
-*::before,
+        border: 0;
-*::after {
+    }
-    box-sizing: border-box;
+
-}
+    .primary-navigation a {
-
+        display: block;
-/* Reset margins */
+        margin: 0;
-body,
+        padding: 0.7rem 0;
-h1,
+        font-size: 1rem;
-h2,
+        line-height: 1.2;
-h3,
+    }
-h4,
+
-h5,
+    .primary-navigation a > span {
-p,
+        margin-right: 0.4em;
-figure,
+    }
-picture {
+
-    margin: 0; 
+    .primary-navigation a::after {
-}
+        bottom: 0;
-
+    }
-h1,
+
-h2,
+    .mobile-nav-toggle {
-h3,
+        display: block;
-h4,
+        position: absolute;
-h5,
+        z-index: 2000;
-h6,
+        right: 1rem;
-p {
+        top: 2rem;
-    font-weight: 400;
+        background: transparent;
-}
+        background-image: url("Assets/icon-hamburger.svg");
-
+        background-repeat: no-repeat;
-/* set up the body */
+        background-position: center;
-body {
+        width: 1.5rem;
-    color: hsl( var(--clr-white) );
+        aspect-ratio: 1;
-    font-family: var(--ff-sans-normal);
+        border: 0;
-    font-size: var(--fs-400);    
+    }
-    background-color: hsl( var(--clr-dark) );    
+
-    display: flex;
+    .mobile-nav-toggle[aria-expanded="true"] {
-    justify-content: center;
+        background-image: url("Assets/icon-close.svg");
-    align-items: center;
+    }
-    line-height: 1.5;
+
-    min-height: 100vh;
+    .mobile-nav-toggle:focus-visible {
-    overflow-x: hidden;
+        outline: 5px solid white;
-}
+        outline-offset: 5px;
-
+    }
-.background {
+}
-    position: absolute;
+
-    top: 0;
+@media (min-width: 45em) {
-    left: 0;
+    :root {
-    width: 100%;
+        /* font-sizes */
-    min-height: 100vh;
+        --fs-800: 6.25rem;
-    background-image: url('Assets/background.jpg');
+        --fs-700: 3.5rem;
-    background-repeat: no repeat;
+        --fs-600: 2rem;
-    background-position: bottom center;
+        --fs-500: 1.75rem;
-    background-size: cover;
+        --fs-400: 1.125rem;
-    z-index: -1;
+    }
-    filter:blur(5px) saturate(100%) brightness(75%);
+}
-}
+/* ------------------- */
-
+/* Reset               */
-/* primary-header */
+/* ------------------- */
-
+
-.primary-header {
+/* https://piccalil.li/blog/a-modern-css-reset/ */
-    display: flex;
+
-    padding: 20px 100px;
+/* Box sizing */
-    position: fixed;
+*,
-    top: 0;
+*::before,
-    height: auto;
+*::after {
-    width: 100%;
+    box-sizing: border-box;
-    align-items: center;
+}
-    justify-content: space-between;
+
-    z-index: 99;
+/* Reset margins */
-} 
+body,
-
+h1,
-.logo {
+h2,
-    width: auto;
+h3,
-    height: 90px;
+h4,
-    margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem);
+h5,
-    user-select: none;
+p,
-}
+figure,
-
+picture {
-
+    margin: 0;
-.primary-navigation {
+}
-    --gap: clamp(1.5rem, 5vw, 3.5rem);
+
-    --underline-gap: 2rem;
+h1,
-    list-style: none;
+h2,
-    padding: 0;
+h3,
-    margin: 0;
+h4,
-}
+h5,
-
+h6,
-.primary-navigation a {
+p {
-    text-decoration: none;
+    font-weight: 400;
-}
+}
-
+
-.primary-navigation a > span {
+/* set up the body */
-    font-weight: 700;
+body {
-    margin-right: .5em;
+    color: hsl(var(--clr-white));
-}
+    font-family: var(--ff-sans-normal);
-
+    font-size: var(--fs-400);
-.mobile-nav-toggle {
+    background-color: hsl(var(--clr-dark));
-    display: none;
+    display: flex;
-}
+    justify-content: center;
-
+    align-items: center;
-@media (max-width: 35rem) {
+    line-height: 1.5;
-    .primary-navigation {
+    min-height: 100vh;
-        --underline-gap: .5rem;
+    overflow-x: hidden;
-        position: fixed;
+}
-        z-index: 1000;
+
-        inset: 0 0 0 30%;
+.background {
-        list-style: none;
+    position: absolute;
-        padding: min(20rem, 15vh) 2rem;
+    top: 0;
-        margin: 0;
+    left: 0;
-        flex-direction: column;
+    width: 100%;
-        transform: translateX(100%);
+    min-height: 100vh;
-        transition: transform 500ms ease-in-out;
+    background-image: url("Assets/background.jpg");
-    }
+    background-repeat: no repeat;
-    
+    background-position: bottom center;
-    .primary-navigation[data-visible="true"] {
+    background-size: cover;
-        transform: translateX(0);
+    z-index: -1;
-    }
+    filter: blur(5px) saturate(100%) brightness(75%);
-    
+}
-    .primary-navigation.underline-indicators > .active {
+
-       border: 0;
+/* primary-header */
-    }
+
-    
+.primary-header {
-    .mobile-nav-toggle {
+    display: flex;
-        display: block;
+    padding: 20px 100px;
-        position: absolute;
+    position: fixed;
-        z-index: 2000;
+    top: 0;
-        right: 1rem;
+    height: auto;
-        top: 2rem;
+    width: 100%;
-        background: transparent;
+    align-items: center;
-        background-image: url('Assets/icon-hamburger.svg');
+    justify-content: space-between;
-        background-repeat: no-repeat;
+    z-index: 99;
-        background-position: center;
+}
-        width: 1.5rem;
+
-        aspect-ratio: 1;
+.logo {
-        border: 0;
+    width: auto;
-    }
+    height: 90px;
-    
+    margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem);
-    .mobile-nav-toggle[aria-expanded="true"] {
+    user-select: none;
-        background-image: url('Assets/icon-close.svg');
+}
-    }
+
-    
+.primary-navigation {
-    .mobile-nav-toggle:focus-visible {
+    --gap: clamp(1.5rem, 5vw, 3.5rem);
-        outline: 5px solid white;
+    --underline-gap: 2rem;
-        outline-offset: 5px;
+    list-style: none;
-    }
+    padding: 0;
-    
+    margin: 0;
-}
+}
-
+
-@media (min-width: 35em) {
+.primary-navigation a {
-    .primary-navigation {
+    text-decoration: none;
-        padding-inline: clamp(3rem, 7vw, 7rem);
+}
-    }
+
-}
+.primary-navigation a > span {
-
+    font-weight: 700;
-@media (min-width: 35em) and (max-width: 44.999em) {
+    margin-right: 0.5em;
-    .primary-navigation a > span {
+}
-        display: none;
+
-    }
+.mobile-nav-toggle {
-}
+    display: none;
-
+}
-@media (min-width: 45em) {
+
-    
+@media (max-width: 35rem) {
-     .primary-header::after {
+    .primary-navigation {
-         content: '';
+        --underline-gap: 0.5rem;
-         display: block;
+        position: fixed;
-         position: relative;
+        z-index: 1000;
-         height: 1px;
+        inset: 0 0 0 30%;
-         width: 100%;
+        list-style: none;
-         margin-right: -2.5rem;
+        padding: min(20rem, 15vh) 2rem;
-         background: hsl( var(--clr-white) / .25);
+        margin: 0;
-         order: 1;
+        flex-direction: column;
-     }
+        transform: translateX(100%);
-     
+        transition: transform 500ms ease-in-out;
-    nav {
+    }
-        order: 2;
+
-    }
+    .primary-navigation[data-visible="true"] {
-    
+        transform: translateX(0);
-    .primary-navigation {
+    }
-        margin-block: 2rem;
+
-    }
+    .primary-navigation.underline-indicators > .active {
-    
+        border: 0;
-   
+    }
-}
+
-
+    .mobile-nav-toggle {
-
+        display: block;
-.primary-navigation a {
+        position: absolute;
-    position: relative;
+        z-index: 2000;
-    align-self: flex-end;
+        right: 1rem;
-    align-items: center;
+        top: 2rem;
-    font-size: 1.1em;
+        background: transparent;
-    color: #fff;
+        background-image: url("Assets/icon-hamburger.svg");
-    text-decoration: none;
+        background-repeat: no-repeat;
-    font-weight: 500;
+        background-position: center;
-    margin-left: 40px;
+        width: 1.5rem;
-    margin: 0.5rem;
+        aspect-ratio: 1;
-    margin-inline-end: 0.5rem;
+        border: 0;
-}
+    }
-
+
-.primary-navigation a::after {
+    .mobile-nav-toggle[aria-expanded="true"] {
-    content: '';
+        background-image: url("Assets/icon-close.svg");
-    position: absolute;
+    }
-    left: 0;
+
-    bottom: -6px;
+    .mobile-nav-toggle:focus-visible {
-    width: 100%;
+        outline: 5px solid white;
-    height: 3px;
+        outline-offset: 5px;
-    background: #fff;
+    }
-    border-radius: 5px;
+}
-    transform-origin: right;
+
-    transform: scaleX(0);
+@media (min-width: 35em) {
-    transition: transform .5s;
+    .primary-navigation {
-}
+        padding-inline: clamp(3rem, 7vw, 7rem);
-
+    }
-.primary-navigation a:hover::after {
+}
-    transform-origin: right;
+
-    transform: scaleX(1);
+@media (min-width: 35em) and (max-width: 44.999em) {
-}
+    .primary-navigation a > span {
-
+        display: none;
-
+    }
-.content {
+}
-    display: flex;
+
-    justify-content: center;
+@media (min-width: 45em) {
-    text-align: center;
+    .primary-header::after {
-    width: 700px;
+        content: "";
-    height: 50vh;
+        display: block;
-    margin: 0 auto;
+        position: relative;
-}
+        height: 1px;
-
+        width: 100%;
-.content p {
+        margin-right: -2.5rem;
-    font-size: 25px;
+        background: hsl(var(--clr-white) / 0.25);
-    color: #000000;
+        order: 1;
-    height: auto;
+    }
-}
+
-
+    nav {
-
+        order: 2;
-footer {
+    }
-    position: fixed;
+
-    display: flex;
+    .primary-navigation {
-    bottom: 0;
+        margin-block: 2rem;
-    align-items: center;
+    }
-    justify-content: center;
+}
-    z-index: 99;
+
-    min-height: 10vh;
+.primary-navigation a {
-    overflow-x: hidden;
+    position: relative;
-}
+    align-self: flex-end;
-
+    align-items: center;
-
+    font-size: 1.1em;
-.social-buttons {
+    color: #fff;
-    display: flex;
+    text-decoration: none;
-    align-self: center;
+    font-weight: 500;
-    position: relative;
+    margin-left: 40px;
-    align-items: center;
+    margin: 0.5rem;
-    bottom: 0;
+    margin-inline-end: 0.5rem;
-    margin: 0 auto;
+}
-}
+
-
+.primary-navigation a::after {
-.social-buttons a {
+    content: "";
-    position: relative;
+    position: absolute;
-    display: inline-block;
+    left: 0;
-    width: 45px;
+    bottom: -6px;
-    height: 45px;
+    width: 100%;
-    background: transparent;
+    height: 3px;
-    box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
+    background: #fff;
-    margin: 0 8px;
+    border-radius: 5px;
-    z-index: 1;
+    transform-origin: right;
-    text-align: center;
+    transform: scaleX(0);
-    line-height: 45px;
+    transition: transform 0.5s;
-    transition: .3s;
+}
-}
+
-
+.primary-navigation a:hover::after {
-.social-buttons a:hover{
+    transform-origin: right;
-    background: rgb(63, 9, 126);
+    transform: scaleX(1);
-    transform: rotate(135deg);
+}
-    box-shadow: 0 0 5px rgb(63, 9, 126), 0 0 10px rgb(63, 9, 126);
+
-}
+.content {
-
+    display: flex;
-.social-buttons a::before {
+    justify-content: center;
-    content: '';
+    text-align: center;
-    position: absolute;
+    width: 700px;
-    top: 50%;
+    height: 50vh;
-    left: 50%;
+    margin: 0 auto;
-    transform: translate(-50%, -50%);
+}
-    width: 40px;
+
-    height: 40px;
+.content p {
-    background: #929498;
+    font-size: 25px;
-    z-index: -1;
+    color: #000000;
-}
+    height: auto;
-
+}
-.social-buttons a i {
+
-    font-size: 18px;
+footer {
-    color: #000;
+    position: fixed;
-    transition: .3s;
+    display: flex;
-}
+    bottom: 0;
-
+    align-items: center;
-.social-buttons a i:hover {
+    justify-content: center;
-    transform: rotate(225deg);
+    z-index: 99;
-    color: rgb(63, 9, 126);
+    min-height: 10vh;
-
+    overflow-x: hidden;
-}
+}
-
+
-/* ------------------- */
+.social-buttons {
-/* Utility classes     */
+    display: flex;
-/* ------------------- */
+    align-self: center;
-
+    position: relative;
-/* general */
+    align-items: center;
-
+    bottom: 0;
-.flex {
+    margin: 0 auto;
-    display: flex;
+}
-    gap: var(--gap, .5rem)
+
-}
+.social-buttons a {
-
+    position: relative;
-.grid {
+    display: inline-block;
-    display: grid;
+    width: 45px;
-    gap: var(--gap, 1rem);
+    height: 45px;
-}
+    background: transparent;
-
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
-.d-block {
+    margin: 0 8px;
-    display: block;
+    z-index: 1;
-}
+    text-align: center;
-
+    line-height: 45px;
-.flow > *:where(:not(:first-child)) {
+    transition: 0.3s;
-    margin-top: var(--flow-space, 1rem);
+}
-}
+
-
+.social-buttons a:hover {
-.flow--space-small {
+    background: rgb(63, 9, 126);
-    --flow-space: .75rem;
+    transform: rotate(135deg);
-}
+    box-shadow:
-
+        0 0 5px rgb(63, 9, 126),
-.container {
+        0 0 10px rgb(63, 9, 126);
-    padding-inline: 2em;
+}
-    margin-inline: auto;
+
-    max-width: 80rem;
+.social-buttons a::before {
-}
+    content: "";
-
+    position: absolute;
-.sr-only {
+    top: 50%;
-  position: absolute; 
+    left: 50%;
-  width: 1px;
+    transform: translate(-50%, -50%);
-  height: 1px;
+    width: 40px;
-  padding: 0;
+    height: 40px;
-  margin: -1px; 
+    background: #929498;
-  overflow: hidden;
+    z-index: -1;
-  clip: rect(0, 0, 0, 0);
+}
-  white-space: nowrap; /* added line */
+
-  border: 0;
+.social-buttons a i {
-}
+    font-size: 18px;
-
+    color: #000;
-.skip-to-content {
+    transition: 0.3s;
-    position: absolute;
+}
-    z-index: 9999;
+
-    background: hsl( var(--clr-white) );
+.social-buttons a i:hover {
-    color: hsl( var(--clr-dark) ); 
+    transform: rotate(225deg);
-    padding: .5em 1em;
+    color: rgb(63, 9, 126);
-    margin-inline: auto;
+}
-    transform: translateY(-100%);
+
-    transition: transform 250ms ease-in;
+/* ------------------- */
-}
+/* Utility classes     */
-
+/* ------------------- */
-.skip-to-content:focus {
+
-    transform: translateY(0);
+/* general */
-}
+
-
+.flex {
-.grid-container {
+    display: flex;
-    text-align: center;
+    gap: var(--gap, 0.5rem);
-    display: grid;
+}
-    place-items: center;
+
-    padding-inline: 1rem;
+.grid {
-    padding-bottom: 4rem;
+    display: grid;
-}
+    gap: var(--gap, 1rem);
-
+}
-.grid-container p:not([class]) {
+
-    max-width: 50ch;
+.d-block {
-}
+    display: block;
-
+}
-img,
+
-picture {
+.flow > *:where(:not(:first-child)) {
-    max-width: 100%;
+    margin-top: var(--flow-space, 1rem);
-    display: block;
+}
-}
+
+.flow--space-small {
+    --flow-space: 0.75rem;
+}
+
+.container {
+    padding-inline: 2em;
+    margin-inline: auto;
+    max-width: 80rem;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap; /* added line */
+    border: 0;
+}
+
+.skip-to-content {
+    position: absolute;
+    z-index: 9999;
+    background: hsl(var(--clr-white));
+    color: hsl(var(--clr-dark));
+    padding: 0.5em 1em;
+    margin-inline: auto;
+    transform: translateY(-100%);
+    transition: transform 250ms ease-in;
+}
+
+.skip-to-content:focus {
+    transform: translateY(0);
+}
+
+.grid-container {
+    text-align: center;
+    display: grid;
+    place-items: center;
+    padding-inline: 1rem;
+    padding-bottom: 4rem;
+}
+
+.grid-container p:not([class]) {
+    max-width: 50ch;
+}
+
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}