.footer { width: 100%; padding: 1.25em 1.5em; border-top: 1px solid var(--kinda-light); background-color: var(--background-outer); color: var(--medium-dark); /* light-dark theme switch fading */ transition: color 0.25s ease, background 0.25s ease, border 0.25s ease; } .link { color: inherit; text-decoration: none; } .row { display: flex; width: 100%; max-width: 865px; margin: 0 auto; justify-content: space-between; font-size: 0.85em; line-height: 2.3; } .icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin: 0 0.075em; } .nextjs:hover { color: var(--medium); } .view_source { padding-bottom: 2px; border-bottom: 1px solid; border-color: var(--light); } .view_source:hover { border-color: var(--kinda-light); } .heart { display: inline-block; animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */ animation-delay: 7.5s; /* offset from wave animation */ will-change: transform; } @media screen and (max-width: 768px) { .footer { padding: 1em 1.25em; } /* stack columns on left instead of flexboxing across */ .row { font-size: 0.8em; display: block; } } @keyframes beat { 0% { transform: scale(1); } 2% { transform: scale(1.25); } 4% { transform: scale(1); } 6% { transform: scale(1.2); } 8% { transform: scale(1); } /* pause for ~9 out of 10 seconds */ 100% { transform: scale(1); } }