:root{--red: rgb(206, 75, 75);--purple: rgb(167, 59, 167);--blue: rgb(79, 79, 185);--bg-pink: rgb(250, 139, 255);--bg-yellow: rgb(236, 255, 127);--bg-blue: rgb(139, 209, 255);--bg-cyan: rgb(43, 210, 255);--mark: rgb(253, 239, 109);--black-transparent: rgba(0, 0, 0, .75);--black-more-transparent: rgba(0, 0, 0, .65)}@keyframes magnification{0%{transform:scale(.5)}80%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bganimation{0%{background-position:0 0}50%{background-position:50% 50%}to{background-position:0 0}}*{box-sizing:border-box;font-family:sans-serif;-webkit-user-select:none;user-select:none;color:#fff}body{height:100vh;display:flex;justify-content:center;text-align:center;align-items:center;overflow-y:hidden;margin:0;background:linear-gradient(135deg,var(--bg-pink),var(--bg-blue) 30%,var(--bg-yellow),var(--bg-cyan));background-size:400%;animation:bganimation 15s 0s infinite}.block{display:flex;justify-content:center;align-items:center;font-size:20px;border:0;padding:8px 12px;border-radius:6px;background:var(--black-transparent);margin-bottom:10px;-webkit-user-select:none;user-select:none}.buttons-block{display:flex;flex-direction:column}button:last-child{margin-bottom:0}button:hover,button:active{background:var(--black-more-transparent);cursor:pointer}::backdrop{background:var(--black-more-transparent)}.dialog{background:#141414f2;border:0;padding:16px 24px;border-radius:6px;margin-bottom:auto;min-width:300px;max-width:500px;max-height:500px}.dialog-wrapper{font-size:20px}.dialog-title{border-radius:6px;font-size:26px;margin:0}.dialog-text{padding:0 16px;text-align:center}.dialog-close{background:#313131;margin:auto}.dialog-wrapper button:hover,.dialog-wrapper button:active{background:#242424;cursor:pointer}@media screen and (max-width:680px){.block{font-size:18px;padding:8px}.buttons-block button{font-size:13px}.dialog-wrapper{font-size:18px}.dialog-title{font-size:22px}}.start-wrapper{display:flex;flex-direction:column;align-items:center;min-width:310px;animation:magnification .75s 0s;margin:0 20px}h1{font-size:72px;margin:0 0 30px;text-align:center}h1 img{width:70px;height:70px;margin:0 -8px -3px}input:invalid{outline:2px solid var(--red)}.actions-wrapper,.color-wrapper,.timer-wrapper,#start-button{display:flex;flex-direction:row;justify-content:space-between;width:100%}#actions-input,#timer-input{width:20%}#color-input{margin:0;width:20px;height:20px}.actions-field,.color-field,.timer-field{justify-content:space-between;width:100%;margin-right:10px}.color-field{margin-right:0}#start-button{justify-content:center}@media screen and (max-width:680px){h1{font-size:54px;margin:0 0 15px}h1 img{width:60px;height:60px;margin:0 -6px -3px}.block{margin-bottom:5px}.actions-field,.timer-field{margin-right:5px}#actions-input,#timer-input{width:25%}}.wrapper{display:block;animation:magnification .75s 0s;min-width:300px;margin:0 20px;text-align:center}.info-wrapper{display:flex}.info-wrapper>div{font-size:20px;margin-right:10px}#timer,#tries{width:100%}#code{margin-right:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:0px 0px;grid-auto-flow:row;grid-template-areas:". . . ." ". . . ."}.panel{display:flex;flex-wrap:wrap;width:600px;margin-bottom:15px}.cell{display:flex;justify-content:center;align-items:center;color:#000;font-size:40px;width:150px;height:150px;border:1px solid var(--black-transparent);background:linear-gradient(45deg,#e07a1e,#e4c183);border-radius:1px}.bottom-wrapper{display:flex;justify-content:space-between}@media screen and (max-width:680px){.panel{width:300px}.cell{font-size:30px;width:75px;height:75px}.info-wrapper>div{margin-right:5px;font-size:12px}#code{margin-right:0}}.end-wrapper{animation:magnification .75s 0s;min-width:310px;display:flex;justify-content:center}#reset{font-size:42px;margin:0;padding:8px}#result{font-size:42px;margin:0 10px 0 0}@media screen and (max-width:680px){#result,#reset{font-size:32px}}