@import"https://fonts.googleapis.com/css2?family=Koulen&display=swap";body{font-family:Koulen,sans-serif;background-color:#fef6e4;margin:0;padding:0}h1{text-align:center;color:#001858;margin-top:20px;font-size:3rem}.flashcard-container{display:flex;flex-wrap:wrap;justify-content:center;margin-top:12.5rem;gap:20px;padding:20px}p{color:#172c66}.nav-title{position:fixed;top:1rem;left:7rem;font-size:2.5rem;font-weight:700;padding:.5rem 1rem;z-index:998}#add-button{position:fixed;top:2.5rem;right:7rem;z-index:998;background-color:#f582ae;padding:10px;border:black 4px solid;border-radius:10px;cursor:pointer}.flashcard-box{position:relative;width:200px;height:200px}.delete-btn{position:absolute;top:-10px;right:-10px;background:#ff6b6b;border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;box-shadow:0 2px 6px #00000040;transition:transform .2s,background .2s ease}.delete-btn:hover{background:#ff4a4a;transform:scale(1.1)}.delete-btn svg{pointer-events:none}.flashcard{height:200px;width:200px;transition:.3s;transform-style:preserve-3d;background-color:#f3d2c1;border:4px solid #001858;border-radius:20px;box-shadow:2px 2px 10px #0000004d;align-items:center;justify-content:center;position:relative}.flashcard-box:hover .flashcard{transform:rotateY(180deg)}.question{z-index:5;color:#000}.answer{transform:rotateY(180deg);color:#00f}.question,.answer{text-align:center;font-weight:700;position:absolute;backface-visibility:hidden;padding:20px;width:100%;height:100%}*,*:before,*:after{box-sizing:border-box}.modal-overlay{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0000002e;z-index:999}.close-btn{position:absolute;top:14px;right:14px;background:transparent;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .2s ease}.flashcard-form{display:flex;flex-direction:column;position:relative;width:560px;padding:36px;border-radius:20px;background:#fff;box-shadow:0 10px 30px #0000001f;align-items:stretch}.flashcard-form label{display:block;margin-bottom:8px;font-weight:700;font-size:18px;letter-spacing:.5px}.flashcard-form input{width:100%;padding:14px 16px;font-size:16px;margin-bottom:18px;border-radius:12px;border:2px solid rgba(0,0,0,.7);background:transparent;box-sizing:border-box;outline:none}.flashcard-form input::placeholder{opacity:.6}.flashcard-form button[type=submit]{width:100%;padding:16px;border:black 4px solid;border-radius:10px;cursor:pointer;font-family:Koulen,sans-serif;background-color:#f582ae;color:#172c66;font-size:18px}input{font-family:Koulen,sans-serif}