Update style.css

static/style.css

@@ -922,3 +922,136 @@ h3 {
 #footerlinks {
   text-decoration: none;
 }
+
+
+
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .icons-list a {
+    position: relative;
+    top: 10px;
+  }
+}
+
+
+.clip {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.svg--source {
+  display: none
+}
+
+.svg--icon {
+  width: 100%;
+  max-width: 5rem;
+  height: 100%;
+  max-height: 5rem;
+  display: block;
+  margin: 0 auto;
+  fill: currentColor
+}
+
+.wrapper {
+  width: 100%;
+  margin-top:100px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+
+
+.share {
+  width: 3rem;
+  height: 3rem;
+  float: left;
+  margin: .5rem 1rem 0rem 0;
+  color: #353c4a;
+  border: .125rem solid #f3f3f3;
+  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
+  border-radius: 50%;
+  transition: 250ms;
+  
+  &:last-child {
+    margin-right: 0
+  }
+  
+  &:hover,
+  &:focus {
+    //background: white;
+  }
+  
+  &:focus {
+    outline-color: inherit;
+  }
+}
+
+.twitter {
+  &:hover,
+  &:focus {
+    color: #00ACED;
+    box-shadow: 0 0 24px 0 #00ACED
+  }
+}
+
+.instagram {
+  &:hover,
+  &:focus {
+    color: #4183c4;
+    box-shadow: 0 0 24px 0 #4183c4
+  }
+}
+
+
+.reddit {
+  &:hover,
+  &:focus {
+    color: #bd081c;
+    box-shadow: 0 0 24px 0 #bd081c
+  }
+}
+
+.trello {
+  &:hover,
+  &:focus {
+    color: #bd081c;
+    box-shadow: 0 0 24px 0 #bd081c
+  }
+}
+
+
+
+.youtube {
+  &:hover,
+  &:focus {
+    color: #cd201f;
+    box-shadow: 0 0 24px 0 #cd201f
+  }
+}
+
+.facebook {
+  &:hover,
+  &:focus {
+    color: #3b5998;
+    box-shadow: 0 0 24px 0 #3b5998
+  }
+}
+
+.discord {
+  &:hover,
+  &:focus {
+    color: #dd4b39;
+    box-shadow: 0 0 24px 0 #dd4b39
+  }
+}