:root {
    --text-header: #ffb74d;
    --text-main: #b0bec5;
    --text-unfocus: #8a969c;
    --text-highlight: #57f8b8;
    --text-link: #c792ea;
    --text-link-hover: #fc6450;

    --user-name: #57f8b8;
    --user-dir: #ffb74d;
    --user-arrow: #90caf9;
}




body {
    font-family: "JetBrainsMonoNF", monospace;
    background-color: #1a1a1a;
    color: var(--text-main);
    font-size: 16px;
}

.command-output {
    white-space-collapse: preserve-spaces;
}

.user-identifier {
    display: inline;
}

.user-identifier .user {
    color: var(--user-name);
}

.user-identifier .dir {
    color: var(--user-dir);
}

.user-identifier .separator {
    color: var(--user-arrow);
}

#user-interact {
    display: block;
    position: fixed;
    top: -500px;
}

#show-text {
    display: inline-block;
}

#mark {
    display: inline-block;
    color: var(--text-header);
    position: absolute;
}

mark {
    background: none;
    color: var(--text-highlight);
    text-shadow: 0 0 20px #fff, 0 0 40px var(--text-highlight), 0 0 20px var(--text-highlight);
}

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

code {
    font-family: "JetBrainsMono", monospace;
    font-size: 0.95rem;
        padding: 2px 6px;
    border-radius: 3px;
    color: #90caf9;
    background-color: #3a3a3a;
}

@media screen and (max-width: 1080px)  {
    body {
        font-size: 14px;
    }
}

@media screen and (max-width: 960px)  {
    body {
        font-size: 12px;
    }
}

@media screen and (max-width: 780px)  {
    body {
        font-size: 10px;
    }
}

@media screen and (max-width: 651px)  {
    body {
        font-size: 8px;
    }
}