profile-site/styles/styles.css

* {
   padding: 0;
   margin: 0;
}

:root {
   --theme-color: #f69b46;
}

a {
   color: var(--theme-color);
}

@media (prefers-color-scheme: dark) {
   body {
      background-color: #222;
      color: #ddd;
   }
}

/* Footer styles */
.footer {
   padding: 3rem 1rem;
   display: grid;
   grid-template-columns: auto auto;
   background-color: #222;
   color: #fff;
   border-bottom: solid .4rem var(--theme-color);
   font-family: "Nunito", "Times New Roman", Times, serif;
   overflow: auto;
}

.footer h2 {
   position: relative;
   margin: 1rem .75rem .75rem 2.5rem;
   font-size: 1.5rem;
   transition: .2s;
}

.footer h2::before {
   content: "";
   position: absolute;
   top: .5rem;
   left: -.6rem;
   height: 1rem;
   width: .25rem;
   border-radius: 5rem;
   background-color: var(--theme-color);
   transition: .2s;
}

.footer h2:hover {
   margin: 1rem .75rem .75rem 3rem;
}

.footer h2:hover::before {
   left: -1.1rem;
}

.footer p {
   margin: .5rem 2rem;
}

.faded-footer {
   color: #bbb;
}

@media only screen and (max-width: 750px) {
   .footer {
      grid-template-columns: auto;
   }
}

@media (prefers-color-scheme: dark) {
   .footer {
      background-color: #000;
   }
}