@import-normalize;*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}body{height:100vh;width:100vw;padding:32px;overflow:hidden;display:flex;color:var(--text);background:var(--bg);align-items:center;justify-content:center;font-family:var(--font-family)}.grid{gap:20px;display:grid;grid-template-columns:repeat(4,auto)}@media screen and (max-width: 720px){body{align-items:center;height:auto;overflow-y:auto}.grid{margin-top:120px;grid-template-columns:repeat(2,auto);gap:8px}}canvas{z-index:10!important}.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:16px;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){.card{width:var(--card-width-mobile)}}.popup{position:fixed;top:50%;left:50%;width:50%;height:auto;max-width:630px;min-width:300px;z-index:2;visibility:hidden;transform:translate(-50%) translateY(-50%);box-shadow:0 20px 60px #d4d4d480;background-color:#fff;padding:60px 20px;border-radius:12px;display:flex;flex-direction:column;align-items:center}.popup.show{visibility:visible}.popup h1{color:#202426;margin-bottom:20px}.popup h2{color:#202426;margin-bottom:28px;font-size:40px}.popup a{background-color:#3498db;color:#fff;padding:20px;border-radius:8px;font-size:20px;transition:all .3s linear}.popup a:hover{cursor:pointer;background-color:#258cd0;transform:translateY(4px)}.popup-overlay{position:fixed;z-index:1;width:100%;height:100%;top:0;left:0;background:rgba(255,255,255,.5);transition:all 1s;opacity:0;visibility:hidden}.popup.show~.popup-overlay{opacity:1;visibility:visible;backdrop-filter:blur(4px)}.popup .new-record{background:#15bb94;color:#fff;font-size:16px;padding:12px;border-radius:40px;margin-bottom:12px;font-weight:400}:root{--text: #202426;--card: #202426;--bg: #eeeeee;--delay: .2s;--rotate-0: rotateY(0deg);--rotate-90: rotateY(90deg);--transition: all ease-in .2s;--radius: 12px;--shadow: 0px 4px 16px #44444460;--card-width: 160px;--card-width-mobile: 120px;--card-enter: enter .6s ease;--card-enter-2: enter-2 .6s ease;--font-family: "Plus Jakarta Sans", sans-serif}header{width:220px;padding:16px;display:flex;align-items:center;flex-direction:column;background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);animation:var(--card-enter-2);margin-bottom:32px;position:fixed;top:40px;left:20px}h4{margin:auto;color:#fff;font-size:20px}@keyframes enter-2{0%{opacity:0;transform:translate(-50%,-40px)}to{opacity:1;transform:translate(-50%)}}.sidebar{position:fixed;top:0;right:0;height:100%;z-index:500;background:white;transition:transform .5s,visibility 0s;transform:translate(100%);padding:32px;overflow:hidden;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}@media (min-width: 992px){.sidebar{width:720px}}.sidebar.show{transform:translate(0);box-shadow:-12px 0 64px #84848433}.sidebar.show~.sidebar-overlay{backdrop-filter:blur(4px);opacity:1;visibility:visible}.sidebar-overlay{position:fixed;z-index:400;width:100%;height:100%;top:0;left:0;background:rgba(255,255,255,.5);backdrop-filter:blur(0px);opacity:0;visibility:hidden}.sidebar h2:nth-of-type(1){margin-bottom:24px}.burger{width:80px;height:80px;cursor:pointer;position:relative;position:fixed;top:56px;right:20px;z-index:600}.burger .trigger{width:64px;height:20px}.burger .trigger span{position:relative;width:100%;height:4px;transform:translateY(8px);display:block;background-color:#fff0;border-radius:8px}.burger .trigger span:before,.burger .trigger span:after{position:absolute;content:"";width:100%;height:8px;background-color:#202426;display:block;border-radius:8px}.burger .trigger span:before{transform:translateY(-8px);animation:downAndTurnReverse .5s linear both}.burger .trigger span:after{transform:translateY(8px);animation:upAndTurnReverse .5s linear both}.burger .trigger.active span:before{animation:downAndTurn .5s linear both}.burger .trigger.active span:after{animation:upAndTurn .5s linear both}@keyframes downAndTurn{0%{transform:translateY(-8px) rotate(0)}50%{transform:translateY(0) rotate(0)}to{transform:translateY(0) rotate(45deg)}}@keyframes downAndTurnReverse{0%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(0) rotate(0)}to{transform:translateY(-8px) rotate(0)}}@keyframes upAndTurn{0%{transform:translateY(8px) rotate(0)}50%{transform:translateY(0) rotate(0)}to{transform:translateY(0) rotate(-45deg)}}@keyframes upAndTurnReverse{0%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(0) rotate(0)}to{transform:translateY(8px) rotate(0)}}.bubble{position:absolute;padding:8px;text-align:center;bottom:0}.bubble button{padding:12px 24px;border:none;outline:none;border-radius:12px;font-size:16px;color:#202426;transition:all .3s linear;background-color:#ddd;user-select:none}.bubble button.small{padding:6px 12px;border:none;outline:none;border-radius:6px;font-size:14px;color:#202426;transition:all .3s linear;background-color:#ddd}.bubble button.small:nth-of-type(1){margin-right:16px}.bubble button.small:nth-of-type(2){background-color:#e74c3c;color:#fff}.bubble button:hover{cursor:pointer;transform:translateY(4px)}.bubble button.primary:hover{background-color:#d3d3d3}.bubble .callout{width:160px;padding:20px;border-radius:12px;background:rgb(211,211,211);position:absolute;top:-128px;left:10px;margin-bottom:12px;transition:all .3s ease-out;opacity:0;visibility:hidden;transform:translateY(16px)}.bubble .callout:after{content:"";border:20px solid transparent;position:absolute;border-top-color:#d3d3d3;border-bottom:0;bottom:-20px;left:50%;margin-left:-20px}.bubble .callout.active{opacity:1;visibility:visible;transform:translateY(0)}.bubble .callout p{font-size:18px;margin-bottom:16px}