.color-background{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;padding:1rem;min-height:100vh;background-color:#daa520;transition:all .25s}.game{max-width:400px;padding:15px 15px 10px;margin:0 auto;border-radius:.5rem;box-shadow:0 0 10px 15px rgba(126,75,75,.05);background-color:#fff}@media only screen and (min-width:768px){.game{padding:30px 50px}}.game__title{font-weight:700;text-align:center;text-transform:uppercase;color:#7b68ee!important}.game__timer{margin-top:.5rem;text-align:center;font-size:1.5rem;color:#000}.game__timer>.timer{margin-left:3px;font-size:1.5rem}.game__button-wrapper{text-align:center;margin:.5rem 1rem}.game__reset{padding:.5rem}.game__button,.game__reset{margin:0 auto;border:1px solid #daa520;border-radius:.25rem;color:#fff;background-color:#daa520;outline:none;transition:all .25s;cursor:pointer}.game__button{padding:.5rem 2.5rem}.game__button:hover{opacity:.9}.game__button:active{opacity:.7}.color-list{display:flex;flex-flow:row wrap;width:300px;margin:0 auto}.color-list>li{position:relative;width:65px;height:65px;border-radius:4px;margin:5px;overflow:hidden;background-color:#ccc;transition:all .25s ease 0s;cursor:pointer}.color-list>li .overlay{content:"";position:absolute;left:0;bottom:0;right:0;height:100%;max-height:0;transition:all .25s;background-color:#000}.color-list>li.active .overlay{max-height:100%}.color-list>li:hover{background-color:#ddd}.color-item img{width:100%;height:100%;object-fit:cover}.color-item__cover{width:65px;height:65px;background-color:#ccc}.matched{background-size:cover;opacity:.5}.color-list>li.flipping-start{animation:flipStart .5s forwards}.timer-danger{color:red}@keyframes flipStart{0%{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}.color-list>li.flipping{animation:flipBack .5s forwards}@keyframes flipBack{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}footer{margin-top:1rem;color:hsla(0,0%,100%,.75);font-size:14px}