#play{background:var(--primary-color);width:100vw;min-height:100vh;color:#fff}#play header{display:flex;justify-content:space-between;align-items:center;padding:1rem;height:10vh;width:100vw}#play header h1{font-size:2rem;font-weight:900}#play header span h1{font-size:1rem;text-align:center;color:hsla(0,0%,100%,.7);padding:.5rem;font-weight:600;border-radius:15px}#play header .back-another{color:hsla(0,0%,100%,.7);font-size:.8rem;text-decoration:none;font-weight:900}#play .grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:.5rem;padding:.3rem 1rem;max-height:75vh;overflow-y:scroll}#play .grid .item{margin:auto;background-color:#fff;width:100%;text-align:center;display:flex;font-size:2rem;align-items:center;justify-content:center;border-radius:15px;color:#fff;height:19vh;box-shadow:0 0 12px -5px rgba(0,0,0,.32);background-image:url(/img/illustrations/background-card.svg);background-position:50%;background-size:70%;background-repeat:no-repeat}#play .grid .item .contain{justify-content:center;font-weight:900;display:none;width:100%;overflow:hidden}#play .grid .item .contain img{max-width:30%}#play .grid .item.active{background-image:none;color:var(--primary-color)}#play .grid .item.active .contain{display:flex}#play .grid .item.complete{color:var(--purple)}#play footer{height:15vh;width:100vw;padding:.5rem;justify-content:space-between}#play footer,#play footer button{background:var(--primary-color);display:flex}#play footer button{padding:.5rem;color:#fff;border:none;border-radius:15px;font-weight:600;flex-direction:column;justify-content:center;align-items:center;padding:0 1.6rem;box-shadow:0 0 17px -8px #000;position:relative;overflow:hidden;cursor:pointer}#play footer button:first-child:before{background:linear-gradient(hsla(0,0%,100%,0) 59.33%,#fff 0,256.3deg)}#play footer button:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(256.3deg,#fff -53.21%,hsla(0,0%,100%,0) 59.33%)}#play footer button:nth-child(2){box-shadow:none}#play footer button:nth-child(2):before{display:none}#play footer button img{width:1.5rem;margin-bottom:.5rem}#play footer button.disabled{opacity:.4}#play footer button.left,#play footer button.next{background:var(--purple)}@media screen and (min-width:798px){#play{display:flex;justify-content:center;flex-direction:column;align-items:center}#play .grid,#play footer,#play header{width:50vw;max-width:500px}}