style

frontend/src/pages/Home.tsx

@@ -5,11 +5,11 @@ const Home = () => {
     return (
         <div>
             <div className="main-head-box">
-                <div>
-                    <h1 className="mainHead">kohngrüti</h1>
+                <div className="main-head-subbox-left">
+                    <h1 className="main-head">kohngrüti</h1>
                 </div>
-                <div>
-
+                <div className="main-head-subbox-right">
+                    <span className="material-symbols-outlined">recenter</span>
                 </div>
             </div>
             <div>

frontend/src/styles/home.css

@@ -5,12 +5,37 @@
     display: flex;
   }
   
-  .mainHead {
+  .main-head-subbox-right {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 34px;
+    width: 50%;
+  }
+
+  .main-head-subbox-left {
+    display: flex;
+    justify-content: flex-start;
+    margin-left: 34px;
+    width: 50%;
+  }
+
+  .main-head {
     font-size: 5rem;
     color: #6dd6f4;
-    margin: 2px 0px 24px 24px;
+    margin: 2px 0px 24px 22px;
     font-family: "Sulphur Point", sans-serif;
     font-weight: 500;
     letter-spacing: 3px;
     text-decoration: underline;
+  }
+
+  .material-symbols-outlined {
+    margin: 14px 64px 0px 0px;
+    font-size: 82px;
+    color: #6dd6f4;
+    font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24
   }