style.css

/* body{
    background: #000;
} */
.content{
    background: #000;
    color: #F7F7F7;
    height: 65vh;
    border-radius: 10px;
    overflow: auto;
}
.terminal{
    background: #333;
    padding: 20px;
    border-radius: 10px;
    margin-top: 2rem;
}
.padding-zero{
    padding-right: 0px; 
    padding-left: 0px;
}
.row{
    margin-right: 0px;
    margin-left: 0px;
}
pre{
    overflow: unset;
}
.sucess{
    color: #00E500;
}
.error{
    color: #ff7777;
}
.red{
    color: red;
}
.help{
    color:#fff;
}
.logo-hidden{
	visibility: hidden;
}
.left{
    display: block;
    text-align: left;
    padding-left:1rem;
    padding-top:0.5rem;
}
.command{
    position: relative;
    bottom: 0px;
    background: #333;
    width: 100%;
    padding: 0 0 0 15px;
}
#command{
    width: 100%;
    background: #333;
    color: #ddd;
    border: none;
    outline: none;
}
.logo{
	font-size: smaller;
}
footer{
    bottom: 1;
    position: relative;
    text-align: center;
    padding: 1rem;
}
.bug{
    width: 30px;
    height: 30px;
}
a{
    text-decoration: none !important;
}

.command::before{
    content: "$";
    position: absolute;
    top: 1px;
    left: 0;
    color: #ddd;
}
/* width */
::-webkit-scrollbar {
    width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #000;
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 5px;
  }

  @media (max-width: 992px){
     .content{
         height: 60vh;
     }
  }
  @media (max-width: 768px){
    .content{
        height: 50vh;
    }
 }

 @media (max-width: 650px){
    .content{
        height: 30vh;
    }
    .logo{
    	font-size: 1.7vw;
    }
 }