profile-site/styles.css

* {
   padding: 0;
   margin: 0;
   font-family: "Nunito", "Times New Roman", Times, serif;
}

:root {
   /* Eventually allow any hex color through JS, along with random generator */
   --theme-color: #f69b46;
   /* 
   Other nice colors
   #46aaf6 // blue
   #f69b46 // orange
   #46f64f // green
   #f64646 // red
   */
}

.title {
   margin: 2rem 2rem 1rem 2rem;
   text-align: center;
}

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

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

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

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

p {
   margin: .5rem 2rem;
}

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

.footer {
   padding: 1rem;
   display: grid;
   grid-template-columns: auto auto;
   background-color: #222;
   color: #fff;
   border-bottom: solid .4rem var(--theme-color);
}

.faded-footer {
   color: #bbb;
}

.progress-parent {
   display: block;
   width: 100%;
   background-color: #ccc;
   position: fixed;
   top: 0;
   left: 0;
}

.progress {
   height: .5rem;
   width: 0%;
   background-color: var(--theme-color);
   animation: progress 1s linear;
}

@keyframes progress {
   to { width: 100%; }
}

.progress {
   animation-play-state: paused;
   animation-delay: calc(var(--scroll) * -1s);
   animation-iteration-count: 1;
   animation-fill-mode: both;
}