@import-normalize;:root{--text: #f66936;--card: #27374d;--orange: #ffa200;--bg: linear-gradient(to left, #fc5c7d, #6a82fb);--delay: .2s;--rotate-0: rotateY(0deg);--rotate-90: rotateY(90deg);--transition: all ease-in .2s;--radius: .75rem;--shadow: 1px 1px 13px #03030390;--card-width: 150px;--card-width-mobile: 20vw;--card-enter: enter .6s ease;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;font-size:1rem}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{height:100vh;width:100vw;padding:1rem;display:flex;overflow:auto;color:var(--text);background:var(--bg);align-items:flex-start;justify-content:center;font-family:var(--font-family)}header{width:100%;height:4rem;display:flex;padding:.5rem;align-items:center;background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);animation:var(--card-enter);justify-content:space-evenly}h3{margin:auto;color:var(--text)}h4{margin:auto;color:var(--orange)}button{border:none;outline:none;padding:.5rem;border-radius:3px;margin:auto}.grid{gap:1.25rem;display:grid;margin:3rem auto;grid-template-columns:repeat(4,auto)}.card{display:flex;position:relative;align-items:center;justify-content:center;background:transparent;width:var(--card-width);animation:var(--card-enter);border-radius:var(--radius)}.card img{width:100%}.card-face,.card-back{padding:1rem;background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);transition:var(--transition)}.card-face{position:absolute;transform:var(--rotate-90)}.card-back,.selected .card-face{transform:var(--rotate-0);transition-delay:var(--delay)}.selected .card-back{transform:var(--rotate-90);transition-delay:0s}@keyframes enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 720px){body{align-items:center}header{left:0;bottom:0;margin:auto;position:fixed;border-radius:0}.grid{margin:auto auto 3rem}.card{width:var(--card-width-mobile)}}