@import url('https://fonts.googleapis.com/css?family=VT323');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

:root
{
    --vt-font-family: 'VT323', monospace;
    --vt-font-size: 20px;

    --vt-margin: 25px;
    --vt-padding: 5px;

    /* --vt-border: 3px solid white; */

    --vt-background-color: rgba(56, 4, 40, .9);
    --vt-color: white;
}

*
{
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body 
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    font-family: 'Ubuntu';
}

.vue-terminal
{
    position: relative; 

    width: calc(100% - 2 * var(--vt-margin));
    height: calc(100% - 2 * var(--vt-margin));

    margin: var(--vt-margin);
    padding: var(--vt-padding);

    border: var(--vt-border);

    background-color: var(--vt-background-color);
    color: var(--vt-color);

    /* font-family: var(--vt-font-family); */
    font-size: var(--vt-font-size);

    overflow-y: scroll;
}

.vue-terminal *
{
    float: left;
}

.vue-terminal-output-container
{
    width: 100%;
}

.vue-terminal-output-container li
{
    list-style: none;
    text-decoration: none;
    width: 100%;
    padding: var(--vt-padding);
    padding-top: 0;
    padding-bottom: 0;
}

.vue-terminal-output-container li pre
{
    width: 100%;
    padding: 0;
}

.vue-terminal-output-container li pre span
{
    width: 100%;
    /* font-family: var(--vt-font-family); */
    font-size: var(--vt-font-size);
    white-space: pre;
}

.vue-terminal-input-container
{
    width: 100%;

    display: flex;
    flex-direction: row;

    justify-content: flex-start;
}

.vue-terminal-prefix
{
    padding: var(--vt-padding);
    padding-top: 0;
    padding-bottom: 0;

    flex-shrink: 1;
}

.vue-terminal-input 
{
    border: 0;
    outline: none;

    background: transparent;

    /* font-family: var(--vt-font-family); */
    font-size: var(--vt-font-size);
    color: transparent;
    text-shadow: 0 0 0 var(--vt-color);

    padding: 0;
    margin: var(--vt-padding);
    margin-top: 0;
    margin-bottom: 0;
}

.focused 
{
    border-right: 10px solid var(--vt-color);
    animation: 2000ms ease infinite alternate blink;
}