/* ===================== GLOBAL ===================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inconsolata', monospace;
    font-size: 14px;
}

a {
    color: inherit;         /* use the surrounding text color */
    text-decoration: none;  /* remove underline */
}

html, body {
    height: 100%;
}

body {
    background: #454545;
}

/* ===================== TERMINAL LAYOUT ===================== */

#terminal {
    height: 100vh;
    overflow: hidden;
}

#scrollArea {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

#welcome {
    color: white;
    font-weight: bold;
    text-shadow: 0 0 5px #10a5b5,
                 0 0 10px #10a5b5,
                 0 0 20px #10a5b5;
}

/* ===================== CLICKABLE NAME ===================== */

#myName {
    color: #fff;
    transition: 0.2s ease;
    cursor: pointer;
}

#myName:hover {
    color: #10a5b5;
    text-shadow: 0 0 5px white,
                 0 0 10px white,
                 0 0 20px #10a5b5;
}

/* ===================== TERMINAL OUTPUT ===================== */

#output {
    margin-left: 0.5%;
    padding-left: 0.5%;
    color: #f0efe9;
    flex-grow: 1;
    white-space: pre-wrap;
}

/* ===================== ABOUT SECTION ===================== */
/* This is the important part we are fixing */

.about-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 15px 0 25px 0;
    padding-right: 10%;
}

.about-text {
    white-space: pre;     /* CRITICAL — preserves your manual alignment */
    color: #f0efe9;
    margin: 0;
    flex: 1;              /* takes the left side space */
}

.profilePic {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #10a5b5;
    box-shadow: 0 0 10px #10a5b5;

}


/* ===================== INPUT LINE ===================== */

.terminal-input-line {
    padding: 2px 5px 5px 0.5%;
}

.prompt {
    margin-left: 0.5%;
    color: #bfbaa4;
}

.input {
    color: #f0efe9;
}

/* ===================== CURSOR ===================== */

#cursor {
    animation: blink 1s step-start infinite;
    margin-left: 0;
    color: #f0efe9;
}

@keyframes blink {
    50% { opacity: 0; }
}