body {
 font-family: Arial, sans-serif;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 20px;
 background-color: #f0f0f0;
 margin: 0;
 min-height: 100vh;
}

.container {
 max-width: 600px;
 width: 100%;
 position: relative;
}

.card-counter {
 min-height: 30px;
 text-align: center;
 margin-bottom: 10px;
 font-size: 18px;
 color: #555;
}

.card-counter .total-count {
 display: inline-block;
 transition: transform 0.15s ease-out, color 0.15s ease-out;
}

.card-counter .total-count.emphasis {
 transform: scale(1.3);
 color: #007bff;
}

.flashcard {
 background-color: white;
 border-radius: 10px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 padding: 40px;
 min-height: 300px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 margin-bottom: 20px;
 user-select: none;
 transition: transform 0.1s;
 touch-action: pan-y pinch-zoom;
}

.flashcard:hover {
 transform: scale(1.02);
}

.flashcard:active {
 transform: scale(0.98);
}

.flashcard-content {
 font-size: 20px;
 line-height: 1.5;
 width: 100%;
 text-align: center;
 overflow-wrap: anywhere;
}

.flashcard-content img {
 max-width: 100%;
 max-height: 60vh;
}

.controls {
 display: grid;
 grid-template-columns: auto 1fr 1fr 1fr auto;
 gap: 10px;
 margin-bottom: 20px;
}

.secondary-controls {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 align-items: center;
 margin: 10px 100px;
}

.secondary-controls button {
 font-size: 16px;
 height: 72px;
 padding: 0 16px;
}

.remove-btn, .undo-btn {
 background-color: #dc3545;
}

.remove-btn:hover, .undo-btn:hover {
 background-color: #c82333;
}

.undo-btn:disabled {
 background-color: #cccccc;
 cursor: not-allowed;
}

button {
 padding: 12px 20px;
 font-size: 20px;
 border: none;
 border-radius: 5px;
 background-color: #007bff;
 color: white;
 cursor: pointer;
 transition: background-color 0.2s;
 touch-action: manipulation;
}

button:hover {
 background-color: #0056b3;
}

button:active {
 transform: scale(0.95);
}

button:disabled {
 background-color: #cccccc;
 cursor: not-allowed;
}


.flip-btn {
 background-color: #28a745;
}

.flip-btn:hover {
 background-color: #218838;
}

.sort-btn {
 background-color: #ffc107;
 color: #333;
}

.sort-btn:hover {
 background-color: #e0a800;
}

.nav-btn {
 background-color: #6c757d;
 width: 60px;
 padding: 12px 8px !important;
}

.nav-btn:hover {
 background-color: #5a6268;
}


.editor-link {
 text-align: center;
 margin-top: 15px;
 font-size: 12px;
}

.editor-link a {
 color: #007bff;
 text-decoration: none;
}

.editor-link a:hover {
 text-decoration: underline;
}

.instructions {
 text-align: center;
}

.head-div {
 font-weight: bold;
}

.table {
 width: 100%;
 text-align: left;
 border-spacing: 10px;
 border-collapse: collapse;
}

.table tr:nth-child(odd) {
 background-color: #e5f7fa;
}

.table tr:nth-child(even) {
 background-color: #fce8e7;
}

.row {
 padding: 10px 20px;
}

.burger {
 position: absolute;
 top: 0;
 right: 10px;
 width: 32px;
 height: 24px;
 cursor: pointer;
 z-index: 1001;
}

.burger span,
.burger span::before,
.burger span::after {
 content: "";
 position: absolute;
 left: 0;
 width: 100%;
 height: 4px;
 background: black;
 transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger span {
 top: 50%;
 transform: translateY(-50%);
}

.burger span::before {
 top: -10px;
}

.burger span::after {
 top: 10px;
}

#menu-toggle:checked + .burger span {
 background: transparent;
}

#menu-toggle:checked + .burger span::before {
 transform: rotate(45deg) translate(7px, 7px);
 background: white;
}

#menu-toggle:checked + .burger span::after {
 transform: rotate(-45deg) translate(7px, -7px);
 background: white;
}

#menu-toggle:checked + .burger + .overlay-menu {
 opacity: 1;
 pointer-events: auto;
}

.overlay-menu {
 position: absolute;
 top: -10px;
 bottom: 0;

 width: 100%;

 background: gray;

 display: flex;
 justify-content: center;
 align-items: flex-start;

 overflow-y: auto;

 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
 z-index: 1000;
}

.overlay-menu ul {
 list-style: none;
 text-align: center;
 padding: 0;
 margin: 0;
}

.overlay-menu li {
 margin: 1rem 0;
}

.overlay-menu a {
 color: white;
 text-decoration: none;
}

.flashcard-content {
}