1 files changed, 61 insertions, 102 deletions

diff --git a/src/css/styles.css b/src/css/styles.css
index b59a4e1..66c28be 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,13 +1,15 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
-
 @font-face {
-	font-family: 'Reflex';
-	src: url("./fonts/Reflex.ttf");
+	font-family: "BUBBCB";
+	src: url("./fonts/BUBBCB.TTF");
 }
 
 :root {
-	--body-bg-image: url('/images/aqua.gif');
+	--body-bg-image: url("/images/aqua.gif");
+}
+
+* {
+	image-rendering: pixelated;
+	box-sizing: border-box;
 }
 
 
@@ -18,13 +20,18 @@ body {
 }
 
 body {
-	font-family: 'IBM Plex Mono', monospace;
+	font-family: Verdana;
+	font-size: 15px;
 	max-width: 900px;
 	margin: auto;
 	background: #ffffd6;
 	background-image: var(--body-bg-image);
 }
 
+p {
+	text-align: justify;
+}
+
 footer {
 	bottom: 0px;
 	left: 0;
@@ -32,10 +39,6 @@ footer {
 	width: 100%;
 }
 
-* {
-	box-sizing: border-box;
-}
-
 .header {
 	text-align: center;
 }
@@ -84,11 +87,15 @@ footer ul>li>p {
 
 .logo {
 	text-decoration: none;
-	font-family: 'Reflex', sans-serif;
+	font-family: "BUBBCB", sans-serif;
 	font-size: 220%;
 	color: #000000;
 }
 
+h4.slogan {
+	margin: 0px;
+}
+
 .mt-10 {
 	margin-top: 10px;
 }
@@ -129,11 +136,11 @@ table td {
 }
 
 .post-lists li {
-	list-style-type: '◆  ';
+	list-style-type: "◆  ";
 	margin-bottom: 5px;
 }
 
-@media (max-width:1000px) {
+@media (max-width: 1000px) {
 	body {
 		font-size: 80%;
 		padding: 3%;
@@ -144,108 +151,56 @@ table td {
 	}
 }
 
-
-/* Wobble Bottom */
-@-webkit-keyframes hvr-wobble-bottom {
-	16.65% {
-		-webkit-transform: skew(-12deg);
-		transform: skew(-12deg);
-	}
-
-	33.3% {
-		-webkit-transform: skew(10deg);
-		transform: skew(10deg);
-	}
-
-	49.95% {
-		-webkit-transform: skew(-6deg);
-		transform: skew(-6deg);
-	}
-
-	66.6% {
-		-webkit-transform: skew(4deg);
-		transform: skew(4deg);
-	}
-
-	83.25% {
-		-webkit-transform: skew(-2deg);
-		transform: skew(-2deg);
-	}
-
-	100% {
-		-webkit-transform: skew(0);
-		transform: skew(0);
-	}
-}
-
-@keyframes hvr-wobble-bottom {
-	16.65% {
-		-webkit-transform: skew(-12deg);
-		transform: skew(-12deg);
-	}
-
-	33.3% {
-		-webkit-transform: skew(10deg);
-		transform: skew(10deg);
-	}
-
-	49.95% {
-		-webkit-transform: skew(-6deg);
-		transform: skew(-6deg);
-	}
-
-	66.6% {
-		-webkit-transform: skew(4deg);
-		transform: skew(4deg);
-	}
-
-	83.25% {
-		-webkit-transform: skew(-2deg);
-		transform: skew(-2deg);
-	}
-
-	100% {
-		-webkit-transform: skew(0);
-		transform: skew(0);
-	}
-}
-
-.hvr-wobble-bottom {
+/* Underline Reveal */
+.hvr-underline-reveal {
 	display: inline-block;
 	vertical-align: middle;
 	-webkit-transform: perspective(1px) translateZ(0);
 	transform: perspective(1px) translateZ(0);
 	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-	-webkit-transform-origin: 100% 0;
-	transform-origin: 100% 0;
+	position: relative;
+	overflow: hidden;
 }
 
-.hvr-wobble-bottom:hover,
-.hvr-wobble-bottom:focus,
-.hvr-wobble-bottom:active {
-	-webkit-animation-name: hvr-wobble-bottom;
-	animation-name: hvr-wobble-bottom;
-	-webkit-animation-duration: 1s;
-	animation-duration: 1s;
-	-webkit-animation-timing-function: ease-in-out;
-	animation-timing-function: ease-in-out;
-	-webkit-animation-iteration-count: 1;
-	animation-iteration-count: 1;
+.hvr-underline-reveal:before {
+	content: "";
+	position: absolute;
+	z-index: -1;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #000000;
+	height: 2px;
+	-webkit-transform: translateY(4px);
+	transform: translateY(4px);
+	-webkit-transition-property: transform;
+	transition-property: transform;
+	-webkit-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-webkit-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
 }
 
+.hvr-underline-reveal:hover:before,
+.hvr-underline-reveal:focus:before,
+.hvr-underline-reveal:active:before {
+	-webkit-transform: translateY(0);
+	transform: translateY(0);
+}
 
 .tools-container {
 	--auto-grid-min-size: 16rem;
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+	grid-template-columns: repeat(auto-fill,
+			minmax(var(--auto-grid-min-size), 1fr));
 	grid-gap: 1rem;
 }
 
 .tool {
 	border: 1px solid #000000;
-    width: 252px;
-    margin: 10px;
-    padding: 10px;
+	width: 252px;
+	margin: 10px;
+	padding: 10px;
 	box-shadow: 2px 6px;
 	background: linen;
 }
@@ -254,12 +209,12 @@ img {
 	max-width: 100%;
 }
 
-.tools-container .tool-name *{
+.tools-container .tool-name * {
 	font-weight: bold;
 	color: #000000;
 }
 
-.tools-container label{
+.tools-container label {
 	font-weight: bold;
 }
 
@@ -269,8 +224,8 @@ p.first-letter::first-letter {
 
 .highlight {
 	background: #000000;
-    padding: 2px;
-    color: #ffffff;
+	padding: 2px 5px 2px 5px;
+	color: #ffffff;
 }
 
 .highlight.tags {
@@ -279,4 +234,8 @@ p.first-letter::first-letter {
 
 .article {
 	line-height: 25px;
+}
+
+.etyone {
+	margin-bottom: 5px;
 }
\ No newline at end of file