From 844a5c3ead5dbcc4236ffffc2a1601a3120f59be Mon Sep 17 00:00:00 2001
From: Parker <contact@pkrm.dev>
Date: Mon, 19 Feb 2024 02:34:51 -0600
Subject: [PATCH] Move CSS to individual files

---
 app/static/css/about.css      | 109 +++++++++++++++++++
 app/static/css/contact.css    | 186 ++++++++++++++++++++++++++++++++
 app/static/css/index.css      | 137 ++++++++++++++++++++++++
 app/static/css/pgp.css        | 114 ++++++++++++++++++++
 app/static/{ => js}/altcha.js |   0
 app/templates/about.html      | 115 +-------------------
 app/templates/contact.html    | 196 +---------------------------------
 app/templates/index.html      | 143 +------------------------
 app/templates/pgp.html        | 118 +-------------------
 9 files changed, 553 insertions(+), 565 deletions(-)
 create mode 100644 app/static/css/about.css
 create mode 100644 app/static/css/contact.css
 create mode 100644 app/static/css/index.css
 create mode 100644 app/static/css/pgp.css
 rename app/static/{ => js}/altcha.js (100%)

diff --git a/app/static/css/about.css b/app/static/css/about.css
new file mode 100644
index 0000000..100e909
--- /dev/null
+++ b/app/static/css/about.css
@@ -0,0 +1,109 @@
+/* Import Montserrat font */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    background-color: #242528;
+    color: #9F9FAA;
+}
+
+
+/* Navbar styles */
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background-color: #212223;
+    color: #9F9FAA;
+}
+
+nav a {
+    text-decoration: none;
+    color: #9F9FAA;
+    font-size: 1.5rem;
+    margin: 0 1rem;
+}
+
+nav a:hover {
+    color: #fff;
+}
+
+.navbar-left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 15%;
+}
+
+.navbar-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 15%;
+}
+
+/* Navbar media query for mobile */
+@media only screen and (max-width: 600px) {
+    nav a {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .navbar-left {
+        margin: 0 1rem;
+    }
+
+    .navbar-right {
+        margin: 0 1rem;
+    }
+
+    .navbar-right a {
+        margin-left: 1rem;
+    }
+}
+
+/* Container styles */
+.container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.75rem;
+    text-align: center;
+    width: 600px;
+}
+
+/* Continer media query for mobile */
+@media only screen and (max-width: 600px) {
+    .container {
+        font-size: 1.25rem;
+        width: 300px;
+    }
+
+    .container p {
+        margin: 1rem 0 2rem 0;
+    }
+}
+
+
+/* Footer styles */
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1rem;
+    text-align: center;
+    margin-bottom: 2rem;
+    width: 90vw;
+}
+
+/* Footer media query for mobile */
+@media only screen and (max-width: 600px) {
+    footer {
+        bottom: -2rem;
+    }
+}
\ No newline at end of file
diff --git a/app/static/css/contact.css b/app/static/css/contact.css
new file mode 100644
index 0000000..ab8e95b
--- /dev/null
+++ b/app/static/css/contact.css
@@ -0,0 +1,186 @@
+/* Import Montserrat font */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
+
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #242528;
+    color: #9F9FAA;
+}
+
+
+/* Navbar styles */
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background-color: #212223;
+    color: #9F9FAA;
+}
+
+nav a {
+    text-decoration: none;
+    color: #9F9FAA;
+    font-size: 1.5rem;
+    margin: 0 1rem;
+}
+
+nav a:hover {
+    color: #fff;
+}
+
+.navbar-left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 15%;
+}
+
+.navbar-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 15%;
+}
+
+/* Navbar media query for mobile */
+@media only screen and (max-width: 600px) {
+    nav a {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .navbar-left {
+        margin: 0 1rem;
+    }
+
+    .navbar-right {
+        margin: 0 1rem;
+    }
+
+    .navbar-right a {
+        margin-left: 1rem;
+    }
+}
+
+
+/* Container styles */
+.container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.75rem;
+    text-align: center;
+    border: 1px solid #9F9FAA;
+    border-radius: 5px;
+    padding: 2rem;
+    height: 450px;
+    width: 550px;
+}
+
+.container h1 {
+    margin: 0 0 1rem 0;
+}
+
+/* Continer media query for mobile */
+@media only screen and (max-width: 600px) {
+    .container {
+        font-size: 1.25rem;
+        width: 250px;
+    }
+
+    .container h1 {
+        margin: 0 0 2rem 0;
+    }
+}
+
+/* Form styles */
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+input {
+    margin: 0.75rem 0;
+    padding: 0.5rem 1rem;
+    border: 1px solid #9F9FAA;
+    border-radius: 5px;
+    background-color: #242528;
+    color: #9F9FAA;
+    font-size: 1.25rem;
+    width: 500px;
+}
+
+input[type="submit"] {
+    width: calc(500px + 2rem);
+    cursor: pointer;
+}
+
+textarea {
+    margin: 0.75rem 0;
+    padding: 0.5rem 1rem;
+    border: 1px solid #9F9FAA;
+    border-radius: 5px;
+    background-color: #242528;
+    color: #9F9FAA;
+    font-size: 1.25rem;
+    height: 100px;
+    width: 500px;
+    resize: none;
+}
+
+/* Form media query for mobile */
+@media only screen and (max-width: 600px) {
+    input {
+        width: 250px;
+    }
+
+    input[type="submit"] {
+        width: calc(250px + 2rem);
+    }
+
+    textarea {
+        width: 250px;
+    }
+}
+
+/* Success/Error messages */
+.success-message {
+    color: #71A172;
+    font-size: 1.25rem;
+    margin-top: 0.5rem;
+}
+
+.error-message {
+    color: #B16161;
+    font-size: 1.25rem;
+    margin-top: 0.5rem;
+}
+
+
+/* Footer styles */
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1rem;
+    text-align: center;
+    margin-bottom: 2rem;
+    width: 90vw;
+}
+
+/* Footer media query for mobile */
+@media only screen and (max-width: 600px) {
+    footer {
+        bottom: -2rem;
+    }
+}
\ No newline at end of file
diff --git a/app/static/css/index.css b/app/static/css/index.css
new file mode 100644
index 0000000..94a852a
--- /dev/null
+++ b/app/static/css/index.css
@@ -0,0 +1,137 @@
+/* Import Montserrat font */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    background-color: #242528;
+    color: #9F9FAA;
+}
+
+
+/* Navbar styles */
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background-color: #212223;
+    color: #9F9FAA;
+}
+
+nav a {
+    text-decoration: none;
+    color: #9F9FAA;
+    font-size: 1.5rem;
+    margin: 0 1rem;
+}
+
+nav a:hover {
+    color: #fff;
+}
+
+.navbar-left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 15%;
+}
+
+.navbar-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 15%;
+}
+
+/* Navbar media query for mobile */
+@media only screen and (max-width: 600px) {
+    nav a {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .navbar-left {
+        margin: 0 1rem;
+    }
+
+    .navbar-right {
+        margin: 0 1rem;
+    }
+
+    .navbar-right a {
+        margin-left: 1rem;
+    }
+}
+
+
+/* Container styles */
+.container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.75rem;
+    text-align: center;
+    width: 500px;
+}
+
+.container h1 {
+    margin-bottom: 0;
+}
+
+.container p {
+    margin: 2rem 0 3rem 0;
+}
+
+.icons {
+    margin: 0 1rem;
+    height: 50px;
+    width: 50px;
+    color: #9F9FAA;
+}
+
+.icons:hover {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.25s ease-in-out;
+
+}
+
+/* Continer media query for mobile */
+@media only screen and (max-width: 600px) {
+    .container {
+        font-size: 1.5rem;
+        width: 300px;
+    }
+
+    .container p {
+        margin: 1rem 0 2rem 0;
+    }
+
+    .icons {
+        height: 40px;
+        width: 40px;
+    }
+}
+
+
+/* Footer styles */
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1rem;
+    text-align: center;
+    margin-bottom: 2rem;
+    width: 90vw;
+}
+
+/* Footer media query for mobile */
+@media only screen and (max-width: 600px) {
+    footer {
+        bottom: -2rem;
+    }
+}
\ No newline at end of file
diff --git a/app/static/css/pgp.css b/app/static/css/pgp.css
new file mode 100644
index 0000000..9dcc930
--- /dev/null
+++ b/app/static/css/pgp.css
@@ -0,0 +1,114 @@
+/* Import Montserrat font */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    background-color: #242528;
+    color: #9F9FAA;
+}
+
+
+/* Navbar styles */
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background-color: #212223;
+    color: #9F9FAA;
+}
+
+nav a {
+    text-decoration: none;
+    color: #9F9FAA;
+    font-size: 1.5rem;
+    margin: 0 1rem;
+}
+
+nav a:hover {
+    color: #fff;
+}
+
+.navbar-left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 15%;
+}
+
+.navbar-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 15%;
+}
+
+/* Navbar media query for mobile */
+@media only screen and (max-width: 600px) {
+    nav a {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .navbar-left {
+        margin: 0 1rem;
+    }
+
+    .navbar-right {
+        margin: 0 1rem;
+    }
+
+    .navbar-right a {
+        margin-left: 1rem;
+    }
+}
+
+/* Container styles */
+.container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.25rem;
+    text-align: center;
+    width: 600px;
+    word-break: break-all;
+}
+
+.container p {
+    text-align: left;
+}
+
+/* Continer media query for mobile */
+@media only screen and (max-width: 600px) {
+    .container {
+        font-size: 1.25rem;
+        width: 300px;
+    }
+
+    .container p {
+        margin: 1rem 0 2rem 0;
+    }
+}
+
+
+/* Footer styles */
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1rem;
+    text-align: center;
+    margin-bottom: 2rem;
+    width: 90vw;
+}
+
+/* Footer media query for mobile */
+@media only screen and (max-width: 600px) {
+    footer {
+        bottom: -2rem;
+    }
+}
\ No newline at end of file
diff --git a/app/static/altcha.js b/app/static/js/altcha.js
similarity index 100%
rename from app/static/altcha.js
rename to app/static/js/altcha.js
diff --git a/app/templates/about.html b/app/templates/about.html
index d98e4a2..1ec0d38 100644
--- a/app/templates/about.html
+++ b/app/templates/about.html
@@ -8,6 +8,7 @@
     <!-- Encourage indexing -->
     <meta name="robots" content="index, follow">
 
+    <link rel="stylesheet", href="{{ url_for('static', filename='css/about.css') }}">
     <meta property="og:title" content="About Me | pkrm.dev"/>
     <meta property="og:url" content="https://pkrm.dev"/>
     <meta property="og:type" content="website"/>
@@ -33,116 +34,4 @@
 
     <footer>PGP Fingerprint: 58B7 6B8B BAB8 794D 21E2 579C 95CD 2E0C 7E32 9F2A</footer>
 </body>
-</html>
-
-<style>
-    /* Import Montserrat font */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
-
-    body {
-        margin: 0;
-        padding: 0;
-        font-family: 'Montserrat', sans-serif;
-        background-color: #242528;
-        color: #9F9FAA;
-    }
-
-
-    /* Navbar styles */
-    nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 2rem;
-        background-color: #212223;
-        color: #9F9FAA;
-    }
-
-    nav a {
-        text-decoration: none;
-        color: #9F9FAA;
-        font-size: 1.5rem;
-        margin: 0 1rem;
-    }
-
-    nav a:hover {
-        color: #fff;
-    }
-
-    .navbar-left {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        margin-left: 15%;
-    }
-
-    .navbar-right {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-right: 15%;
-    }
-
-    /* Navbar media query for mobile */
-    @media only screen and (max-width: 600px) {
-        nav a {
-            margin: 0;
-            font-size: 1rem;
-        }
-
-        .navbar-left {
-            margin: 0 1rem;
-        }
-
-        .navbar-right {
-            margin: 0 1rem;
-        }
-
-        .navbar-right a {
-            margin-left: 1rem;
-        }
-    }
-
-    /* Container styles */
-    .container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.75rem;
-        text-align: center;
-        width: 600px;
-    }
-
-    /* Continer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        .container {
-            font-size: 1.25rem;
-            width: 300px;
-        }
-
-        .container p {
-            margin: 1rem 0 2rem 0;
-        }
-    }
-
-
-    /* Footer styles */
-    footer {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 1rem;
-        text-align: center;
-        margin-bottom: 2rem;
-        width: 90vw;
-    }
-
-    /* Footer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        footer {
-            bottom: -2rem;
-        }
-    }
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/app/templates/contact.html b/app/templates/contact.html
index ede7d4a..7b00c95 100644
--- a/app/templates/contact.html
+++ b/app/templates/contact.html
@@ -9,8 +9,9 @@
     <meta name="robots" content="index, follow">
 
     <!-- Add altcha.js file -->
-    <script async defer src="{{ url_for('static', filename='altcha.js') }}" type="module"></script>
+    <script async defer src="{{ url_for('static', filename='js/altcha.js') }}" type="module"></script>
 
+    <link rel="stylesheet", href="{{ url_for('static', filename='css/contact.css') }}">
     <meta property="og:title" content="Contact | pkrm.dev"/>
     <meta property="og:url" content="https://pkrm.dev/contact"/>
     <meta property="og:type" content="website"/>
@@ -54,199 +55,6 @@
 </body>
 </html>
 
-<style>
-    /* Import Montserrat font */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
-
-    * {
-        font-family: 'Montserrat', sans-serif;
-    }
-
-    body {
-        margin: 0;
-        padding: 0;
-        background-color: #242528;
-        color: #9F9FAA;
-    }
-
-
-    /* Navbar styles */
-    nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 2rem;
-        background-color: #212223;
-        color: #9F9FAA;
-    }
-
-    nav a {
-        text-decoration: none;
-        color: #9F9FAA;
-        font-size: 1.5rem;
-        margin: 0 1rem;
-    }
-
-    nav a:hover {
-        color: #fff;
-    }
-
-    .navbar-left {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        margin-left: 15%;
-    }
-
-    .navbar-right {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-right: 15%;
-    }
-
-    /* Navbar media query for mobile */
-    @media only screen and (max-width: 600px) {
-        nav a {
-            margin: 0;
-            font-size: 1rem;
-        }
-
-        .navbar-left {
-            margin: 0 1rem;
-        }
-
-        .navbar-right {
-            margin: 0 1rem;
-        }
-
-        .navbar-right a {
-            margin-left: 1rem;
-        }
-    }
-
-
-    /* Container styles */
-    .container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.75rem;
-        text-align: center;
-        border: 1px solid #9F9FAA;
-        border-radius: 5px;
-        padding: 2rem;
-        height: 450px;
-        width: 550px;
-    }
-
-    .container h1 {
-        margin: 0 0 1rem 0;
-    }
-
-    /* Continer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        .container {
-            font-size: 1.25rem;
-            width: 250px;
-        }
-
-        .container h1 {
-            margin: 0 0 2rem 0;
-        }
-    }
-
-    /* Form styles */
-    form {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    input {
-        margin: 0.75rem 0;
-        padding: 0.5rem 1rem;
-        border: 1px solid #9F9FAA;
-        border-radius: 5px;
-        background-color: #242528;
-        color: #9F9FAA;
-        font-size: 1.25rem;
-        width: 500px;
-    }
-
-    input[type="submit"] {
-        width: calc(500px + 2rem);
-        cursor: pointer;
-    }
-
-    textarea {
-        margin: 0.75rem 0;
-        padding: 0.5rem 1rem;
-        border: 1px solid #9F9FAA;
-        border-radius: 5px;
-        background-color: #242528;
-        color: #9F9FAA;
-        font-size: 1.25rem;
-        height: 100px;
-        width: 500px;
-        resize: none;
-    }
-
-    /* Form media query for mobile */
-    @media only screen and (max-width: 600px) {
-        input {
-            width: 250px;
-        }
-
-        input[type="submit"] {
-            width: calc(250px + 2rem);
-        }
-
-        textarea {
-            width: 250px;
-        }
-    }
-
-    altcha-widget {
-        visibility: none;
-    }
-
-    /* Success/Error messages */
-    .success-message {
-        color: #71A172;
-        font-size: 1.25rem;
-        margin-top: 0.5rem;
-    }
-
-    .error-message {
-        color: #B16161;
-        font-size: 1.25rem;
-        margin-top: 0.5rem;
-    }
-
-
-    /* Footer styles */
-    footer {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 1rem;
-        text-align: center;
-        margin-bottom: 2rem;
-        width: 90vw;
-    }
-
-    /* Footer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        footer {
-            bottom: -2rem;
-        }
-    }
-</style>
-
 <script>
     // Get the form
     const form = document.querySelector('form');
diff --git a/app/templates/index.html b/app/templates/index.html
index 85c86fa..00c8029 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -8,6 +8,7 @@
     <!-- Encourage indexing -->
     <meta name="robots" content="index, follow">
 
+    <link rel="stylesheet", href="{{ url_for('static', filename='css/index.css') }}">
     <meta property="og:title" content="Home | pkrm.dev"/>
     <meta property="og:url" content="https://pkrm.dev/"/>
     <meta property="og:type" content="website"/>
@@ -39,144 +40,4 @@
 
     <footer>PGP Fingerprint: 58B7 6B8B BAB8 794D 21E2 579C 95CD 2E0C 7E32 9F2A</footer>
 </body>
-</html>
-
-<style>
-    /* Import Montserrat font */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
-
-    body {
-        margin: 0;
-        padding: 0;
-        font-family: 'Montserrat', sans-serif;
-        background-color: #242528;
-        color: #9F9FAA;
-    }
-
-
-    /* Navbar styles */
-    nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 2rem;
-        background-color: #212223;
-        color: #9F9FAA;
-    }
-
-    nav a {
-        text-decoration: none;
-        color: #9F9FAA;
-        font-size: 1.5rem;
-        margin: 0 1rem;
-    }
-
-    nav a:hover {
-        color: #fff;
-    }
-
-    .navbar-left {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        margin-left: 15%;
-    }
-
-    .navbar-right {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-right: 15%;
-    }
-
-    /* Navbar media query for mobile */
-    @media only screen and (max-width: 600px) {
-        nav a {
-            margin: 0;
-            font-size: 1rem;
-        }
-
-        .navbar-left {
-            margin: 0 1rem;
-        }
-
-        .navbar-right {
-            margin: 0 1rem;
-        }
-
-        .navbar-right a {
-            margin-left: 1rem;
-        }
-    }
-
-
-    /* Container styles */
-    .container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.75rem;
-        text-align: center;
-        width: 500px;
-    }
-
-    .container h1 {
-        margin-bottom: 0;
-    }
-
-    .container p {
-        margin: 2rem 0 3rem 0;
-    }
-
-    .icons {
-        margin: 0 1rem;
-        height: 50px;
-        width: 50px;
-        color: #9F9FAA;
-    }
-
-    .icons:hover {
-        cursor: pointer;
-        opacity: 0.6;
-        transition: opacity 0.25s ease-in-out;
-
-    }
-
-    /* Continer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        .container {
-            font-size: 1.5rem;
-            width: 300px;
-        }
-
-        .container p {
-            margin: 1rem 0 2rem 0;
-        }
-
-        .icons {
-            height: 40px;
-            width: 40px;
-        }
-    }
-
-
-    /* Footer styles */
-    footer {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 1rem;
-        text-align: center;
-        margin-bottom: 2rem;
-        width: 90vw;
-    }
-
-    /* Footer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        footer {
-            bottom: -2rem;
-        }
-    }
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/app/templates/pgp.html b/app/templates/pgp.html
index e040851..5b43f81 100644
--- a/app/templates/pgp.html
+++ b/app/templates/pgp.html
@@ -8,6 +8,7 @@
     <!-- Encourage indexing -->
     <meta name="robots" content="index, follow">
 
+    <link rel="stylesheet", href="{{ url_for('static', filename='css/pgp.css') }}">
     <meta property="og:title" content="PGP Key | pkrm.dev"/>
     <meta property="og:url" content="https://pkrm.dev/pgp"/>
     <meta property="og:type" content="website"/>
@@ -53,123 +54,6 @@
 </body>
 </html>
 
-<style>
-    /* Import Montserrat font */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
-
-    body {
-        margin: 0;
-        padding: 0;
-        font-family: 'Montserrat', sans-serif;
-        background-color: #242528;
-        color: #9F9FAA;
-    }
-
-
-    /* Navbar styles */
-    nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 2rem;
-        background-color: #212223;
-        color: #9F9FAA;
-    }
-
-    nav a {
-        text-decoration: none;
-        color: #9F9FAA;
-        font-size: 1.5rem;
-        margin: 0 1rem;
-    }
-
-    nav a:hover {
-        color: #fff;
-    }
-
-    .navbar-left {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        margin-left: 15%;
-    }
-
-    .navbar-right {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-right: 15%;
-    }
-
-    /* Navbar media query for mobile */
-    @media only screen and (max-width: 600px) {
-        nav a {
-            margin: 0;
-            font-size: 1rem;
-        }
-
-        .navbar-left {
-            margin: 0 1rem;
-        }
-
-        .navbar-right {
-            margin: 0 1rem;
-        }
-
-        .navbar-right a {
-            margin-left: 1rem;
-        }
-    }
-
-    /* Container styles */
-    .container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.25rem;
-        text-align: center;
-        width: 600px;
-        word-break: break-all;
-    }
-
-    .container p {
-        text-align: left;
-    }
-
-    /* Continer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        .container {
-            font-size: 1.25rem;
-            width: 300px;
-        }
-
-        .container p {
-            margin: 1rem 0 2rem 0;
-        }
-    }
-
-
-    /* Footer styles */
-    footer {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 1rem;
-        text-align: center;
-        margin-bottom: 2rem;
-        width: 90vw;
-    }
-
-    /* Footer media query for mobile */
-    @media only screen and (max-width: 600px) {
-        footer {
-            bottom: -2rem;
-        }
-    }
-</style>
-
 <script>
     // Get the h1
     const h1 = document.querySelector('h1');