* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Ubuntu Mono', 'Courier New', monospace;
    background-color: #300a24;
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
}

#terminal {
    height: 100vh;
    padding: 20px;
    overflow-y: auto;
}

#output {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 10px;
}

.line {
    margin-bottom: 5px;
}

.prompt {
    color: #8ae234;
    display: inline;
}

.user {
    color: #8ae234;
}

.at {
    color: #ffffff;
}

.host {
    color: #8ae234;
}

.colon {
    color: #ffffff;
}

.path {
    color: #729fcf;
}

.dollar {
    color: #ffffff;
}

.command {
    color: #ffffff;
}

.error {
    color: #ef2929;
}

.success {
    color: #8ae234;
}

.info {
    color: #729fcf;
}

#input-line {
    display: flex;
}

#command-input {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    flex: 1;
    caret-color: #ffffff;
}

.cursor {
    display: inline-block;
    width: 8px;
    height: 18px;
    background-color: #ffffff;
    animation: blink 1s step-end infinite;
}

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

a {
    color: #729fcf;
    text-decoration: underline;
}

.glitch-effect {
    animation: glitch 0.3s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    10% {
        transform: translate(-5px, 5px);
        filter: hue-rotate(90deg);
    }
    20% {
        transform: translate(5px, -5px);
        filter: hue-rotate(180deg);
    }
    30% {
        transform: translate(-5px, -5px);
        filter: hue-rotate(270deg);
    }
    40% {
        transform: translate(5px, 5px);
        filter: hue-rotate(360deg);
    }
    50% {
        transform: translate(0);
        text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;
    }
    60% {
        transform: translate(-3px, 3px);
        text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
    }
    70% {
        transform: translate(3px, -3px);
        filter: invert(1);
    }
    80% {
        transform: translate(-3px, -3px);
        filter: invert(0);
    }
    90% {
        transform: translate(3px, 3px);
        text-shadow: -3px 0 #ff0000, 3px 0 #00ff00;
    }
    100% {
        transform: translate(0);
        filter: none;
        text-shadow: none;
    }
}