.pagination-custom-wrap { padding: 10px 0; image-rendering: pixelated; display: flex; justify-content: center; background: transparent; } .pagination-custom-wrap .pagination { display: flex; gap: 5px !important; border: none; padding: 0; margin: 0; list-style: none; align-items: flex-end; } .pagination-custom-wrap .page-item { border: none; margin: 0 28px 10px 28px !important; position: relative; } .pagination-custom-wrap .page-link { position: relative; display: flex; align-items: center; justify-content: center; width: 45px; height: 35px; background-color: #2ecc71 !important; color: #fff !important; font-family: 'Press Start 2P', cursive; font-size: 12px; text-decoration: none; border: 4px solid #000 !important; border-bottom: none !important; border-radius: 20px 20px 0 0 !important; padding: 0; z-index: 5; transition: all 0.1s steps(2); box-shadow: inset -5px 4px 0 #27ae60; } .pagination-custom-wrap .page-link::before { content: ""; position: absolute; width: 28px; height: 22px; background-color: inherit; border: 4px solid #000; border-radius: 15px 15px 0 0; left: -22px; bottom: 0; z-index: -1; } .pagination-custom-wrap .page-link::after { content: ""; position: absolute; width: 28px; height: 18px; background-color: inherit; border: 4px solid #000; border-radius: 15px 15px 0 0; right: -20px; bottom: 0; z-index: -1; } .pagination-custom-wrap .page-item:not(.disabled):not(.active-custom) .page-link:hover { background-color: #55efc4 !important; transform: translateY(-5px); z-index: 10; } .pagination-custom-wrap .page-item.active-custom .page-link { background-color: #ff4757 !important; color: #fff !important; box-shadow: inset -5px 4px 0 #c0392b; z-index: 10; } @keyframes flowerBounce { from { transform: translateY(-12px); } to { transform: translateY(-16px); } } .pagination-custom-wrap .page-item.disabled .page-link { background-color: #95a5a6 !important; border-color: #333 !important; color: #666 !important; opacity: 0.5; cursor: not-allowed; } @media (max-width: 768px) { .pagination-custom-wrap .page-item { margin: 0 18px 10px 18px !important; } .pagination-custom-wrap .page-link { width: 35px; height: 28px; font-size: 10px; } }