/* ><> 🫧🫧 */

:root {
    --bg-color: #212422;
    --main-color: #d1d1d1;
    --accent-color: #99c9a5;
    --error-color: #c99999;
    --container-bg: #2f3d33;
}

::selection {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

::-moz-selection {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

/* ><> scrollbar */
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--container-bg);
    border-radius: 0px;
    border: 5px solid var(--container-bg);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
    border-radius: 0px;
    border: 5px solid var(--accent-color);
}

/* ><> shit */
body {
    background-color: var(--bg-color);
    color: var(--main-color);
    font-family: "Source Code Pro", monospace;
    padding: 20px;
    margin: 0;
    line-height: 1.4;
    overflow-x: hidden;
}

#terminal {
    display: flex;
    flex-direction: column;
}

.system-msg {
    color: var(--accent-color);
    margin-bottom: 20px;
}
        
.highlight {
    color: var(--accent-color);
}

#history {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.input-container {
    display: flex;
    align-items: center;
    outline: none;
    flex-wrap: wrap;
}

.prompt {
    color: var(--accent-color);
    white-space: nowrap;
}

#display-wrapper {
    display: inline-block;
    white-space: pre-wrap;
    word-break: break-all;
}

#cursor {
    background-color: var(--accent-color);
    color: var(--bg-color);
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    0%, 100% { background-color: var(--accent-color); color: var(--bg-color); }
    50% { background-color: transparent; color: var(--main-color); }
}

#hidden-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.command-output {
    margin-bottom: 2px;
}

.error {
    color: var(--error-color);
}