@keyframes explosion{0%{top:100%}33%,to{top:-50%}}body{background-color:#2f4f4f;color:#fff;font-family:Arial,Helvetica,sans-serif}.optionsContainer{display:block;position:relative;padding-left:35px;margin-bottom:12px;font-size:22px}input[type=checkbox]{position:absolute;top:0;left:0;height:25px;width:25px;cursor:pointer}input[type=checkbox]:hover{background-color:#ccc}.checkmark:hover{cursor:pointer}.cardPackContainer{display:grid;grid-template-columns:repeat(5,1fr)}.cardPackSection{display:inline-block;text-align:center;cursor:pointer}.image{width:204px;height:328px}.amountOfCardsContainer{text-align:center;flex-direction:column;padding:20px;gap:10px;position:fixed;top:350px;left:50%;transform:translateX(-50%);z-index:999;font-size:50px;box-sizing:border-box}.amountOfCardsContainer,.amountOfCardsInputContainer{display:flex;justify-content:center}.amountOfCardsInputContainer button,.buttonLayout button{padding:5px 10px;font-size:18px;cursor:pointer;background-color:#fff;border:1px solid #d3d3d3}.amountOfCardsInputContainer button:hover,input[type=checkbox]{background-color:#eee}.amountOfCardsInputContainer button:disabled{background-color:#ddd;cursor:not-allowed}.amountOfCardsInputContainer input{width:60px;padding:5px;font-size:18px;text-align:center;border:1px solid #d3d3d3;background-color:#fff}.amountOfCardsInputContainer input:focus{outline:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.buttonLayout button:hover{background-color:#eee}.cardsContainer{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:75px}.card{width:100px;height:150px;perspective:1000px;cursor:pointer;margin:10px;position:relative}.card:hover{transform:scale(1.1)}.card>.back,.card>.front{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;border-radius:8px;transition:transform .6s}.card>.front{font-size:18px}.card>.back{font-size:20px}.card.flipped .front,.card>.back{transform:rotateY(180deg)}.card.flipped .back{transform:rotateY(0deg)}.overlay,.timerContainer{position:fixed;z-index:1000}.timerContainer{top:10px;left:50%;transform:translateX(-50%);font-size:24px;background-color:rgba(0,0,0,.5);color:#fff;padding:10px;border-radius:5px}.overlay{top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center}.overlay-content{background:#2f4f4f;padding:2rem;text-align:center;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.5)}.overlay-button{margin-top:1rem;padding:.5rem 1rem;background:#2f4f4f;border:3px solid gray;color:#fff;border-radius:5px;cursor:pointer;font-size:1rem}.overlay-button:hover{opacity:70%}.explosion,.firework{position:absolute}.explosion{left:-2px;bottom:0;width:4px;height:80px;transform-origin:50% 100%;overflow:hidden}.explosion:nth-child(1){transform:rotate(0deg) translateY(-15px)}.explosion:nth-child(2){transform:rotate(30deg) translateY(-15px)}.explosion:nth-child(3){transform:rotate(60deg) translateY(-15px)}.explosion:nth-child(4){transform:rotate(90deg) translateY(-15px)}.explosion:nth-child(5){transform:rotate(120deg) translateY(-15px)}.explosion:nth-child(6){transform:rotate(150deg) translateY(-15px)}.explosion:nth-child(7){transform:rotate(180deg) translateY(-15px)}.explosion:nth-child(8){transform:rotate(210deg) translateY(-15px)}.explosion:nth-child(9){transform:rotate(240deg) translateY(-15px)}.explosion:nth-child(10){transform:rotate(270deg) translateY(-15px)}.explosion:nth-child(11){transform:rotate(300deg) translateY(-15px)}.explosion:nth-child(12){transform:rotate(330deg) translateY(-15px)}.explosion::before{content:"";position:absolute;left:0;right:0;top:100%;height:40px;background-color:#f5cf52}#firework1{left:50%;top:50%;transform:scale(1)}#firework2{left:40%;top:45%;transform:scale(.7)}#firework3{left:60%;top:65%;transform:scale(.4)}#firework1 .explosion::before{animation:explosion 3s ease-in-out infinite}#firework2 .explosion::before{animation:explosion 3s .5s ease-in-out infinite}#firework3 .explosion::before{animation:explosion 3s .7s ease-in-out infinite}.hidden{display:none}@media (max-width:1200px){.cardPackContainer{grid-template-columns:repeat(2,1fr)}.amountOfCardsContainer{font-size:40px}.cardsContainer{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width:900px){.cardPackContainer{grid-template-columns:1,1fr}.amountOfCardsContainer{font-size:35px}.cardsContainer{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}@media (max-width:600px){.cardPackContainer{grid-template-columns:1fr}.amountOfCardsContainer{font-size:30px;top:250px}.cardsContainer{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.card{width:90px;height:130px}}@media (max-width:400px){.amountOfCardsContainer{font-size:25px;top:200px}.cardsContainer{grid-template-columns:repeat(3,1fr)}.card{width:80px;height:120px}}