feat: text on logo

src/App.css

@@ -33,9 +33,11 @@ body {
 }
 
 h1,
-h2 {
+h2,
+h3 {
   margin-top: 0px;
   margin-bottom: 0px;
+  padding: 4px 16px;
 }
 
 .container {
@@ -154,6 +156,28 @@ button {
   font-size: 150%;
 }
 
+.logo {
+  position: relative;
+  text-align: center;
+  height: 169px;
+  img {
+    display: block;
+    margin: auto;
+  }
+  h3 {
+    position: absolute;
+    top: 33%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: aliceblue;
+    background-color: black;
+    border-radius: unset;
+    letter-spacing: 8px;
+    padding: 0px 40px;
+    font-family: monospace;
+  }
+}
+
 .loader {
   display: block;
   position: relative;

src/App.tsx

@@ -5,11 +5,13 @@ import Rankings from "./Rankings";
 function App() {
   return (
     <>
-      <a href={baseUrl}>
+      <div className="logo">
-        <img alt="logo" height="128px" src="logo.svg" />
+        <a href={baseUrl}>
-      </a>
+          <img alt="logo" height="66%" src="logo.svg" />
-      <h1>cutt</h1>
+        </a>
-      <span className="grey">cool ultimate team tool</span>
+        <h3 className="centered">cutt</h3>
+        <span className="grey">cool ultimate team tool</span>
+      </div>
       <Rankings />
       <footer>
         <p className="grey">