.mario-main-header { text-align: center; margin-bottom: 40px; } .mario-header-text { display: inline-block; background: #EA0404; color: #fff; padding: 15px 40px; font-family: 'Press Start 2P', cursive; font-size: 24px; text-transform: uppercase; border: 5px solid #000; box-shadow: 8px 8px 0 #000; text-shadow: 3px 3px 0 #000; } .mario-pixel-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .mario-grid-cell { flex: 0 0 calc(16.66% - 20px); } .mario-brick-link { display: block; position: relative; background: #ff9d3b; color: #000; text-decoration: none !important; padding: 15px 10px; font-family: 'Press Start 2P', cursive; font-size: 10px; text-align: center; text-transform: uppercase; border: 4px solid #000; box-shadow: inset 4px 4px 0 #ffcd88, inset -4px -4px 0 #a05000, 6px 6px 0 #000; transition: all 0.1s steps(2); height: 100%; display: flex; align-items: center; justify-content: center; min-height: 60px; } .mario-brick-link:hover { background: #fff; color: #000; transform: translateY(-5px); box-shadow: inset 4px 4px 0 #ddd, inset -4px -4px 0 #888, 0 10px 0 rgba(0,0,0,0.2); } .mario-brick-content { line-height: 1.4; z-index: 5; } .p-dot { position: absolute; width: 4px; height: 4px; background: #000; opacity: 0.3; } .tl { top: 6px; left: 6px; } .tr { top: 6px; right: 6px; } .bl { bottom: 6px; left: 6px; } .br { bottom: 6px; right: 6px; } @media (max-width: 1200px) { .mario-grid-cell { flex: 0 0 calc(25% - 20px); } } @media (max-width: 768px) { .mario-grid-cell { flex: 0 0 calc(50% - 20px); } } .mario-pagination-box { margin-top: 50px; display: flex; justify-content: center; } .pagination-custom-wrap { padding: 50px 0; image-rendering: pixelated; } .pagination-custom-wrap .pagination { display: flex; gap: 10px !important; list-style: none; padding: 0; margin: 0; justify-content: center; align-items: flex-end; flex-wrap: wrap; } .pagination-custom-wrap .page-item { border: none; margin: 0 30px 20px 30px; position: relative; } .pagination-custom-wrap .page-link { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; 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: 30px 30px 0 0 !important; padding: 0; z-index: 5; transition: all 0.1s steps(2); box-shadow: inset -6px 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: 20px 20px 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(.active-custom) .page-link:hover { transform: translateY(-3px) scale(1.05); background-color: #55efc4 !important; z-index: 10; } .pagination-custom-wrap .page-item.active-custom .page-link { background-color: #EA0404 !important; box-shadow: inset -6px 4px 0 #c0392b, 0 8px 0 rgba(0, 0, 0, 0); z-index: 10; } @media (max-width: 768px) { .pagination-custom-wrap .page-item { margin: 0 15px 15px 15px; } .pagination-custom-wrap .page-link { width: 40px; height: 30px; font-size: 10px; } .pagination-custom-wrap .page-link::before { width: 20px; height: 18px; left: -14px; } .pagination-custom-wrap .page-link::after { width: 20px; height: 15px; right: -14px; } }