fixed lot of compatibilty and removed bad implementation

2 files changed, 69 insertions, 53 deletions

diff --git a/dest/css/style.css b/dest/css/style.css
index 10358cd9..40a43d50 100644
--- a/dest/css/style.css
+++ b/dest/css/style.css
@@ -1 +1 @@
-html{--topBarHeight:10%}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}.animate{animation-duration:.5s;animation-fill-mode:both}.animate.animate--infinite{animation-iteration-count:infinite}.animate.animation--delay-1s{animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--fast{animation-duration:.3s}.animate.animation--slow{animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;animation-timing-function:ease-in}.animate.bounce{animation-name:bounce}.animate.zoomIn{animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{transition-timing-function:linear}.animate.zoomOut{animation-name:zoomOut}.animate.reveal{animation-name:reveal;transition-timing-function:linear}.animate.shake{animation-name:shake}*{transition:all .3s}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:grey;background:hsla(0,0%,50%,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-moz-filter:blur(10px);-o-filter:blur(10px);-ms-filter:blur(10px);transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-moz-filter:blur(10px);-o-filter:blur(10px);-ms-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);-moz-filter:blur(2.5px);-o-filter:blur(2.5px);-ms-filter:blur(2.5px)}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition:all .5s}
\ No newline at end of file
+html{--topBarHeight:10%}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}.animate{animation-duration:.5s;animation-fill-mode:both}.animate.animate--infinite{animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite}.animate.animation--delay-1s{animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s;-webkit-animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s;-webkit-animation-duration:.3s}.animate.animation--fast{animation-duration:.3s}.animate.animation--slow{animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in}.animate.bounce{animation-name:bounce;-webkit-animation-name:bounce}.animate.zoomIn{animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{transition-timing-function:linear}.animate.zoomOut{animation-name:zoomOut}.animate.reveal{animation-name:reveal;transition-timing-function:linear}.animate.shake{animation-name:shake}*{transition:all .3s}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:grey;background:hsla(0,0%,50%,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition:all .5s}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 397fb468..1cd244a1 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -104,6 +104,7 @@ to {
 	-moz-filter: blur(32px);
 	-o-filter: blur(32px);
 	-ms-filter: blur(32px);
+	filter: blur(32px);
 	-webkit-backdrop-filter: blur(32px);
 	backdrop-filter: blur(32px);
 	transform: scale(2);
@@ -112,92 +113,111 @@ to {
 }
 
 @keyframes shake {
-0% { transform: rotate(0deg); }
-25% { transform: rotate(.5deg); }
-50% { transform: rotate(0eg); }
-75% { transform: rotate(-.5deg); }
-100% { transform: rotate(0deg); }
+	0% { transform: rotate(0deg); }
+	25% { transform: rotate(.5deg); }
+	50% { transform: rotate(0eg); }
+	75% { transform: rotate(-.5deg); }
+	100% { transform: rotate(0deg); }
 }
 
 @keyframes background-pan {
-from {
-	background-position: 0% center;
-}
-to {
-	background-position: -200% center;
-}
+	from {
+		background-position: 0% center;
+	}
+	to {
+		background-position: -200% center;
+	}
 }
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
 /* animate class */
 .animate {
-animation-duration: 0.5s;
-animation-fill-mode: both;
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
 }
 
 .animate.animate--infinite {
-animation-iteration-count: infinite;
+	animation-iteration-count: infinite;
+	-webkit-animation-iteration-count: infinite;
 }
 
 .animate.animation--delay-1s {
-animation-delay: 1s;
+	-webkit-animation-delay: 1s;
+	animation-delay: 1s;
 }
 .animate.animation--delay-p5s {
-animation-delay: 0.5s;
+	-webkit-animation-duration: 0.5s;
+	animation-delay: 0.5s;
 }
 
 .animate.animation--delay-p3s {
-animation-delay: 0.3s;
+	-webkit-animation-duration: 0.3s;
+	animation-delay: 0.3s;
 }
 
 .animate.animation--fast {
-animation-duration: 0.3s;
+	-webkit-animation-duration: 0.3s;
+	animation-duration: 0.3s;
 }
 
 .animate.animation--slow {
-animation-duration: 1s;
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
 }
 
 /* real utility classes */
 
 .animate.slideInTop {
-animation-name: slideInTop;
-animation-timing-function: ease-in;
+	animation-name: slideInTop;
+	-webkit-transition-timing-function: ease-in;
+	animation-timing-function: ease-in;
 }
 
 .animate.bounce {
-animation-name: bounce;
+	animation-name: bounce;
+	-webkit-animation-name: bounce;
 }
 
 .animate.zoomIn {
-transition-timing-function: linear;
-animation-name: zoomIn;
+	-webkit-transition-timing-function: linear;
+	transition-timing-function: linear;
+	-webkit-animation-name: reveal;
+	animation-name: zoomIn;
+	animation-name: zoomIn;
 }
 
 .animate.zoomOut {
-transition-timing-function: linear;
-animation-name: zoomOut;
+	-webkit-transition-timing-function: linear;
+	transition-timing-function: linear;
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
 }
 
 .animate.reveal {
-transition-timing-function: linear;
-animation-name: reveal;
+	-webkit-transition-timing-function: linear;
+	transition-timing-function: linear;
+	-webkit-animation-name: reveal;
+	animation-name: reveal;
 }
 
 .animate.shake {
-animation-name: shake
+	-webkit-animation-name: shake;
+	animation-name: shake;
 }
 
 /* transition */
 * {
-transition: all 0.3s; 
+	-webkit-transition: all 0.3s;
+	transition: all 0.3s; 
 }
 
 
 .js-tilt-glare {
-border-radius: 18px;
-overflow: hidden;
+	border-radius: 18px;
+	overflow: hidden;
 }
 
 /* topbar styles ========================================== */
@@ -243,6 +263,7 @@ header {
 	background: rgba(128, 128, 128, 0.2);
 	border-radius: 1mm;
 	transform: scaleX(0);
+	-webkit-transition: all 0.3s;
 	transition: all 0.3s;
 }
 
@@ -251,14 +272,12 @@ header {
 }
 
 .navBar a:hover {
-/* background: rgba(255, 255, 255, 0.2); */
-/* outline: ridge rgba(128, 128, 128, .6); */
--moz-filter: blur(10px);
--o-filter: blur(10px);
--ms-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
-backdrop-filter: blur(10px);
-transition: all 1s
+	/* background: rgba(255, 255, 255, 0.2); */
+	/* outline: ridge rgba(128, 128, 128, .6); */
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	-webkit-transition: all 1s;
+	transition: all 1s
 }
 
 .navBar a.active::after {
@@ -280,23 +299,17 @@ header:hover,
 #navBarHeader:hover,
 #navBarHeader:active
 {
-transform: scale(1.005);
--moz-filter: blur(10px);
--o-filter: blur(10px);
--ms-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
-backdrop-filter: blur(10px);
-transition: all 0.5s
+	transform: scale(1.005);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	transition: all 0.5s
 }
 
 .navBar,
 header,
 #navBarHeader {
--moz-filter: blur(2.5px);
--o-filter: blur(2.5px);
--ms-filter: blur(2.5px);
--webkit-backdrop-filter: blur(2.5px);
-backdrop-filter: blur(2.5px);
+	-webkit-backdrop-filter: blur(2.5px);
+	backdrop-filter: blur(2.5px);
 }
 
 /* other ================================================== */
@@ -324,6 +337,7 @@ a:hover {
 	text-decoration: underline;
 	text-decoration-thickness: 3px;
 	-webkit-text-decoration-line: underline;
+	text-decoration-line: underline;
 	cursor: pointer;
 	transition-timing-function: cubic-bezier(.4,0,.2,1);
 	transition-duration: .15s;
@@ -341,3 +355,5 @@ a:hover {
 	/* border-radius: 8px; */
 	/* color: #F4E8C1; */
 }
+
+/* TODO: Check dest if it compatible all browser */
\ No newline at end of file