@import"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap";ul{list-style:none}.infos{position:fixed;top:2rem;left:2.4rem;z-index:9999}.infos h1{font-size:2rem;letter-spacing:1px;margin:0 auto;line-height:1.2}.infos h3{font-weight:500}.infos h3.status{color:#4db6ac}.infos h3.message{display:block;position:fixed;left:50%;border-radius:5px;transform:translate(-50%);text-align:center;color:#fff;padding:.24rem .8rem;font-size:1.2rem;background-color:#e718183d;backdrop-filter:contrast(81%) blur(.8rem)}main{width:min-content;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.blocks{--grid-number: 5;--block-size: min(6rem, calc(18vw - .8rem));--grid-gap: min(1rem, 2.6vw);display:grid;grid-template-columns:repeat(var(--grid-number),var(--block-size));grid-template-rows:repeat(var(--grid-number),var(--block-size));gap:var(--grid-gap);margin:0;padding:0}.blocks .block{--block-color: 0 100% 66%;width:var(--block-size);height:var(--block-size);left:calc(var(--grid-gap) + var(--x) * (var(--grid-gap) + var(--block-size)));top:calc(var(--grid-gap) + var(--y) * (var(--grid-gap) + var(--block-size)));border:1px solid;border-color:hsl(var(--block-color));filter:brightness(80%);box-shadow:0 0 24px 4px hsl(var(--block-color)/.14);animation:shadow-animation 1.5s infinite alternate-reverse;cursor:not-allowed;transition:.3s;position:relative}.blocks .block:after{content:"";position:absolute;inset:0;transition:.5s .1s;box-shadow:inset 0 0 2.4em #f0f0f03d}.blocks .block.flicker:after{transition:0s;background-color:hsl(var(--block-color));box-shadow:0 0 24px 4px hsl(var(--block-color)/.5)}.blocks .userInputting{cursor:pointer}.blocks .userInputting:hover{background-color:hsl(var(--block-color)/.14)}@keyframes shadow-animation{to{box-shadow:0 0 24px 4px hsl(var(--block-color)/.5)}}.bottom{width:100%;display:flex;justify-content:space-between;align-items:center}.bottom>ul{padding:0}.inputStatus{margin-right:auto;display:flex;column-gap:8px}.inputStatus .circle{background-color:#fff;width:8px;height:8px;opacity:.3;border-radius:50%}.inputStatus .circle.correct{opacity:1}.inputStatus.correct .circle{background-color:#577ec1}.inputStatus.wrong .circle{background-color:#ff5252}.inputStatus.gameover .circle{background-color:transparent}.inputStatus.win .circle{background-color:#577ec1}.lifes{display:flex;margin-left:auto;gap:.24rem}.start{position:fixed;inset:0;backdrop-filter:blur(.8px);display:grid;place-items:center}.start.hidden,.start.hidden button{opacity:0;visibility:hidden}.start button{padding:.8rem 2.4rem;border:2px solid #eee;color:#eee;font-size:2.4vw;background-color:transparent;border-radius:2.5rem;transition:background-color .3s}.start button:active{transform:translateY(2.4px)}.start button:hover{background-color:#f0f0f014}html,body{background-color:#162408;color:#fff;display:grid;place-items:center;margin:0;width:100%;height:100%;font-family:Roboto,sans-serif;border:5px solid hsl(0 0% 100% / .08);box-sizing:border-box;transition:.5s}body:active{transition:0s;border-color:#ffffff3d}