body { text-align: center; font-family: Sans-serif; margin: 0; } .graph-data { position: absolute; top: 0px; right: 0px; padding: 5px; } .toggle-data-btn { cursor: pointer; opacity: 0.85; } .toggle-data-btn:hover { opacity: 1; } #graph-data-description { font-size: 12px; color: slategrey; } #donate { position: fixed; z-index: 999; bottom: 24px; right: 24px; background-color: #68f442; padding: 16px 24px 16px 16px; width: auto; border-radius: 28px; box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 6px 8px rgb(0 0 0 / 11%), 0 8px 16px rgb(0 0 0 / 11%); line-height: 24px; font-size: 20px; color: #000; transition: color .2s, background-color .2s; display: flex; align-items: flex-end; border: none; box-sizing: initial; outline: none; } #donate img { height: 24px; padding-right: 16px; transition: filter .2s; } #donate:hover img { filter: invert(1); } #donate:hover { background-color: #4c9c35; cursor: pointer; color: #fff; } @media screen and (max-width: 500px) { #donate { font-size: 14px; line-height: 18px; padding: 14px 18px 14px 14px; bottom: 14px; right: 14px; } #donate img { height: 18px; padding-right: 8px; } }