:root{--text-color:#333}body{background:#fff;padding:0;margin:0}.app{text-align:center;font-family:Arial,Helvetica,sans-serif;position:relative;color:var(--text-color)}section{padding:1em}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5em,1fr));gap:1em;background-color:#f1f1f1;padding:2em 1em;box-shadow:inset 0 0 10px rgba(0,0,0,.1)}@media screen and (min-width:32em){.grid{grid-template-columns:repeat(auto-fill,minmax(8em,1fr))}}@media screen and (min-width:64em){.grid{grid-template-columns:repeat(auto-fill,minmax(12em,1fr))}}@media screen and (min-width:96em){.grid{grid-template-columns:repeat(auto-fill,minmax(15em,1fr))}}.image-card{position:relative;width:100%;padding-top:100%;background:#fff;overflow:hidden;box-shadow:0 0 3px rgba(0,0,0,.1);cursor:pointer;transition:.3s ease;z-index:1}.image-card.selected{box-shadow:5px 5px 1px rgba(0,0,0,.25),0 0 15px rgba(0,0,0,.1);transform:scale(105%);z-index:10}.image-card.matched{opacity:.15;pointer-events:none}@media screen and (max-width:840px){.image-card.matched{display:none}}.image-card.wrong{animation:shake .5s ease}@keyframes shake{0%{transform:rotate(0deg) scale(105%)}20%{transform:rotate(-4deg) scale(105%)}40%{transform:rotate(4deg) scale(105%)}60%{transform:rotate(-2deg) scale(105%)}80%{transform:rotate(2deg) scale(105%)}to{transform:rotate(0deg) scale(105%)}}.image-card img{position:absolute;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;box-sizing:border-box}.image-card img,div.finish{top:50%;left:50%;transform:translate(-50%,-50%)}div.finish{position:fixed;z-index:100;background:#fff;padding:1em;box-shadow:0 0 10px rgba(0,0,0,.5);border-radius:4px;font-size:2em}.footer,.header{padding:1rem}.footer,.header{margin:0 auto;font-size:.8em}.footer{max-width:45em}ul.team{padding-left:0}ul.team li{text-decoration:none;display:inline-block;margin-right:1em}ul.team li:before{content:"📷";margin:0 .25em 0 0;transform:translateY(-.1em);display:inline-block}