@import"https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap";@import"https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap";*{font-family:"M PLUS Rounded 1c",sans-serif}body{margin:0;padding:0}.container{display:flex;flex-direction:column;max-width:100vw;min-height:100vh;box-sizing:border-box;justify-content:space-between;padding-bottom:50px}.card-container{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;justify-items:center;padding:0 8px;max-width:100vw;max-height:80vh;perspective:600px;opacity:1;box-sizing:border-box}.loading-container{height:200px;width:200px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:fade-in .25s ease-in-out forwards}.card-container.fade-out{animation:fade-out .25s ease-in-out forwards}.card-container.hidden{opacity:0;pointer-events:none}.sidebar{box-sizing:border-box;margin-bottom:10px;padding:10px;position:relative;opacity:0;animation:fade-in .25s ease-in-out forwards;display:flex;font-size:.9rem;justify-content:space-between;align-items:center;box-shadow:#091e4240 0 4px 8px -2px,#091e4214 0 0 0 1px}.sidebar p{line-height:0}button{width:125px;background-color:#fff;border:0;border-radius:.5rem;box-sizing:border-box;color:#111827;font-size:.875rem;font-weight:600;line-height:1.25rem;padding:.75rem 1rem;text-align:center;text-decoration:none;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;cursor:pointer}button:hover{background-color:#f9fafb}.modal{opacity:0;position:absolute;top:50%;left:50%;width:90vw;transform:translate(-50%,-50%);background-color:#fff;padding:2rem;border:1px solid grey;animation:fade-in .5s ease-in-out forwards;animation-delay:1.5s}.modal-overlay{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0003;animation:fade-in .5s ease-in-out forwards;animation-delay:1.5s}.modal-content{display:flex;flex-direction:column;align-items:center}.modal-exit,.modal-overlay-exit{animation:fade-out .25s ease-in-out forwards}@media (min-width: 500px){.container{justify-content:start}.card-container{width:80%;margin:auto}.sidebar{justify-content:space-around;font-size:1.5rem}.sidebar button{font-size:1.5rem;width:200px}}@media (min-width: 1000px){.container{flex-direction:row;height:100vh;overflow:hidden;align-items:center;justify-content:space-between}.card-container{grid-template-columns:repeat(6,1fr);gap:5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto}.sidebar{width:15%;height:50%;margin:50px;padding:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.25rem}.sidebar button{font-size:1.25rem;width:150px}.modal{width:400px}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.card{height:calc((80vh - (5 * 8px)) / 6);width:calc(height*.8);max-width:100px;aspect-ratio:4 / 5;box-sizing:border-box;font-family:Jost,sans-serif;font-size:.75rem;animation:fade-in .25s ease-in-out forwards;transition:transform .3s ease,box-shadow .3s ease;overflow:hidden;cursor:pointer;opacity:0}.card-inner{width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d;position:relative}.card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;overflow:hidden}.card-face.front{z-index:2}.card-face.back{background:#ffabab;transform:rotateY(180deg);font-size:3rem}@media (hover: hover) and (pointer: fine){.card:hover{transform:scale(1.05);z-index:10;box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}}.card img{max-width:100%;max-height:100%;object-fit:contain;will-change:transform;-webkit-user-select:none;user-select:none}.card.fade-out{animation:fade-out .25s ease-in-out forwards;pointer-events:none}@media (min-width: 1000px){.card{height:auto;width:100px;max-width:none;aspect-ratio:4 / 5}}