@import url(https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap);:root{--clr-neon:#ff14bd;--clr-bg:#31202b}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:grid;background:var(--clr-bg);color:var(--clr-neon);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Lato,sans-serif;transition:.2s}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 10px}.content{padding-top:20px;height:200px;width:80vw;text-align:center}.keys,.row{display:flex}.keys{width:60px;height:60px;background-color:#fff;justify-content:center;align-items:center;margin:4px;transition:.2s;z-index:5;cursor:pointer;border-radius:2px}.backspace_key{width:120px}.slash_key,.tab_key{width:90px}.caps_lock_key{width:128px}.enter_key{width:120px}.shift_key{width:124px}.space_key{max-width:600px;width:100%}.ctrl_key,.opt_key{width:80px}.cmd_key{width:90px}.typewriter{width:60vw;color:var(--clr-neon);overflow:hidden;border-right:.15em solid orange;white-space:nowrap;margin:0 auto;letter-spacing:.15em;-webkit-animation:typing 6s steps(100),blink-caret .5s step-end infinite;animation:typing 6s steps(100),blink-caret .5s step-end infinite}@-webkit-keyframes typing{0%{width:0}to{width:60vw}}@keyframes typing{0%{width:0}to{width:60vw}}@-webkit-keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:orange}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:orange}}@media only screen and (max-width:1000px){.content{width:100%}.keys{width:40px;height:40px;margin:2px}.backspace_key{width:100px}.slash_key,.tab_key{width:70px}.caps_lock_key{width:90px;font-size:.8em}.enter_key{width:94px}.shift_key{width:92px}.space_key{width:300px}.ctrl_key,.opt_key{width:70px}.cmd_key{width:90px}.arrow_left,.arrow_right{width:60px}.typewriter{display:none}}.text{width:100%;height:90px;margin-bottom:30px;background:transparent;border:none;outline:none;font-size:26px;padding-left:10px;transition:.2s;color:var(--clr-neon)}.keys.active{background:var(--clr-neon);color:var(--clr-bg)}body.active{background-color:#363636}.night_mode{width:80px;height:30px;background-color:#e6e6e6;position:absolute;right:25px;top:25px;border-radius:50px;display:flex;align-items:center;cursor:pointer;transition:.2s}.neon-button{cursor:pointer;text-decoration:none;color:var(--clr-neon);border:var(--clr-neon) .125em solid;padding:.25em 1em;border-radius:.25em;text-shadow:0 0 .125em hsla(0,0%,100%,.3),0 0 .45em currentColor;box-shadow:inset 0 0 .5em 0 var(--clr-neon),0 0 .5em 0 var(--clr-neon);position:relative}.neon-button:before{pointer-events:none;content:"";position:absolute;background:var(--clr-neon);top:120%;left:0;width:100%;height:100%;transform:perspective(1em) rotateX(40deg) scaleY(.35);filter:blur(1em);opacity:.7}.neon-button:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:0 0 2em .5em var(--clr-neon);opacity:0;background-color:var(--clr-neon);z-index:-1;transition:opacity .1s linear}.neon-button:focus,.neon-button:hover{color:var(--clr-bg);text-shadow:none}.neon-button:focus:after,.neon-button:focus:before,.neon-button:hover:after,.neon-button:hover:before{opacity:1}.shuffle-type{position:absolute;bottom:100px;left:calc(50vw - 80px);text-align:center}