* { 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: 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; } .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 (prefers-color-scheme: dark) { .footer { background-color: #000; } }