.mario-map-wrapper { padding-top: 60px; padding-bottom: 10px; min-height: 100vh; position: relative; } .mario-map-title { font-family: 'Press Start 2P', cursive; font-size: 26px; color: #f1c40f; text-shadow: 4px 4px 0 #000; margin-bottom: 20px; } .text-red { color: #ff4757; } .mario-grid-item { margin-bottom: 30px; width: 100%; display: flex; justify-content: center; } .mario-node { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; transition: transform 0.1s steps(2); } .mario-box-q { position: relative; width: 110px; height: 110px; background-color: #ff9d3b; border: 4px solid #000; box-shadow: inset 6px 6px 0 #ffcd88, inset -6px -6px 0 #a05000, 8px 8px 0 rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; padding: 10px; margin-bottom: 20px; } .cat-icon-pixel { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } .mario-node-name { font-family: 'Press Start 2P', cursive; font-size: 9px; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 0 #000; width: 100%; } .mario-node:hover { transform: translateY(-10px); } .mario-node:hover .mario-box-q { background-color: #f1c40f; } .dot { position: absolute; width: 4px; height: 4px; background: #000; opacity: 0.3; } .tl { top: 8px; left: 8px; } .tr { top: 8px; right: 8px; } .bl { bottom: 8px; left: 8px; } .br { bottom: 8px; right: 8px; } @media (max-width: 768px) { .mario-box-q { width: 90px; height: 90px; } .mario-grid-item { margin-bottom: 20px; } .mario-map-wrapper { padding-bottom: 40px; } }