/* Variables */
:root {
  --terminal-green: limegreen;
  --terminal-bg: #010a00;
  --terminal-text: white;
  --title-bg-start: #F4F4F5;
  --title-bg-end: #CECDCE;
  --title-text: #4C4C4B;
  --border-color: #CECECF;
}

/* Site-wide stuff */
body {
	color: var(--terminal-text);
	letter-spacing: 1px;
	background-color: var(--terminal-bg);
    font-family: Menlo, Consolas, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
	font-size: 16px;
	margin: 0;
}

a {
	color: deepskyblue;
}

p {
	line-height: 22px;
	font-size: inherit;
}

.title-bar {
	padding-left: 7px;
	padding-top: 5px;
	padding-bottom: 3px;
	background-image: linear-gradient(var(--title-bg-start), var(--title-bg-end));
	box-shadow: 0 4px 2px 0 var(--title-bg-end);
	display: flex;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
}

.macos-buttons {
	min-width: 130px;
	left: 12px;
	top: 7px;
	position: absolute;
	display: flex;
	align-items: center;
}

.title-buttons {
  height: 0.75em;
  width: 0.75em;
  border-radius: 50%;
  margin-right: 0.5em;
}

.title-text {
	color: var(--title-text);
	font-family: sans-serif;
	width: 100%;
	text-align: center;
	letter-spacing: -.001em;
}

.title-buttons:first-child {
  background-color: #ff3b47;
  border-color: #9d252b;
}

.title-buttons:nth-child(2) {
  background-color: #ffc100;
  border-color: #9d802c;
}

.title-buttons:nth-child(3) {
  background-color: #00d742;
  border-color: #049931;
}

/* Table classes */
table {
	font-size: 14px;
}

table.exTable {
	width:90%;
}

table.skTable {
	width:90%;
	font-size: inherit;
}

table.mnTable {
	width:90%;
	font-size: inherit;
}

td {
	padding: 4px;
}

/* General containers */
.site-container {
	padding-top: 4px;
	border: 1px solid var(--border-color);
	height: calc(100% - 30px);
	overflow: auto;
	width: calc(100% - 2px);
}

.output-row {
	margin-bottom: 2px;
	margin-top: 2px;
	padding-left: 10px;
	padding-right: 15px;
	padding-top: 2px;
	padding-bottom: 4px;
	color: inherit;
	max-width: 800px;
}

.input-row {
	margin-bottom: 2px;
	margin-top: 2px;
	padding-left:10px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: inherit;
}

.terminal-container {
	padding-bottom: 5px;
}

/* Green highlight */
.green-hl {
	color: var(--terminal-green);
}

/* Terminal & input classes */
.terminal-input input:focus {
	position: absolute;
	height: 80%;
	top: 10%;
	animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	opacity: 1;
}

input[type=text] {
	background-color: transparent;
	letter-spacing: 1px;
	font-family:inherit;
	font-size: 16px;
	outline: none;
	width: 25%;
	color: var(--terminal-green);
	border: 0;
	height: 20px;
}

@keyframes blink {
	from { 
		opacity: 1; 
	}

	to { 
		opacity: 0; 
	}
}

@media (min-width: 650px) {
	body {
		font-size: 14px;
	}
	input[type=text] {
		font-size: 14px;
	}
	table {
		font-size: 14px;
	}
}