:root{--red: #dc2626;--orange: #ea580c;--yellow: #eab308;--green: #16a34a;--cyan: #0d9488;--blue: #2563eb;--purple: #9333ea;--dark: #000000}*{margin:0;padding:0;box-sizing:border-box}html,body{font-size:16px;background-color:#f0f8ff;font-family:Recursive,monospace}body{background-color:#e5b87033;background-image:-webkit-linear-gradient(top,transparent 31px,#aaa 32px),-webkit-linear-gradient(left,transparent 31px,#aaa 32px);background-size:32px 32px}main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%}.container{position:relative}.container .item{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px #f8f3eb solid;cursor:pointer}.container .item:after{content:attr(data-color);text-transform:uppercase;font-weight:700;color:#fff}.container .item[data-color=r]{background-color:var(--red)}.container .item[data-color=o]{background-color:var(--orange)}.container .item[data-color=y]{background-color:var(--yellow)}.container .item[data-color=g]{background-color:var(--green)}.container .item[data-color=c]{background-color:var(--cyan)}.container .item[data-color=b]{background-color:var(--blue)}.container .item[data-color=p]{background-color:var(--purple)}.container .item[data-color=d]{background-color:var(--dark)}.box-container{width:17rem;height:17rem;overflow:hidden}.box-container:before{content:"";position:absolute;top:calc(var(--top) * 4.25rem + .125rem);left:.125rem;display:none;width:17rem;height:4.25rem;background-color:#00000080;transform:translate(-.125rem,-.125rem);border-radius:2rem;transition:top .3s ease-in-out;z-index:0}.box-container:after{content:"";position:absolute;top:.125rem;left:calc(var(--left) * 4.25rem + .125rem);display:none;width:4.25rem;height:17rem;background-color:#00000080;transform:translate(-.125rem,-.125rem);border-radius:2rem;transition:left .3s ease-in-out;z-index:0}.box-container .item{width:4rem;height:4rem;z-index:1;transition:top .2s ease-in-out,left .2s ease-in-out}.box-container .item:after{font-size:1.6rem}.box-container .item.notransition{transition:none!important}.box-target-container{width:9rem;height:9rem;margin-top:1rem}.box-target-container .item{width:2.25rem;height:2.25rem}.box-target-container .item:after{font-size:.9rem}.handler{margin-top:1rem;display:flex;align-items:center}button.btn{width:8rem;padding:.5rem 1rem;margin-left:.5rem;color:#fff;font-size:.875rem;line-height:1.25rem;font-weight:700;background-color:#b80e35;outline:none;border:none;border-radius:.25rem;cursor:pointer}.timer{padding:.5rem 1rem;color:#b80e35;border-radius:.25rem;background-color:#b80e3580}.modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;background-color:#00000080}.modal .modal-wrapper{width:400px;background-color:#fff;border-radius:.5rem}.modal .modal-wrapper .modal-content,.modal .modal-wrapper .modal-footer{padding:1.5rem}.modal .modal-wrapper .modal-content+.modal-footer{padding-top:0}.modal .modal-wrapper .modal-footer{text-align:right}@media (min-width: 768px){.box-container:before{display:block}.box-container:after{display:block}}