Add login/logout

public/css/style.css

@@ -227,20 +227,38 @@ summary:focus-visible {
   color: var(--color-text);
 }
 
+.topbar > form {
+  margin: 0 20px 0 auto;
+}
+
 .topbar a.topbar__account {
   margin-left: auto;
   margin-right: 20px;
-  padding: 8px 14px;
-  border: 1px solid var(--color-accent);
-  color: var(--color-accent);
 }
 
-.topbar a.topbar__account:hover {
+.topbar .topbar__account {
+  display: inline-block;
+  padding: 8px 14px;
+  border: 1px solid var(--color-accent);
+  background: transparent;
+  color: var(--color-accent);
+  font: inherit;
+  line-height: normal;
+  text-decoration: none;
+}
+
+.topbar .topbar__account:hover {
   background: var(--color-accent);
   color: var(--color-background);
   text-decoration: none;
 }
 
+.topbar button.topbar__account {
+  appearance: none;
+  border-radius: 0;
+  cursor: pointer;
+}
+
 .topbar img {
   display: block;
   width: 48px;
@@ -554,4 +572,4 @@ footer {
   .box__link:hover {
     transform: none;
   }
-}
+}