:root {
  --grey-0: black;
  --grey-1: #121212;
  --grey-2: #1E1E1E;
  --grey-3: #232323;
  --grey-4: #252525;
  --grey-5: #272727;
  --grey-6: #2C2C2C;
  --grey-7: #2E2E2E;
  --grey-8: #333333;
  --grey-9: #363636;
  --grey-10: #383838;
  --text: white;
}

body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  font-family: Montserrat;
  background-color: var(--grey-1);
  color: var(--text);
}

html, body {
  width: 100%;
  height: 100%;
}

::-webkit-scrollbar {
  width: 0px;
}

/* Main CSS */
#driveselect, #filesystem {
  height: calc(100% - 70px);
  background: var(--grey-2);
  position: fixed;
  top: 70px;
}

#driveselect {
  right: 0px;
  width: 300px;
  top: 30px;
  height: 100%;
}

#filesystem {
  left: 0px;
  width: 500px;
}

#buttons {
  padding: 10px;
  background: var(--grey-2);
  width: 500px;
  box-sizing: border-box;
  height: 40px;
  top: 30px;
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.filebutton {
  padding: 5px;
  background: var(--grey-6);
  border-radius: 7px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  margin: 0px 2px;
}

#screen {
  position: fixed;
  width: 1120px;
  height: 630px;
  left: 500px;
  top: 40px;
}

#notes, #console {
  width: 373.4px;
  height: 295px;
  left: 500px;
  color: var(--text);
}

#notes {
  background-color: var(--grey-5);
}

#console {
  left: 873.4px;
  background-color: var(--grey-0);
}

#settings {
  width: 373.4px;
  height: 299px;
  position: fixed;
  right: 300px;
  border-radius: 0px;
  outline: none;
  border: none;
  bottom: 0px;
  background: var(--grey-4);
}

table.files {
  width: 100%;
}

.fileheader>th {
  width: 80%;
}

td, th {
  text-align: left;
  padding-right: 8px;
  padding-left: 2px;
}

td {
  font-family: "Roboto Mono", monospace;
}

.displayfile {
  background-color: var(--grey-4);
  cursor: pointer;
}

.files {
  border-collapse: collapse;
}

#currentpos {
  width: calc(100% - 300px);
  background: var(--grey-7);
  position: fixed;
  top: 0px;
  left: 0px;
  height: 30px;
  display: flex;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
}

#info {
  position: fixed;
  right: 0px;
  height: 30px;
  width: 300px;
  background: var(--grey-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

textarea {
  position: fixed;
  bottom: 0px;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 0px;
}

#input {
  height: 24px;
  width: 500px;
  font-family: "Roboto Mono", monospace;
  background-color: var(--grey-3);
  box-sizing: border-box;
  color: var(--text);
}

.selecting:hover {
  color: red;
}

#editor {
  position: initial;
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 5px 10px;
  height: calc(100% - 15px);
  background: none;
  color: var(--text);
}