body {
        margin: 0;
        padding: 0;
        font-family: 'Press Start 2P', cursive, Arial, Helvetica, sans-serif;
    }
    
    input {
        font-family: 'Press Start 2P', cursive, Arial, Helvetica, sans-serif;
    }
    
    * {
        box-sizing: border-box;
    }

    p{
        padding: 0;
        margin: 0;
        line-height: 20px;
    }
    
    #playerConsole,
    #systemOutput {
        width: 100%;
    }
    
    #playerConsole {
        position: absolute;
        bottom: -30px;
        height: 30px;
    }
    
    #output {
        height: 100%;
        max-height: 600px;
        overflow-y: scroll;
    }
    
    .body-wrapper {
        max-width: 1000px;
        width: 100%;
        height: 100vh;
        margin: auto auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .felx-item {
        width: 100%;
        position: relative;
        background-color: black;
        color: whitesmoke;
        -webkit-box-shadow: 7px 17px 61px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 7px 17px 61px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 7px 17px 61px 0px rgba(0, 0, 0, 0.75);
        word-break: break-word;
        user-select: none;
    }
    
    *:focus {
        outline: none;
    }
    
    .felx-item>div {
        padding: 3%;
    }
    /* width */
    
     ::-webkit-scrollbar {
        width: 10px;
    }
    /* Track */
    
     ::-webkit-scrollbar-track {
        background: #000;
    }
    /* Handle */
    
     ::-webkit-scrollbar-thumb {
        background: #444;
    }
    /* Handle on hover */
    
     ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
p.show{
        height: unset;
}

    .show {
        max-height: 600px;
        height: 100%;
        transition: opacity 800ms, height 0.5s ease-in;
    }
    
    .hide {
        opacity: 0;
        height: 0;
    }