:root {
    --c64-light-blue: #a5a5ff;
    --c64-dark-blue: #352879;
    --c64-white: #ffffff;
}

body {
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Courier New', Courier, monospace; /* For that blocky feel */
    text-transform: uppercase;
}

.c64-border {
    background-color: var(--c64-light-blue);
    padding: 50px;
    border-radius: 5px;
}

.c64-screen {
    background-color: var(--c64-dark-blue);
    width: 600px;
    height: 400px;
    padding: 20px;
    color: var(--c64-light-blue);
    position: relative;
}

.c64-header {
    text-align: center;
    margin-bottom: 40px;
}

/* THE PIXEL NINJA */
.ninja-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.pixel-ninja {
    width: 10px;
    height: 10px;
    background: transparent;
    /* This creates a 10x10 grid "ninja" shape using box shadows */
    /* Syntax: x-offset y-offset color */
    box-shadow: 
        20px 0px #000, 30px 0px #000, 40px 0px #000, 
        20px 10px #000, 30px 10px #fff, 40px 10px #000, /* Eyes */
        10px 20px #000, 20px 20px #000, 30px 20px #000, 40px 20px #000, 50px 20px #000,
        20px 30px #000, 30px 30px #000, 40px 30px #000,
        20px 40px #000, 40px 40px #000; /* Feet */
}

.cursor {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}
.c64-error-bg {
    background-color: #352879; /* Dark Blue */
}

.error-screen {
    border: 10px solid #f00; /* Red border for danger! */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.retro-link {
    color: #a5a5ff;
    text-decoration: none;
    border: 2px solid #a5a5ff;
    padding: 10px;
}

.retro-link:hover {
    background: #a5a5ff;
    color: #352879;
}

/* The walking container */
.ninja-container {
    position: relative;
    width: 100px; /* Adjust based on your ninja size */
    animation: walk-patrol 8s infinite linear;
}

/* The actual Ninja drawing */
.pixel-ninja {
    animation: ninja-bounce 0.4s infinite alternate;
}

/* Move him left and right */
@keyframes walk-patrol {
    0%, 100% { left: 10%; transform: scaleX(1); }  /* Facing Right */
    45% { left: 80%; transform: scaleX(1); }      /* Reach right side */
    50% { left: 80%; transform: scaleX(-1); }     /* Flip to face Left */
    95% { left: 10%; transform: scaleX(-1); }     /* Reach left side */
}

/* The "Leg" bounce effect */
@keyframes ninja-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}