закругления у <a>, чуть чуть поменял текст в header

assets/css/styles.css

@@ -16,6 +16,7 @@ body {
 
 header, main, footer {
     margin: 5px;
+    margin-bottom: 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -63,6 +64,13 @@ a {
     background-color: #77abbb;
     color: black;
     text-decoration: none;
+    border-radius: 5px;
+    padding: 0 5px;
+    transition: background-color 0.1s ease;
+}
+
+a:hover {
+    background-color: #778bbb;
 }
 
 pre {
@@ -121,6 +129,9 @@ details[open] > summary {
 }
 
 @media (max-width: 800px) {
+    a:hover {
+        background-color: #77abbb;
+    }
 	header, footer, main {
 		flex: 1 100%;
 	}

mvc/views/blocks/header.gohtml

@@ -19,8 +19,7 @@
     </div>
     <div>
         <p>
-            > <a href="/">main page</a><br/>
+            see <a href="/">main page</a> or go to <a href="/posts/">posts section</a>
-            > <a href="/posts/">posts section</a>
         </p>
     </div>
     <div>