*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden}body{color:#000;background:#fff}a{color:inherit;text-decoration:none}main{display:grid;width:calc(min(100%, 45rem));margin:auto;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));grid-gap:1rem;padding:1rem}.card{display:flex;flex-direction:column;position:relative}.card span{position:absolute;font-size:2.5rem;font-weight:700;pointer-events:none}.card input,.card span{width:100%;text-align:center}.card input{cursor:pointer;border:.25rem solid #e3e0e0;border-radius:.5rem;height:5rem;outline:none;z-index:10;background:transparent;font-size:1.5rem;padding-top:2.5rem;font-weight:500;transition:border-color .2s}.card input::selection{color:#fff;background:#000}.card:hover input{border-color:#bebebe}.card input:focus{border-color:#000}