style.css

/*------------------------------*/
/*-------------main-------------*/
/*------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=VT323&display=swap'); /* VT323, Ubuntu Mono */

:root {
  --font-main: "Ubuntu Mono";
  --font-secondary: "VT323";
}

body {
  color: #ffffff;
  background-color: #000000;
  font-family: var(--font-secondary);
  font-size: 25px;
}

#content-wrap {
  padding: 0px 0px 0px 8px;
  overflow: hidden;
}

#content {
  /* styles tbd */
}

/*-------------------------------*/
/*------------top-bar------------*/
/*-------------------------------*/

.topBar {
  position: fixed;
  top: 0;
  background-color: #000000;
}

.directoryTitle {
  font-family: var(--font-main);
  font-size: 56px;
  font-weight: bold;
  font-style: italic;
  margin: 0px 0px -12px 2px;
}

.lineBreak::before {
  content: "===============================================================================";
}

.lineBreak {
  color: #ffffff;
  margin: 10px 0px 10px 0px;
}

/* ------------------------------------ */
/* -------------main-content------------*/
/*--------------------------------------*/

.main-content {
  margin-top: 76px; 
  width: calc(100vw - 450px);
  overflow-x:scroll;
}
#cmdHistory {
  text-wrap:nowrap;
}
#cmdHistory::before {
  white-space: pre;
  content: "";
}

#inputReader {
  background-color: transparent;
  border: 0px;
}

#inputReader, 
#inputReader:focus, 
#inputReader::placeholder {
  background-color: transparent; 
  outline: none;
  font-family: var(--font-secondary);
  font-size: 25px;
  color: white;
  caret-color: white;
  caret-shape: underscore;
  width: 90vw;
}

/*--------IN-PROGRESS----------*/


/*--------------------------------*/
/*------------side-bar------------*/
/*--------------------------------*/
.side-bar-container {
  float: right;
  padding: 0px 0px 0px 2px;
  border-left: 1.5px double #ffffff;
  background-color: #000;
  height: 100%;
  width: 450px;
  z-index:20;
}
@media only screen and (min-width: 901px) {
  .open-menu {
    display:none;
  } 
  .side-bar-container {
    display: block;
    position: fixed;
    right:0;
  }
}
@media only screen and (max-width: 900px) {
.main-content {
  width:100%;
}
#side-bar {
  display: block;
  position: fixed; 
  width: 100%;
  height: 100%;
  right: -100%; 
  top: 0em;
  z-index: 100; 
  transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  -webkit-transition: 1s ease-in-out;
  -ms-transition: 1s ease-in-out;
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}

/* styles the visible side bar */
.side-bar-container {
  width: 90vw;
  z-index:120;
}

/*:target means if it is hyperlinked to (notice how when you click side bar the link adds #side-bar)*/
#side-bar:target {
  right: 0; 
  border: none !important;
  text-decoration: none !important;
}

/* styles the ≡ */
.open-menu {
  display: block;
  position: fixed;
  top: 0.3em;
  right: 0.3em;
  z-index: 95; 
  font-family: 'Nanum Gothic', san-serif;
  font-size: 3em;
  font-weight: 700;
  width: 1em;
  height: 1em;
  line-height: 0.9em;
  text-align: center;
  color: #FFF !important;
  text-decoration: none;
}
}
#ownedCmdsWrap, #ownedCmdsWrap a, #semicolonsDisplay, #semicolonsDisplay a {
  text-wrap: nowrap;
  color: #fff;
}
/* styles the sidebar container that is used to close the bar*/
#ownedCmdsWrap {
  overflow-x: scroll;
}