From 91592c7220e3ca739317bac915bb7e7f0f69a6fc Mon Sep 17 00:00:00 2001
From: Ashton <38200084+Alphatism@users.noreply.github.com>
Date: Sun, 22 May 2022 13:53:33 -0400
Subject: [PATCH] Gradient Gold Font :OOOOOOO (#228)

* Update browser.css

* Added Gradient Text

* Fixed border compatibility for Safari
---
 assets/css/browser.css | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/assets/css/browser.css b/assets/css/browser.css
index 91e52c8..7a48670 100644
--- a/assets/css/browser.css
+++ b/assets/css/browser.css
@@ -184,10 +184,15 @@ h1 {
 }
 
 h2 {
-    color: rgb(255, 200, 0);
     font-size: 8vh;
     -webkit-text-stroke-width: 0.265vh;
-    text-shadow: 0.35vh 0.35vh 0.1vh rgba(0, 0, 0, 0.3);
+    background: -webkit-linear-gradient(#e28000, #ffee44);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-filter: drop-shadow(0.25vh 0.25vh rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0.25vh 0.25vh rgba(0, 0, 0, 0.25));
+    text-shadow: none !important;
 }
 
 h3, input[type=text], input[type=password], input[type=number], .h3Size {
@@ -337,14 +342,16 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 }
 
 .brownBox {
-    border: 2.5vh solid transparent;
+    border-width: 2.5vh;
+    border-style: solid;
     border-radius: 3vh;
     background-color: #995533;
     border-image: url('../../assets/brownbox.png') 10% round;
 }
 
 .blueBox {
-    border: 2.5vh solid transparent;
+    border-width: 2.5vh;
+    border-style: solid;
     border-radius: 3vh;
     background-color: #334499;
     border-image: url('../../assets/bluebox.png') 10% round;
@@ -353,7 +360,8 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 .fancybox {
     width: 69vh;
     padding: 1vh 3vh;
-    border: 3.5vh solid transparent;
+    border-width: 3.5vh;
+    border-style: solid;
     border-radius: 3vh;
     background-color: #001931;
     border-image: url('../../assets/fancybox.png') 10% stretch;
@@ -365,14 +373,18 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 }
 
 .epicbox {
-    border: 3.5vh solid transparent;
+
+    border-width: 3.5vh;
+    border-style: solid;
     border-image: url('../../assets/epicbox.png') 20% stretch;
     border-image-slice: 85 77;
     border-image-width: 9.5vh;
 }
 
 .leaderboardBox {
-    border: 3.5vh solid transparent;
+
+    border-width: 3.5vh;
+    border-style: solid;
     border-image: url('../../assets/leaderboardbox.png') 20% stretch;
     border-image-slice: 85 77;
     border-image-width: 9.5vh;
@@ -689,13 +701,20 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
     transform: scale(0.8) translate(-13%, -12.5%)
 }
 
+
 .comment h2, .smallGold {
+    background: -webkit-linear-gradient(#e28000, #ffee44);
+    background-clip: text;
     width: fit-content;
     vertical-align: top;
     font-size: 3.7vh;
     -webkit-text-stroke-width: 0.14vh;
     -webkit-text-stroke-color: black;
-    text-shadow: 0.2vh 0.2vh 0.02vh rgba(0, 0, 0, 0.3);}
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-filter: drop-shadow(0.2vh 0.2vh rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0.2vh 0.2vh rgba(0, 0, 0, 0.25));
+}
 
 .commentText {
     margin-top: 1.6vh;