*{margin:0;padding:0;color:#2c3e50;font-family:Avenir,Helvetica,Arial,sans-serif;font-size:14px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{display:flex;border:none;outline:none;cursor:pointer;place-content:center}img{width:100%;height:auto}.container{display:flex;flex-direction:column;max-width:1400px;height:100vh;margin:0 auto;place-content:center}.container .game-container{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-self:center;height:500px;padding:10px 20px;border-radius:20px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.5)}.container .game-container .icon-close{position:absolute;top:15px;right:15px;width:17px;cursor:pointer;filter:brightness(80%)}.container .game-container .icon-close:hover{transition:all .5s ease;transform:scale(1.5)}.container .game-container .header-container{display:flex;flex-direction:column;align-content:center}.container .game-container .header-container .header{max-width:60%;padding:10px;font-size:20px;font-weight:bolder;place-self:center}.container .game-container .main{display:flex;justify-content:center;min-height:300px}.container .game-container .main .trash{position:relative;display:flex;justify-content:center;align-items:center}.container .game-container .main .trash .trash-items{position:absolute;display:flex;align-content:center;justify-content:center}.container .game-container .main .trash .trash-items .text{font-size:24px;font-weight:bolder;background:transparent}.container .game-container .main .trash .trash-items .img{position:absolute;width:50px;height:50px;padding:10px;display:flex;border-radius:50%}.container .game-container .main .trash .trash-items .img.right{align-self:center;background:#00cd71}.container .game-container .main .trash .trash-items .img.wrong{align-self:center;background:#f65a58}.container .game-container .main .trash .btn-start{position:absolute;color:#fff;font-size:42px;font-weight:bolder;background:transparent;cursor:pointer}.container .game-container .main .trash .btn-start:hover{transform:scale(1.1)}.container .game-container .main .trash .timer-svg{max-width:300px;fill:#aa5ce1}.container .game-container .main .counter{display:flex;justify-content:space-between;align-items:center;width:60px;padding:7px 14px;border-radius:25px;place-self:center}.container .game-container .main .counter img{width:20px;height:20px}.container .game-container .main .counter span{color:#fff;font-size:24px;font-weight:bolder}.container .game-container .main .counter.right{background:#add171}.container .game-container .main .counter.wrong{background:#e3218b}.container .game-container .restart{display:flex;justify-content:space-between;align-self:center;width:130px;margin:0 auto;padding:5px 15px;background:#aa5ce1;border-radius:25px}.container .game-container .restart span{color:#fff;font-size:24px;font-weight:bolder}.container .game-container .restart img{align-self:center;width:20px}.container .game-container .boxes{display:flex;justify-content:center}.container .game-container .boxes .box-item{position:relative;display:flex;flex-direction:column;align-items:center;width:120px;margin:0 5px;cursor:pointer}.container .game-container .boxes .box-item .box{z-index:5}.container .game-container .boxes .box-item:hover .box-cap{display:block;transition:all .3s ease;transform:translateY(0)}.container .game-container .boxes .box-item:hover .box-cap.yellow{z-index:1}.container .game-container .boxes .box-item:hover .box-cap.green{z-index:2}.container .game-container .boxes .box-item:hover .box-cap.blue{z-index:3}.container .game-container .boxes .box-item:hover .box-cap.orange{z-index:4}.container .game-container .boxes .box-item span{position:relative;margin-bottom:10px;padding:5px 12px;color:#fff;border-radius:25px}.container .game-container .boxes .box-item span.yellow{background:#f7a600}.container .game-container .boxes .box-item span.green{background:#68bb00}.container .game-container .boxes .box-item span.blue{background:#0059ed}.container .game-container .boxes .box-item span.orange{background:#f81d0f}.container .game-container .boxes .box-item .box-cap{position:absolute;width:90px;margin-top:-20px;transform:translateY(60px)}.container .btn-play{min-width:80px;min-height:50px;border-radius:5px;box-shadow:0 2px 12px rgba(0,0,0,.25);place-self:center}.container .btn-play:hover{transition:all .5s ease;transform:scale(1.05);box-shadow:0 2px 12px rgba(0,0,0,.35)}.container .btn-play:hover svg{transition:all 1s ease;fill:#888}.container .btn-play svg{width:20px;height:100%;fill:#696969}.fade-enter-active{transition:all 1.5s ease;transform:scale(1)}.fade-enter-from,.fade-leave-to{transform:scale(.8);opacity:0}@media(max-width:640px){.container .game-container{height:100%;overflow:auto;box-shadow:none}.container .game-container .main{display:grid;grid-template-areas:"A C" "B B ";justify-content:center}.container .game-container .main .trash{grid-area:B;margin-bottom:30px}.container .game-container .main .counter.right,.container .game-container .main .counter.wrong{grid-area:auto}.container .game-container .boxes{display:flex;justify-content:center;margin-right:25px}.container .game-container .boxes .box-item{position:relative;width:100px;margin-right:-25px}.container .game-container .boxes .box-item:hover .box-cap{transform:translateY(12px)}.container .game-container .boxes .box-item span{margin-bottom:30px;transform:rotate(-45deg)}.container .game-container .boxes .box-item .box-cap{width:80px;margin-top:5px;transform:translateY(60px)}.container .game-container .boxes .box-item .box{margin-top:10px}.container .game-container .boxes .box-item .box.yellow{z-index:100}.container .game-container .boxes .box-item .box.green{z-index:90}.container .game-container .boxes .box-item .box.blue{z-index:80}.container .game-container .boxes .box-item .box.orange{z-index:70}}