iwannadriveintoapoleat200kilometersperhourpleasesendhelp

res/css/global.css

@@ -8,6 +8,7 @@
 }
 
 body {
+    margin: 0;
     background: var(--bg-color);
     font-family: Arial, Helvetica, sans-serif;
 }
@@ -52,12 +53,12 @@ body {
     height: 3rem;
 }
 
-
 #topnav_profile span {
     font-size: 21px;
 }
 
 #topnav_profile img {
+    cursor: pointer;
     /*position: absolute;*/
     width: 3rem;
     height: 100%;
@@ -69,16 +70,25 @@ body {
     position: relative;
 }
 
+
+#topnav_profile_dropdown:hover {
+
+}
 #topnav_profile_dropdown {
+    display: none;
+    padding: 5px;
+    background: var(--bg-color-l);
+    border: 2px solid var(--bg-color-d);
+    border-radius: 5px;
     position: absolute;
     margin-top: 0.5rem;
-    display: flex;
     right: 0px;
     flex-direction: column;
 }
 
 .topnav_profile_button {
-    width: 6rem;
+    width: 8rem;
+    height: 2.5rem;
     background: var(--bg-color-ll);
     border: 2px solid var(--bg-color); 
     border-radius: 10px;

res/js/global.js

@@ -0,0 +1,15 @@
+
+document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") on_pfp_click(true);
+});
+
+
+
+function on_pfp_click(close = false) {
+    const el = document.getElementById("topnav_profile_dropdown");
+    if (!close && (el.style.display === "none" || el.style.display === "")) {
+        el.style.display = "flex";
+    } else {
+        el.style.display = "none";
+    }
+}