:focus-visible { outline: none; box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%); transition: box-shadow 0.3s ease; } .buttonish { width: 100%; color: #fff !important; width: 100%; background-color: #09f; padding: 18px !important; border-radius: 5px; border: none; font-size: 18px !important; font-family: Roboto,sans-serif; -webkit-box-shadow: 0 4px 0 #0063a6; box-shadow: 0 4px 0 #0063a6; margin-bottom: 4px; cursor: pointer; -webkit-appearance: button; line-height: normal; margin: 0; margin-bottom: 0px; vertical-align: baseline; text-align: center; margin: 0 auto; } footer a:hover {text-decoration: underline; color: #12baf9} .a11y-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* this needs to be the first element in and update the href to the first piece of non-navigation */ .a11y-helper { position: fixed; top: 1rem; left: -999em; z-index: 11; -moz-appearance: none; -webkit-appearance: none; background-color: transparent; border: 1px solid black; border-radius: 0.6rem; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; max-width: 100%; display: inline-block; margin: 0; padding: 0.3em 0.8em; font-weight: 500; text-decoration: none; border-radius: 3rem; white-space: nowrap; background-color: transparent; color: blue; border: 1px solid red; transition: background-color 150ms ease; &:focus { left: 1rem; background: white; z-index: 99999; } }