Restyle page

contactme.html

@@ -32,12 +32,6 @@
       </div>
 
       <div class="content">
-        <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>
@@ -57,6 +51,13 @@
               -----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>
           <div class="col-2">
             <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>

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{