@charset "UTF-8";
.perspective {
  perspective: 1000px;
}

.keyboard {
  transform: rotate3D(1, 0, 0, 45deg);
}

.monitor {
  width: 530px;
  max-height: 300px;
  height: 300px;
  margin-bottom: -30px;
}

.term {
  width: 100%;
  height: 100%;
  --link-color: #7c63e0;
}

body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(45deg, #111, #222);
  color: #999;
  font-family: system-ui, sans-serif;
}

em {
  margin-top: 1rem;
}

.keyboard,
.monitor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0;
  border-radius: 4px;
  border: 13px solid #777;
  border-top-color: #666;
  border-bottom-color: #888;
  outline: 3px solid rgba(0, 0, 0, 0.2);
  outline-offset: -1px;
  box-shadow: inset 0 1rem 1rem rgba(0, 0, 0, 0.5), 0 2rem 3rem -0.5rem rgba(0, 0, 0, 0.55);
  background-image: radial-gradient(#111, #222);
  padding: 0.25rem;
}

.row {
  height: 40px;
  display: flex;
  justify-content: space-between;
  width: 617.2px;
  padding-top: 1px;
  margin-bottom: 2px;
}

kbd {
  border-radius: 3px;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.75);
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.125;
  padding: 0.33em 0.66em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  border-top: 2px solid transparent;
  border-bottom: 6px solid transparent;
  background-color: #e9e8e6;
  border-color: #c3c0bb;
  border-top-color: #eeedeb;
  border-bottom-color: #a6a29a;
  box-shadow: 0 -0.125em 0 -0.063em #a6a29a, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.5);
  transition: transform 100ms;
  outline: 0;
}
kbd::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  border-radius: 4px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
kbd::before {
  border-left-color: #b2afa8;
  border-right-color: #b2afa8;
  border-bottom-color: #959187;
  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to right, #e9e8e6, #c9c9c9 5%, transparent 40%, transparent 60%, #c9c9c9 95%, #e9e8e6);
}
kbd:active, kbd.pressed {
  transform: scale(0.96, 0.96) translate(0, 3px);
}
kbd[data-key]::after {
  position: relative;
  z-index: 1;
  content: attr(data-key);
  text-transform: capitalize;
}
kbd[data-alt]::after {
  white-space: pre;
  content: attr(data-alt) "\a" attr(data-key);
  line-height: 0.95rem;
  font-size: 0.7em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
kbd[data-key=tab], kbd[data-key=enter], kbd[data-key=caps], kbd[data-key=backspace], kbd[data-key=lshift], kbd[data-key=rshift], kbd[data-key=lctrl], kbd[data-key=rctrl], kbd[data-key=lalt], kbd[data-key=ralt], kbd[data-key=lwin], kbd[data-key=rwin], kbd[data-key=rctx] {
  background-color: #7f8384;
  border-color: #575a5a;
  border-top-color: #848889;
  border-bottom-color: #393b3b;
  box-shadow: 0 -0.125em 0 -0.063em #393b3b, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.5);
}
kbd[data-key=tab]:after, kbd[data-key=enter]:after, kbd[data-key=caps]:after, kbd[data-key=backspace]:after, kbd[data-key=lshift]:after, kbd[data-key=rshift]:after, kbd[data-key=lctrl]:after, kbd[data-key=rctrl]:after, kbd[data-key=lalt]:after, kbd[data-key=ralt]:after, kbd[data-key=lwin]:after, kbd[data-key=rwin]:after, kbd[data-key=rctx]:after {
  font-size: 0.725em;
  top: 0;
  left: 0;
  right: 0;
  line-height: 31.2px;
  position: absolute;
}
kbd[data-key=tab]::before, kbd[data-key=enter]::before, kbd[data-key=caps]::before, kbd[data-key=backspace]::before, kbd[data-key=lshift]::before, kbd[data-key=rshift]::before, kbd[data-key=lctrl]::before, kbd[data-key=rctrl]::before, kbd[data-key=lalt]::before, kbd[data-key=ralt]::before, kbd[data-key=lwin]::before, kbd[data-key=rwin]::before, kbd[data-key=rctx]::before {
  border-left-color: #454848;
  border-right-color: #454848;
  border-bottom-color: #272929;
  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to right, #7f8384, #636363 5%, transparent 40%, transparent 60%, #636363 95%, #7f8384);
}
kbd[data-key=lshift]::after, kbd[data-key=rshift]::after {
  content: "Shift";
}
kbd[data-key=lctrl]::after, kbd[data-key=rctrl]::after {
  content: "Ctrl";
}
kbd[data-key=lwin]::after, kbd[data-key=rwin]::after {
  content: "❖";
  font-size: 1rem;
}
kbd[data-key=lalt]::after, kbd[data-key=ralt]::after {
  content: "Alt";
}
kbd[data-key=space]::after {
  content: none;
}
kbd[data-key=rctx]::after {
  content: "☰";
}
kbd[data-key=lalt]::after, kbd[data-key=ralt]::after {
  content: "Alt";
}
kbd[data-key=tab], kbd[data-key=\] {
  width: 60px;
}
kbd[data-key=caps] {
  width: 70px;
}
kbd[data-key=backspace] {
  width: 80px;
}
kbd[data-key=enter] {
  width: 90px;
}
kbd[data-key=lshift] {
  width: 90px;
}
kbd[data-key=rshift] {
  width: 110px;
}
kbd[data-key=lctrl], kbd[data-key=rctrl], kbd[data-key=lalt], kbd[data-key=ralt], kbd[data-key=lwin], kbd[data-key=rwin], kbd[data-key=rctx] {
  width: 50px;
}
kbd[data-key=space] {
  width: 250px;
}
:root {
  --color: #aaa;
  --background: #000;
  --size: 1.2;
  --glow: 1
  --animation: terminal-blink;
}
.command, .directory {
  cursor: pointer;
}