:root{--color-primary: #545454;--color-disabled: #e0e0e0;--color-checked: #7c2da4;--color-white: #ffffff;--color-black: #000000;--color-progressbar: #7c2da4}.i{display:flex;flex-direction:column;justify-content:center;align-items:center;h1,h2{text-align:center}button{transition:transform .3s ease-in-out;cursor:pointer;margin:0;border:none;border-radius:10px;padding:6px;font-size:1rem;&:hover{transform:scale(1.1)}&:not(:hover){transform:scale(1)}}button[value=submit]{opacity:1;animation:a .5s ease-in-out;margin-top:20px;border:none;background-color:var(--color-primary);padding:10px;color:var(--color-white);text-align:center}p{margin-top:1rem}}.n{display:grid;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(7,1fr);gap:10px;width:100%}.l{background-color:var(--color-primary);width:100%;height:100%;color:var(--color-white);&:disabled{animation:r .5s ease-in-out;cursor:not-allowed;background-color:var(--color-disabled);color:var(--color-black)}}.e{background-color:var(--color-checked)}.c{animation:r .5s ease-in-out}.e.c{animation:t .5s ease-in-out}.o{margin:12px 0;border-radius:4px;background-color:#eee;width:100%;height:20px;overflow:hidden;&:before{display:block;animation:o .4s forwards;background:var(--color-progressbar);height:100%;content:""}}@keyframes t{0%{background-color:var(--color-primary)}}@keyframes r{0%{background-color:var(--color-checked)}}@keyframes a{0%{opacity:0}to{opacity:1}}@keyframes o{0%{width:calc((var(--previousValue) / var(--maxValue)) * 100%)}to{width:calc((var(--currentValue) / var(--maxValue)) * 100%)}}