/* The terminal behaviour */
.typing {
  color: var(--typing-col);
  font-family: Courier;
  font-weight: bold;
}

.blinker {
  opacity: 1;
  margin-bottom: -2px;
  height: 15px;
  margin-left: -10px; /* Make sure to overlap the underscore blinker in js*/
  border-left: 10px solid var(--blinker-col); /* Size of blinker, make sure to overlap the underscore */
  animation: blinker 0.9s steps(2, start) infinite;
}

@keyframes blinker {
  to { 
    visibility: hidden; 
  }
}

/* The terminal screen */
.TerminalButtons {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  top: 3px;
  left: 6px;
  background-color: #ff3b47;
  border-color: #9d252b;
  display: inline-block;
}

.TerminalMinimize {
  left: 12px;
  background-color: #ffc100;
  border-color: #9d802c;
}

.TerminalZoom {
  left: 18px;
  background-color: #00d742;
  border-color: #049931;
}

.TerminalZoom:after{
  position: fixed; 
  text-align: center;
  top: 0px;
  left: 30%;
  content: "MadJohn -- -bash ";
}

.TerminalMenu {
  position: relative;  
  width: 100%;
  box-sizing: border-box;
  height: 25px;
  background-color: var(--terminalmenu-bg-col);
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.TerminalScreen {
  /* Positioning the box */
  display: none;
  position: absolute; 
  height:200px;
  top: 300px;
  left: 50%;
  width: 60%;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;  /* The outer curves */
  border: 1px solid grey; border-radius: 5px;  /* The outer coloured line */
  background-color: var(--terminalscrn-bg-col); opacity: 0.7;  /* The filling colour */
  z-index: 0;
  /* Neon behind dos-box */
  -webkit-box-shadow: 5px 5px 13px 5px red; /* Red */
  -moz-box-shadow: 5px 5px 13px 5px red; /* Red */
  box-shadow: 5px 5px 13px 5px red; /* Red, #c6152c was not bright enough due to opacity... */
  filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='7')
}


body {
		--terminalmenu-bg-col: #bbb;
		--terminalscrn-bg-col: white;
		--typing-col: red;
		--blinker-col: red;
}
body.dark-theme {
		--terminalmenu-bg-col: grey;
		--terminalscrn-bg-col: #151515;
		--typing-col: lawngreen;
		--blinker-col: LawnGreen;

}

@media (prefers-color-scheme: dark) {
  	/* defaults to dark theme */
	
	body {
		--terminalmenu-bg-col: grey;
		--terminalscrn-bg-col: #151515;
		--typing-col: lawngreen;
		--blinker-col: LawnGreen;
	}

	body.light-theme{
		--terminalmenu-bg-col: #bbb;
		--terminalscrn-bg-col: white;
		--typing-col: red;
		--blinker-col: red;
	}
}