/* ==================== Global & Matrix Background ==================== */

body {
    margin: 0;
    overflow: hidden;
    background: black;
    color: green;
}

canvas {
    display: block;
}

/* ==================== Custom Font ==================== */

@font-face {
    font-family: "Ubuntu";
    src: url("./fonts/Ubuntu-Regular.ttf") format("truetype");
}

/* ==================== Terminal Container ==================== */

#terminal {
    /* include padding and border in the height calculation */
    box-sizing: border-box;

    /* top padding only so last line sits flush at the bottom */
    padding: 8px 16px 0 16px;

    /* 16 lines × 1.6em line-height + 8px top padding */
    height: calc(1.6em * 16 + 8px);

    /* allow vertical scrolling when content overflows */
    overflow-y: auto;

    /* text cursor on hover to indicate typing area */
    cursor: text;

    /* center on screen */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* size constraints */
    width: 50%;
    min-width: 480px;
    max-width: 100%;

    /* styling */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-family: "Ubuntu", monospace;
    font-size: 16px;
    line-height: 1.6;
    box-shadow: 0 0 10px green;
    border: 2px solid green;
}

/* ==================== Scrollbar Styling ==================== */

#terminal::-webkit-scrollbar {
    width: 8px;
}
#terminal::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.3);
    border-radius: 4px;
}
#terminal::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

/* ==================== Terminal Content Lines ==================== */

/* each line is exactly one row (1.6em) with no extra gap */
.terminal-line,
.input-line {
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 1.6em;
    line-height: 1.6;

    white-space: pre-wrap;  /* allow wrapping on whitespace */
    word-break: break-word;  /* break long words if needed */

    display: block;
}

/* ==================== Input Line & Prompt ==================== */

.input-line {
    display: flex;
    align-items: center;  /* vertically center prompt + input */
}

.prompt {
    color: #0F0;  /* same green as terminal text */
}

/* ==================== Input Field ==================== */

.input-line input {
    flex: 1;  /* take remaining horizontal space */
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ==================== Command & Output Styling ==================== */

.command {
    color: white;
    display: inline-block;
}

.output {
    color: white;
}

/* ==================== Link Styling ==================== */

a {
    color: white;
}

a:hover {
    color: lightgreen;
}