:root { --white: #fff; --black: #000; --github-fill: #fff; --github-color: #6db9e3; --github-focus: var(--black); --image: url("https://images.unsplash.com/photo-1531416062945-748bb07c3514?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80") no-repeat center center/cover; } * { box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .background { background: var(--image); position: absolute; top: -20px; bottom: -20px; left: -20px; right: -20px; z-index: -1; filter: blur(20px); } button:focus { outline: 3px solid var(--black); outline-offset: 3px; } .github-corner:focus svg path { fill: var(--github-focus); } .github-corner:focus .octo-arm, .github-corner:focus .octo-body { fill: var(--github-color); } .github-corner:focus .octo-arm, .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } @media (max-width: 500px) { .github-corner { display: none; } #login-box { width: 300px; } #strength-title { font-size: 20px; margin-bottom: 12px; } .background { top: 0; bottom: 0; left: 0; right: 0; } }