add accesibility stuff and add webkit backdorp for ios/safari

bio/style.css

@@ -54,6 +54,7 @@ body {
     font-weight: bold;
     background-color: rgba(9, 9, 9, 0.95);
     backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
     transition: 1s;
 }
 
@@ -96,6 +97,7 @@ body {
     transition-duration: 1s;
     background: rgba(255, 255, 255, 0.02);
     backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
     border-radius: 15px;
     padding: 20px;
     text-align: center;
@@ -246,6 +248,7 @@ body {
     height: 30px;
     background-color: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
     box-shadow: #000000 3px 3px 20px !important;
     border: 2px solid rgba(150, 150, 150, 0.25);
     text-shadow: #000000 3px 2px 7px !important;
@@ -384,6 +387,7 @@ body {
 
 .blurBG {
     backdrop-filter: blur(0px);
+	-webkit-backdrop-filter: blur(0px);
     width: 105%;
     height: 110%;
     border-radius: 10px;
@@ -453,6 +457,7 @@ div[id="name"]::after {
     font-family: monospace;
     bottom: 87% !important;
     backdrop-filter: blur(5px);
+	-webkit-backdrop-filter: blur(5px);
     left: 50%;
     text-wrap: pretty;
 }

index.html

@@ -30,7 +30,7 @@
             </svg>
         </button>
 
-        <select name="Language" id="langauge-selector">
+        <select title="Change Language" name="Language" id="langauge-selector">
             <option value="en">English 🇬🇧</option>
             <option value="de">Deutsch 🇩🇪</option>
         </select>
@@ -56,4 +56,4 @@
     <script src="translate.js"></script>
 </body>
 
-</html>
+</html>

keyboard/style.css

@@ -109,6 +109,7 @@ p, h6, h1, h3 {
     justify-content: left;
     background-color: rgb(42,42,42,0.775);
     backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
     width: 100%;
 }
 
@@ -140,4 +141,4 @@ p, h6, h1, h3 {
     border-radius: 10px;
     background-color: #747474;
 
-}
+}

notes/style.css

@@ -11,6 +11,7 @@ div.top {
     position: fixed;
     background-color: #242424dd;
     backdrop-filter: blur(5px);
+	-webkit-backdrop-filter: blur(5px);
     user-select: none;
     z-index: 9999;
 }

projects/style.css

@@ -16,6 +16,7 @@ div.header-main {
     left: 0;
     background-color: rgba(59, 59, 59, 0.885);
     backdrop-filter: blur(5px);
+	-webkit-backdrop-filter: blur(5px);
 }
 
 div.header-main {
@@ -233,4 +234,4 @@ h2 {
         margin-top: 5px;
         margin-right: 10px;
     }
-}
+}

style.css

@@ -46,6 +46,7 @@ html {
     position: fixed;
     background-color: rgba(59, 59, 59, 0.885);
     backdrop-filter: blur(5px);
+	-webkit-backdrop-filter: blur(5px);
     font-size: large;
     top: 0;
     border-bottom: 1px solid rgba(70, 70, 70, 0.885);
@@ -84,8 +85,8 @@ html {
 
 .tool-div {
     bottom: 20px !important;
-    background-color: rgba(75, 75, 75, 1);
-    border: 2px solid rgba(80, 80, 80, 1);
+    background-color: rgba(50, 50, 50, 1);
+    border: 2px solid rgba(65, 65, 65, 1);
     border-radius: 7px;
     transition: 0.3s;
     text-align: center;
@@ -121,8 +122,8 @@ html {
 
 .visit-tool {
     padding: 10px 20px;
-    background-color: rgb(60, 120, 85);
-    color: #f0f0f0;
+    background-color: rgb(40, 100, 65);
+    color: #fff;
     border: 2px solid rgb(75, 135, 100);
     border-radius: 4px;
     transition: 0.1s;
@@ -132,7 +133,7 @@ html {
 }
 
 .visit-tool:hover {
-    background-color: rgb(75, 135, 100);
+    background-color: rgb(35, 95, 60);
     border-color: rgb(90, 150, 115);
 }
 
@@ -227,4 +228,4 @@ html {
         width: 100%;
         margin-top: 70px;
     }
-}
+}