body {
    background-color: #0c0c0c;
    color: #33ff00;
    font-family: 'Courier New', Courier, monospace;
    padding: 2rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

nav a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    margin-right: 15px;
}
nav a:hover {
    background-color: #33ff00;
    color: #000;
}

a {
    text-decoration: none;
}

#output-area {
    margin-top: 2rem;
    white-space: pre-wrap;
    min-height: 200px;
}

#term-insert {
    display: block;
    white-space: pre-wrap;
    margin-top: 1rem;
}

.deactivated {
    opacity: 0%;
}
.activated {
    animation: flicker 2s forwards;
    opacity: 100%;
}
@keyframes flicker {
    0% {opacity: 0%;}
    50% {opacity: 40%;}
    70% {opacity: 90%;}
    80% {opacity: 70%;}
    100% {opacity: 100%;}
}

.mainscript {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    animation: important 2s step-end infinite;
}
@keyframes important { 50% { background-color: crimson; color: #000; } }

.mainscripttriggered {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    animation: importanttriggered 0.2s step-end infinite;
}
@keyframes importanttriggered { 50% { background-color: blueviolet; color: #000; } }


.mainscriptdeac {
    color:#888;
    text-decoration: none;
}

/* CURSOR BLINK */
.cursor {
    display: inline-block;
    width: 10px;
    height: 1.2em;
    background-color: #33ff00;
    vertical-align: sub;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hidden { display: none; }
.prompt { color: #888; }