*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Consolas, monospace;
}

html,
body{
    width:100%;
    min-height:100vh;
}

body{
    background:#000;
    color:#00ff00;

    padding:15px;

    overflow-x:hidden;
    overflow-y:auto;

    font-size:16px;
}

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

    min-height:100dvh;

    width:100%;
}

#output{
    flex:1;

    overflow-y:auto;

    white-space:pre-wrap;
    word-wrap:break-word;
    overflow-wrap:break-word;

    padding-bottom:10px;
}

#input-line{
    display:flex;
    align-items:center;

    gap:8px;

    width:100%;

    border-top:1px solid #00aa00;
    padding-top:10px;
}

#prompt{
    flex-shrink:0;
}

#command{
    background:transparent;
    border:none;
    outline:none;

    color:#00ff00;

    font-size:16px;

    width:100%;
    min-width:0;
}

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

/* HP */
@media (max-width:768px){

    body{
        padding:12px;
        font-size:15px;
    }

    #command{
        font-size:16px;
    }

    pre{
        font-size:14px;
    }
}