.footer { width: 100%; padding: 1.25em 1.5em; border-top: 1px solid var(--kinda-light); color: var(--medium-dark); a { color: var(--medium-dark); background: none; padding-bottom: 0; } } .row { display: flex; width: 100%; max-width: 865px; margin: 0 auto; justify-content: space-between; font-size: 0.85em; line-height: 2.3; } .view_source { padding-bottom: 2px; border-bottom: 1px solid; border-color: var(--light); &:hover { border-color: var(--kinda-light); } } .beat { 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 0; // Safari iOS menu bar reappears below 44px: // https://www.eventbrite.com/engineering/mobile-safari-why/ padding-bottom: 45px !important; // Allows you to scroll below the viewport; default value is visible overflow-y: scroll; } // 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); } }