@view-transition{navigation:auto}:root{--color-primary: #545454;--color-disabled: #e0e0e0;--color-checked: #7c2da4;--color-white: #ffffff;--color-black: #000000;--color-progressbar: #7c2da4}*,*:before,*:after{box-sizing:border-box}*{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}body{-webkit-font-smoothing:antialiased;line-height:1.5}.lottery{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;h1,h2{text-align:center}.grid{display:grid;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(7,1fr);gap:10px;width:100%}button{transition:transform .3s ease-in-out;cursor:pointer;border:none;border-radius:10px;font-size:1rem;&:hover{transform:scale(1.1)}&:not(:hover){transform:scale(1)}}.box{background-color:var(--color-primary);padding:8px;width:100%;height:100%;color:var(--color-white);&:disabled{animation:fadeOut .5s ease-in-out;cursor:not-allowed;background-color:var(--color-disabled);color:var(--color-black)}&.checked{background-color:var(--color-checked)}&.last{animation:fadeOut .5s ease-in-out}&.checked.last{animation:fadeIn .5s ease-in-out}}button[value=submit]{opacity:1;animation:blendIn .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}}.progressbar{margin:12px 0;border-radius:4px;background-color:#eee;width:100%;height:20px;overflow:hidden;&:before{display:block;animation:progressbar .4s forwards;background:var(--color-progressbar);height:100%;content:""}}@keyframes fadeIn{0%{background-color:var(--color-primary)}}@keyframes fadeOut{0%{background-color:var(--color-checked)}}@keyframes blendIn{0%{opacity:0}to{opacity:1}}@keyframes progressbar{0%{width:calc((var(--previousValue) / var(--maxValue)) * 100%)}to{width:calc((var(--currentValue) / var(--maxValue)) * 100%)}}
/*# sourceMappingURL=index.css.map */