html{background-color:#f5f5f5;color:#111}*{box-sizing:border-box;margin:0}body{background:linear-gradient(0deg, #0984e3 0%, #0984e3 18%, white 80%);background-position:center;background-size:100% auto;min-height:100vh;font-family:roboto}.container{position:relative;top:3vh;margin:0 auto;max-width:800px;padding:20px auto;border:1px solid #e1e1e1;border-radius:5px;box-shadow:0 0 35px rgba(0,0,0,.5);overflow:hidden}.logo{z-index:1;position:absolute;left:10%;top:50%;transform:translate(-50%, -50%);font-size:40px;color:#fff;font-family:roboto}header{height:15vh;position:relative;background:linear-gradient(132deg, #ff4f2c, #591bc5, #4169e1);background-size:400% 400%;overflow:hidden;border:1px solid #5529ca;border-radius:5px 5px 0 0;animation:Gradient 15s ease infinite}.cube{position:absolute;top:80%;left:35%;width:5px;height:5px;border:solid 1px #d7d4e4;transform-origin:50% 50%;transform:scale(0) rotate(0deg);animation:cube 12s ease-in forwards infinite}.cube:nth-child(2n){border-color:#fff}.cube:nth-child(2){animation-delay:2s;left:10%;top:10%}.cube:nth-child(3){animation-delay:4s;left:60%;top:20%}.cube:nth-child(4){animation-delay:5s;left:80%;top:20%}.cube:nth-child(5){animation-delay:6s;left:95%;top:5%}.cube:nth-child(6){animation-delay:7s;left:10%;top:80%}.cube:nth-child(7){animation-delay:8s;left:50%;top:10%}.cube:nth-child(8){animation-delay:10s;left:40%;top:10%}@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes cube{from{transform:scale(0) rotate(0deg);opacity:1}to{transform:scale(10) rotate(960deg);opacity:0}}.board{width:100%;height:500px;display:flex;flex-direction:row;justify-content:space-around;align-items:center;background-color:#fff;flex-wrap:wrap;padding:5px 15px}.cards{background-image:url(1d0d5b3bbb315da3716e.png);background-size:100% 100%;flex-basis:15%;height:90px;border-radius:5px;cursor:pointer;transition:.5s}.card1{background-image:url(969f2e2c40ade3d6f003.png)}.card2{background-image:url(72f08f87cdffb7eb6a3e.png)}.card3{background-image:url(a705a2bc3f9ad2b93ebf.png)}.card4{background-image:url(e03298853d2f74e0aa6c.png)}.card5{background-image:url(22dc124469a3d9f3a3fa.png)}.card6{background-image:url(62867d7c3e6f562139db.png)}.card7{background-image:url(013e181e542c0ef5ae6a.png)}.card8{background-image:url(830935e714c2bb578214.png)}.card9{background-image:url(fa0accc1440b6a70e7b3.png)}.card10{background-image:url(fb63723a52428a57f74b.png)}.card11{background-image:url(4a61dabb1018a3bd62ad.png)}.card12{background-image:url(a40a3908b2fe8bed7d89.png)}.cards:hover{box-shadow:0 3px 7px 0 rgba(0,0,0,.5)}.board .match{visibility:hidden}.countmatches{padding:10px;color:#fff;font-size:18px;border-bottom:2px solid rgba(29,31,153,.3);background-color:#091b52}footer{background-color:#091b52;display:block;height:30px;color:#fff;text-align:center;line-height:30px}.container.blur{filter:blur(2px)}.modal-wrap{display:none}.modal-wrap.active{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.modal-wrap.active .modal{display:flex;flex-direction:column;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:40%;height:60%;border:2px solid #000}@media(max-width: 800px){.modal-wrap.active .modal{width:90%;height:90%}}.modal .top{flex-basis:15%;background-color:#591bc5}.modal .middle{flex-grow:1;background-color:#ddd}.modal .bottom{flex-basis:15%;background-color:#591bc5}.text{text-align:center;font-size:32px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.text button{position:relative;border:3px solid #000;overflow:hidden;transition:.15s .15s;background-color:transparent;font-size:32px;padding:10px 30px;margin:20px auto;cursor:pointer}button::before{content:"";position:absolute;width:120%;height:16px;background-color:#000;transform:translateY(-50%);top:50%;left:100%;transition:left .2s,height .1s .2s;z-index:-1}button:hover::before{left:0;height:102%}button:hover{color:#fff}@media screen and (max-width: 500px){.board{padding:20px 15px}.cards{flex-basis:21%;height:65px}.logo{left:20%}.container{top:0}}

/*# sourceMappingURL=main.css.map*/