css redo

static/styles.css

@@ -8,6 +8,7 @@
 * {
   overflow-x: hidden;
   box-sizing: border-box;
+  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
 }
 p,
 li {
@@ -118,12 +119,27 @@ footer > .social {
   display: inline-flex;
   max-width: 300px;
 }
-.social > a {
+
+.social a {
+  border-radius: 50%;
+  background-color: white;
   margin-right: 8px;
   cursor: pointer;
+  padding: 6px;
 }
-.social > a:hover {
-  color: #f76902;
+.social a svg {
+  fill: black;
+  stroke: white;
+}
+
+.social a:hover {
+  background-color: #f76902;
+  color: white;
+}
+
+.social a:hover svg {
+  fill: white;
+  stroke: #f76902;
 }
 
 .contact {
@@ -131,9 +147,10 @@ footer > .social {
   justify-content: center;
   align-items: center;
   height: 40px;
-  padding: 0 8%;
-  font-size: 2rem;
+  padding: 5px 10px;
+  font-size: 1.4rem;
   background-color: white;
+  font-weight: 700;
   color: black;
 }
 

templates/base.html

@@ -21,9 +21,9 @@
             <span>One Lomb Memorial Drive,<br/>
                 Rochester, NY 14623</span>
             <div class="social">
-                <a  target="__blank"><i data-feather="twitter"></i></a>
-                <a  target="__blank"><i data-feather="instagram"></i></a>
-                <a  target="__blank"><i data-feather="gitlab"></i></a>
+                <a  target="__blank" href="https://twitter.com/openatrit"><i data-feather="twitter"></i></a>
+                <a  target="__blank" href="https://instagram.com/openatrit"><i data-feather="instagram"></i></a>
+                <a  target="__blank" href="https://gitlab.com/open-rit"><i data-feather="gitlab"></i></a>
             </div>
             <a targte="__blank" href="mailto:openatrit@gmail.com">
                 <div class="contact">