body{background-color:#fff;margin:0}.container{max-width:900px;margin:1rem auto;align-items:center}.header{flex-wrap:wrap;background-image:linear-gradient(120deg,#89f7fe 0%,#66a6ff 100%);padding:1rem}.form-group{width:30%;display:flex;flex-direction:column;margin:.5rem auto;justify-content:center;align-items:center}.form-group>label{color:#222;font-size:.75rem;font-weight:700;font-family:Verdana,Geneva,Tahoma,sans-serif;margin-bottom:.25rem}.form-group>input,select{outline:none;border:none;border-radius:.5rem;padding:.25rem;text-align:center}.btn{background-color:#fff;color:#111;font-family:sans-serif;font-weight:700;letter-spacing:1px;padding:.25rem 1.5rem;border:none;border-radius:.5rem;margin-top:.75rem;cursor:pointer}.btn:hover{background-color:#7bfa6f}.card-grid{display:flex;flex-wrap:wrap}.card{display:flex;justify-content:center;align-items:center;position:relative;border-radius:1rem;box-shadow:5px 8px 10px 1px #00000026;background-color:#fff;width:250px;margin:1rem;transform:perspective(300px) rotateY(var(--rotate-y, 0)) translateY(var(--translate-y, 0));transform-style:preserve-3d;transition:.25s;cursor:pointer}.card:hover{--translate-y: -2px;box-shadow:-5px 8px 10px 1px #0000004d}.card.flip{--rotate-y: 180deg}.card .front{left:0}.card .front,.card .back{position:absolute;padding:1rem;backface-visibility:hidden}.card .back{transform:rotateY(180deg);color:green}.flashcard-options{margin-top:.5rem}.flashcard-option{margin-top:.25rem;color:#555;font-size:.75rem}.flashcard-option:first-child{margin-top:0}