.flashcard-container{position:relative;max-width:500px;margin:20px auto;padding:20px;border:1px solid #ccc;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1);background-color:#f9f9f9;text-align:center}.flashcards-loading{font-size:18px;color:#333;margin-top:20px}.completion-check{position:absolute;top:10px;right:10px;font-size:24px;color:green}.flashcard-counter{background-color:#0077b6;color:#fff;padding:10px 15px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);display:inline-block;font-size:14px;margin:0 auto 20px}.flashcard-content{padding:20px;margin:20px auto;max-width:400px;width:400px;height:300px;display:flex;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.card-symbol{font-size:3rem;margin:0;color:#0077b6}.card-title{font-size:1.5rem;margin:0;color:#333}.button-group{display:flex;justify-content:center;align-items:center;margin-top:20px;gap:20px}.animate-check{animation:popIn .6s ease forwards}@keyframes popIn{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.3);opacity:1}to{transform:scale(1);opacity:1}}.flip-button,.next-button,.prev-button{min-width:80px}@media (max-width:768px){.flashcard-container,.flashcard-content{max-width:90%;padding:15px}.flashcard-content{width:90%;height:auto;margin:15px auto}.card-symbol{font-size:2rem}.card-title{font-size:1.2rem}.button-group{flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center}.button-group button{flex:1 1 auto;min-width:70px}}