*{box-sizing:border-box}body{font-family:sans-serif;padding:20px;overflow-x:hidden;background-color:#ffe5d9}h1,h3{text-align:center;color:#fe8160}.flashcards{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px}.flashcards div{border:1px solid #e7e7e7;background-color:#f7f7f7;border-radius:7px;aspect-ratio:2 / 1;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;cursor:pointer;background:linear-gradient(to right,#ff7e5f,#fe7b84);position:relative}div.selected{border:1px solid #1cabff;background:linear-gradient(to right,#fe562c,#fc3845ef);color:#fff;font-weight:700;transition:transform .3s ease-in-out;transform:translateY(-5px)}div.selected:hover{transform:translateY(-5px)}.deleteButton{padding:10px 20px;margin:10px;border:none;border-radius:5px;background-color:#fff;color:#000;font-size:12px;position:absolute;bottom:0;right:0;cursor:pointer;transition:background-color .3s ease-in-out,transform .3s ease-in-out}button:disabled{cursor:not-allowed;background-color:gray}.deleteButton:hover{background-color:red;color:#fff;font-weight:700}.updateButton{padding:10px 20px;margin:10px;border:none;border-radius:5px;background-color:#fff;color:#000;font-size:12px;position:absolute;bottom:0;right:5rem;cursor:pointer}.updateButton:hover{background-color:#686868;color:#fff;font-weight:700}.navigation-buttons button{padding:10px 20px;margin:10px;border:none;border-radius:5px;background-color:#feb179;color:#ff7f5f;font-weight:700;font-size:16px;cursor:pointer;transition:background-color .3s ease-in-out,transform .3s ease-in-out}.navigation-buttons button:disabled{background-color:#fff;cursor:not-allowed}.navigation-buttons button:not(:disabled){background:#fe8160;color:#fff}.navigation-buttons button:hover:not(:disabled){transform:translateY(-3px);background:#fe8160;color:#fff}.navigation-buttons{display:flex;justify-content:space-between;width:100%;padding:0 20px;margin-top:30px;box-sizing:border-box}.addNewCardButton{padding:10px 20px;margin:10px;border:none;border-radius:5px;background-color:#fe8160;color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s ease-in-out,transform .3s ease-in-out}.addNewCardButton:hover{transform:translateY(-3px)}.input{padding:10px;margin:10px;border:1px solid #ccc;border-radius:5px;font-size:14px}input{margin-top:4px;border-radius:2px;padding:2px 6px;border:none;margin:none;padding:none;outline:1px solid #dedede;font-size:14px;width:100%}.add-new-card{display:flex;align-items:center;margin-top:20px}.add-new-card input{width:200px}.add-new-card button{padding:10px 20px;margin-left:10px;border:none;border-radius:5px;background-color:#fe8160;color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s ease-in-out,transform .3s ease-in-out}.add-new-card button:hover{transform:translateY(-3px)}@media (max-width: 768px){body{font-family:sans-serif;overflow:auto}.flashcards{display:flex;flex-direction:column}.flashcards div{text-align:start;align-items:flex-start;justify-content:flex-start}.navigation-buttons{flex-direction:column;align-items:center}.navigation-buttons button{width:80%;margin:10px 0}.add-new-card{display:flex;flex-direction:column}.add-new-card input{width:100%}.add-new-card button{margin-bottom:5px}}.ownerName{color:#fe8160;text-align:end;position:relative;right:20px;font-size:14px}.editingCard{display:flex;flex-direction:column;border:none!important}
