@font-face {
  font-family: Future Earth;
  src: url(future_earth/Future\ Earth\ v2.ttf);
}

* {
  margin: 0px;
}

body {
  background-color: black;
  overflow: hidden;
  color: rgb(187, 187, 187);
  font-size: 10px;
  -webkit-user-drag: none;
  user-select: none;
  padding: 5px;
}

p {
  padding-left: 5px;
}

#menu {
  position: absolute;
  width: 200px;
  background-color: rgb(200, 23, 23);
  top: calc(100% - 40px);
  transform: translate(0px, -100%);
  left: 0px;
  padding: 5px; 
  font-size: 15px;
  font-family: 'Anonymous Pro';
  
}

#menuSearch {
  position: relative;
  background-color: white;
  margin: 0 0 -4px -4px;
  width: calc(100% - 2px);
  padding: 5px;
}

#menuSearchOverlay {
  position: absolute; /* here */
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

#menuSearchTyping {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 10px);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  outline: none;
  border: 3px solid rgb(54, 178, 255);
  color: black;
  padding: 3px;
  overflow-x: hidden;
}

/* menuSearchResults   menuSearchResult   menuSearchResultIcon   menuSearchResultText */

#bgimg1 {
  position: absolute;
  height: 150%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-user-drag: none;
}

#bgimg2 {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-user-drag: none;
}

.window {
  position: absolute;
  width: calc(25% + 0px);
  height: calc(33.33% + 0px);
  background-color: rgb(37, 37, 37);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.247);
}

.topBar {
  height: 30px;
  background-color: rgb(75, 75, 75);
  font-family: Future Earth;
}

.xButton {
  float: right;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 0, 0, 0);
}

.xButton:hover {
  background-color: rgba(255, 0, 0, 0.582);
}

.xOverlay {
  position: absolute;
  top: 0px;
  width: inherit;
  height: inherit;
}

.bsButton {
  float: right;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 0, 0, 0);
}

.bsButton:hover {
  background-color: rgba(172, 172, 172, 0.274);
}

.bsOverlay {
  position: absolute;
  top: 0px;
  width: inherit;
  height: inherit;
}

.topBarOverlay {
  position: absolute;
  top: 0px;
  width: calc(100% - 60px);
  height: inherit;
}

.title {
  float: left;
  position: relative;
  top: 50%;
  transform: translate(5px, -50%);
}

.content {
  width: 100%;
  height: calc(100% - 30px);
  user-select: text;
  overflow: hidden;
}

#ball {
  position: relative;
  font-size: 25px;
  left: -125px;
  top: -125px;
  width: 200px;
  text-align: center;
  height: 200px;
  border-radius: 100%;
  background-color: rgb(255, 255, 255);
}

#ball span {
  position: absolute;
  top: 50%;
  transform: translate(-50%);
}

.rect {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 75px);
  width: 150px;
  height: 100px;
  background-color: blue;
  border: 2px solid black;
}

#rects {
  width: 100%;
  height: 100%;
}

.icon {
  position: relative;
  width: calc(12.5% - 10px);
  height: calc(12.5% - 10px);
  /* background-color: rgba(255, 0, 0, 0.37); */
  float: left;
  margin: 5px;
  text-align: center;
  font-family: Future Earth;
}

.icon:hover {
  background-color: rgba(59, 59, 59, 0.315);
  border-radius: 2px solid rgb(255, 255, 255);
  outline: 5px;
}

.icon:hover:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 2px solid #ccc;
}

.iconOverlay {
  width: 100%;
  height: 100%;
}

.iconContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

.iconParent {
  background-color: red;
  width: calc(5% - 10px);
  height: calc(12.5% - 10px);
  margin: 5px;
}

.iconCut {
  position: relative;
  width: 10px;
  height: 10px;
  transform: skew(45deg);
  background-color: blue;
}

.iconCut2 {
  position: relative;
  top: calc(100% - 20px);
  width: 10px;
  height: 10px;
  transform: skew(45deg);
  background-color: blue;
}

#taskBar {
  position: absolute;
  top: calc(100% - 40px);
  left: 0px;
  width: 100%;
  height: 40px;
  background-color: rgb(27, 27, 27);
}

.tbIcon {
  position: relative;
  height: 40px;
  width: 50px;
  float: left;

}

.tbIconContent {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  float: left;
}

.tbIcon:hover {
  background-color: rgb(63, 63, 63);

}

.tbIconOverlay {
  position: absolute;
  height: inherit;
  width: inherit;
}

#cmdPrefix,
#cmdInput {
  width: fit-content;
  float: left;
  font-size: 17px;
  font-family: 'Anonymous Pro';
  outline: none;
}

#cmdContentBox p {
  font-size: 17px;
  font-family: 'Anonymous Pro';

}

#cmdPrefix {
  margin-right: 9px;
}

#cmdContentBox,
#cmdInputBox {
  font-family: 'Anonymous Pro';
  font-size: 13px;
  overflow: hidden;
}

#cmdContent::-webkit-scrollbar {
  width: 10px
}

#cmdContent::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0)
}

#cmdContent::-webkit-scrollbar-thumb {
  background-color: rgb(68, 68, 68)
}

#cmdContent {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.877);
}

#cmdStretcher {
  height: calc(100% - 17px);
}

.leftExpander {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  width: 5px;
  /*   background-color: red; */
}

.leftExpander:hover {
  cursor: ew-resize;
}

.rightExpander {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  width: 5px;
  /*   background-color: red; */
  left: 100%;
  transform: translate(-100%);
}

.rightExpander:hover {
  cursor: ew-resize;
}

.topExpander {
  position: absolute;
  top: 0px;
  left: 5px;
  width: calc(100% - 10px);
  height: 5px;
  /*   background-color: red; */
}

.topExpander:hover {
  cursor: ns-resize;
}

.bottomExpander {
  position: absolute;
  width: calc(100% - 10px);
  left: 5px;
  height: 5px;
  /*   background-color: red; */
  transform: translate(0%, -100%);
}

.bottomExpander:hover {
  cursor: ns-resize;
}

.topleftExpander {
  position: absolute;
  top: 0px;
  width: 5px;
  height: 5px;
  /* background-color: red; */
}

.topLeftExpander:hover {
  cursor: nw-resize;
}

.toprightExpander {
  position: absolute;
  top: 0px;
  width: 5px;
  height: 5px;
  /* background-color: red; */
  left: 100%;
  transform: translate(-100%);
}

.toprightExpander:hover {
  cursor: ne-resize;
}

.bottomleftExpander {
  position: absolute;
  width: 5px;
  height: 5px;
  /* background-color: red; */
  transform: translate(0%, -100%);
}

.bottomLeftExpander:hover {
  cursor: ne-resize;
}

.bottomrightExpander {
  position: absolute;
  width: 5px;
  height: 5px;
  /* background-color: red; */
  left: 100%;
  transform: translate(-100%, -100%);
}

.bottomrightExpander:hover {
  cursor: nw-resize;
}