diff --git a/contactme.html b/contactme.html
index fd6c425..f701303 100644
--- a/contactme.html
+++ b/contactme.html
@@ -32,36 +32,37 @@
       </div>
 
       <div class="content">
+        <div id="myPopup" class="Popup">
+          <div class="popupContent">
+            <span class="close">&times;</span>
+            <h1>PGP Key</h1>
+            <p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
+              xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br> 
+              f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
+              ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
+              GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
+              FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
+              AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
+              1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
+              OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
+              MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
+              V1WPds4rTX6GEzj+Cw==<br>
+              =rzUE<br>
+              -----END PGP PUBLIC KEY BLOCK-----</p>
+          </div>
+        </div>
+        
         <div class="row">
           <div class="col-1">
             <h1 id="contacttitle"></h1>
             <h2 id="contact"></h2>
             <a id="popupButton">PGP Key</a>
-
-            <div id="myPopup" class="Popup">
-              <div class="popupContent">
-                <span class="close">&times;</span>
-                <h1>PGP Key</h1>
-                <p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
-                  xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br> 
-                  f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
-                  ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
-                  GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
-                  FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
-                  AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
-                  1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
-                  OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
-                  MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
-                  V1WPds4rTX6GEzj+Cw==<br>
-                  =rzUE<br>
-                  -----END PGP PUBLIC KEY BLOCK-----</p>
-              </div>
-            </div>
+            
           </div>
           <div class="col-2">
             <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
           </div>
-        </div>
+      </div>
 
         <div class="socialmedia">
           <a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
diff --git a/css/style.css b/css/style.css
index ffde332..1188702 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,8 +9,12 @@
     min-height: 100vh;
     box-sizing: border-box;
     overflow: hidden;
-    background: rgb(56,56,56);
-    background: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%); 
+    background-color: #111927;
+    background-image: radial-gradient(at 30% 30%, hsl(70, 100%, 20%) 0, transparent 59%), radial-gradient(at 70% 70%, hsl(230, 100%, 20%) 0, transparent 55%);
+    background: url(../pics/background.jpg) no-repeat;  
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
 }
 
 .content {
@@ -22,9 +26,14 @@
     width: 100%;
     display: flex;
     align-items: center;
-    background-color: #e2de84;
     box-shadow: 5px 5px 5px;
     padding: 40px 0;
+    
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 0 12px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 .logo {
@@ -33,6 +42,9 @@
     margin-left: 8%;
     position: absolute;
     transform: rotate(-5deg);
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    border-radius: 50%;
 }
 
 .menu-icon{
@@ -51,7 +63,7 @@ nav ul li{
 }
 
 nav ul li a{
-    color: black;
+    color: white;
     font-size: 120%;
     text-decoration: none;
     padding-left: 20px;
@@ -59,7 +71,7 @@ nav ul li a{
 }
 
 nav ul li a:hover{
-    color: #ecfeaa;
+    color: #aaaaaa;
     cursor: pointer;
 }
 
@@ -80,15 +92,15 @@ nav ul li a:hover{
 }
 
 h1{
-    color: black;
+    color: white;
 }
 
 h2{
-    color: #222222;
+    color: white;
 }
 
 p{
-    color: #222222;
+    color: white;
 }
 
 .row{
@@ -101,9 +113,15 @@ p{
 .col-1{
     flex-basis: 80%;
     position: relative;
-    background-color: #e2de84;
     padding: 2%;
     box-shadow: 10px 10px 10px;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
+
     z-index: 2;
 }
 
@@ -135,16 +153,22 @@ p{
 }
 
 #popupButton {
-    color: black;
+    color: white;
     font-size: 100%;
     padding: 5px;
     text-decoration: none;
     background-color: #e0d94c;
     box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 #popupButton:hover{
-    color: #ecfeaa;
+    color: #aaaaaa;
     cursor: pointer;
 }
 
@@ -162,23 +186,27 @@ p{
 }
   
 .popupContent {
-    background-color: #e2de84;
     margin: auto;
     padding: 20px;
-    border: 1px solid #000000;
     width: 80%;
-    color: black;
+    color: white;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 .close {
-    color: #aaaaaa;
+    color: white;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }
 
 .close:hover, .close:focus {
-    color: #000;
+    color: #aaaaaa;
     text-decoration: none;
     cursor: pointer;
 }
@@ -187,9 +215,14 @@ p{
     height: 30px;
     margin: 5px;
     cursor: pointer;
-    background-color: #e2de84;
     padding: 5px;
     box-shadow: 5px 5px 5px;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 .socialmedia{
@@ -215,16 +248,21 @@ p{
 }
 
 #aboutmelinks li a{
-    color: black;
+    color: white;
     font-size: 100%;
     padding: 5px;
     text-decoration: none;
-    background-color: #e0d94c;
     box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 #aboutmelinks li a:hover{
-    color: #ecfeaa;
+    color: #aaaaaa;
     cursor: pointer;
 }
 
@@ -235,35 +273,53 @@ p{
 }
 
 .technolist li{
-    color: black;
+    color: white;
     font-size: 100%;
     padding: 5px;
     margin: 10px;
     text-decoration: none;
-    background-color: #e0d94c;
     box-shadow: 5px 5px 5px black;
     list-style: none;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 table{
     margin-left: 10%;
     text-align: center;
+    box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 table tr th{
-    color: black;
+    color: white;
     font-size: 100%;
     padding: 5px;
-    background-color: #e0d94c;
-    box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
+    border-radius: 0 12px 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
 }
 
 table tr td{
-    color: black;
+    color: white;
     font-size: 100%;
     padding: 5px;
-    background-color: #e2de84;
-    box-shadow: 5px 5px 5px black;
+
+    backdrop-filter: blur(10px) saturate(100%);
+    -webkit-backdrop-filter: blur(10px) saturate(100%);
+    background-color: rgba(30, 30, 30, 0.75);
 }
 
 .neofetch{
@@ -288,8 +344,13 @@ table tr td{
         top: 100px;
         right: 0;
         z-index: 2;
-        background-color: #e2de84;
         box-shadow: 10px 10px 10px;
+
+        backdrop-filter: blur(10px) saturate(100%);
+        -webkit-backdrop-filter: blur(10px) saturate(100%);
+        background-color: rgba(30, 30, 30, 0.75);
+        border-radius: 0 0 12px 12px;
+
     }
 
     nav ul li{
diff --git a/pics/background.jpg b/pics/background.jpg
new file mode 100644
index 0000000..5aec173
Binary files /dev/null and b/pics/background.jpg differ
diff --git a/pics/background.png b/pics/background.png
new file mode 100644
index 0000000..030a648
Binary files /dev/null and b/pics/background.png differ
diff --git a/pics/background2.jpg b/pics/background2.jpg
new file mode 100644
index 0000000..5c3b13f
Binary files /dev/null and b/pics/background2.jpg differ
diff --git a/webicons/logo.png b/webicons/logo.png
index 5e7acdb..0df03df 100644
Binary files a/webicons/logo.png and b/webicons/logo.png differ