html, body {
    min-height: 100vh;
}

body {
    background: #e0e0e0;
    font-family: 'Press Start 2P', cursive;
    color: #000;
    margin: 0;
    padding: 20px;
    image-rendering: pixelated;
    box-sizing: border-box;
}

.container {
    max-width: 640px;
    margin: 0 auto;
    border: 4px solid #000;
    background: #e0e0e0;
    position: relative;
    box-shadow: 8px 8px 0 #00000033;
}

.screen {
    padding: 20px;
    border: 8px solid #000;
    margin: 4px;
    min-height: 480px;
}

.menu-item {
    padding: 8px;
    margin: 4px 0;
    border: 2px solid #000;
    cursor: pointer;
    transition: all 0.1s;
}

.menu-item:hover {
    background: #000;
    color: #fff;
}

/* Arrow key navigation styles */
.menu-item.selected {
    background: #000;
    color: #fff;
    position: relative;
}

.menu-item.selected::before {
    content: "►";
    position: absolute;
    left: -0.8em;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Make sure focus outline doesn't interfere with our custom selection */
.menu-item:focus {
    outline: none;
}

/* Add some hover effect for mouse users that doesn't interfere with selection */
.menu-item:hover:not(.selected) {
    background: #ccc;
}

.pixel-border {
    border: 4px solid #000;
    margin: 8px 0;
    padding: 8px;
}

.status-bar {
    background: #000;
    color: #fff;
    padding: 4px;
    margin: -8px -8px 8px -8px;
    font-size: 0.8em;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.terminal {
    background: #000;
    color: #fff;
    padding: 16px;
    margin: 16px 0;
    font-family: monospace;
}

.loading-bar {
    height: 4px;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: load 1s linear;
    display: none;
}

@keyframes load {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Add this to your main.css file */
.project-link {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-family: 'Press Start 2P', cursive;
    border: 2px solid #000;
}

.project-link:hover {
    background: #fff;
    color: #000;
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Pagination Styles */
.pagination-controls {
    margin-top: 16px;
    border: 4px solid #000;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pagination-text {
    text-align: center;
    font-size: 0.8em;
    padding: 4px;
    background: #000;
    color: #fff;
}

.pagination-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pagination-button {
    text-align: center;
    cursor: pointer;
    transition: all 0.1s;
    font-size: 0.9em;
}

.pagination-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
    color: #777;
}

.pagination-button.disabled:hover {
    background: #ccc;
    color: #777;
}

/* Make pagination buttons flash when active */
.pagination-button:not(.disabled) {
    animation: pixel-pulse 2s infinite;
}

@keyframes pixel-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.more-projects {
    text-align: center;
    background: #000;
    color: #fff;
    animation: more-blink 1.5s step-end infinite;
}

.more-text {
    font-weight: bold;
    font-size: 1.1em;
}

@keyframes more-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.menu-item.active-project {
  position: relative;
  overflow: hidden;
}

.menu-item.active-project::after {
  content: "ACTIVE";
  position: absolute;
  top: 8px;
  right: -18px;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 8px;
  padding: 2px 20px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px #000000;
  z-index: 1;
}

/* Optional pixel effect for the stamp */
.menu-item.active-project::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  z-index: 0;
}