@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

body {
  background: rgb(40, 40, 40);
  font-family: 'Ubuntu';
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.Terminal {
  width: 900px;
  height: 600px;
  max-width: 95vw;
  max-height: 90vh;
  box-shadow: 2px 4px 10px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
}

.Terminal__Toolbar {
  background: linear-gradient(#504b45 0%,#3c3b37 100%);
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  height: 25px;
  display: flex;
  align-items: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  flex-shrink: 0;
}

.Toolbar__buttons {
  display: flex;
  align-items: center;
}

.Toolbar__button {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 0;
  font-size: 7px;
  background: linear-gradient(#7d7871 0%, #595953 100%);
  text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
  box-shadow: 0px 0px 1px 0px #41403A,0px 1px 1px 0px #474642;
  border: none;
  margin-right: 4px;
}
.Toolbar__button:hover { cursor: pointer; }
.Toolbar__button--exit {
  background: #f25d2b;
  background: linear-gradient(#f37458 0%, #de4c12 100%);
  background-clip: padding-box;
}
.Toolbar__button:focus { outline: none; }

.Toolbar__user {
  color: #d5d0ce;
  margin-left: 4px;
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 12px;
}

.Terminal__body {
  background: rgb(40, 40, 40);
  flex: 1;
  padding: 10px 14px;
  font-family: 'Ubuntu Mono', monospace;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
  color: #ffffff;
}

.Terminal__body::-webkit-scrollbar { width: 8px; }
.Terminal__body::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

.Terminal__output > * { white-space: pre-wrap; word-break: break-word; }

.Terminal__text { color: #ffffff; }
.Terminal__text.dim { color: #cfcfcf; margin-bottom: 8px; }
.dim2 { color: #bdbdbd; }
.hl { color: #87d441; font-weight: bold; }

.Terminal__Prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.Prompt__user { color: #87d441; }
.Prompt__colon { color: #ffffff; }
.Prompt__location { color: #6d85a9; }
.Prompt__dollar { color: #ffffff; margin-right: 6px; }
.Prompt__input { color: #ffffff; white-space: pre; }
.Prompt__cmd { color: #ffffff; }

.Prompt__cursor {
  height: 16px;
  width: 8px;
  background: #ffffff;
  display: inline-block;
  margin-left: 1px;
  animation: 600ms ease infinite alternate blink;
  vertical-align: middle;
}

.cmd-echo { opacity: 0.95; margin-top: 8px; }
.cmd-echo .Prompt__cursor { display: none; }

.output-block { margin: 6px 0 14px; }

.color-key { color: #87d441; font-weight: bold; }
.color-sub { color: #8ba6cc; }
.color-val { color: #ffffff; }
.color-muted { color: #cfcfcf; }
.color-info { color: #8ba6cc; }
.color-error { color: #f25d2b; }
.color-success { color: #87d441; }

.term-link {
  color: #5fb3d4;
  text-decoration: none;
  border-bottom: 1px dotted #5fb3d4;
}
.term-link:hover { color: #fff; border-bottom-color: #fff; }

.ascii { color: #87d441; }
.ascii-photo { color: #d4b896; text-shadow: 0 0 2px rgba(212, 184, 150, 0.3); }

.neofetch-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}
.neofetch-photo {
  position: relative;
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  border: 1px solid #87d441;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 0 14px rgba(135, 212, 65, 0.2), inset 0 0 28px rgba(0,0,0,0.5);
}
.neofetch-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(0.8) sepia(0.35) contrast(1.15) brightness(0.95);
  display: block;
}
.neofetch-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0px,
      rgba(0, 0, 0, 0.18) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.neofetch-info {
  white-space: pre;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .neofetch-block { flex-direction: column; gap: 10px; }
  .neofetch-photo { width: 200px; height: 200px; }
}

@keyframes blink {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 600px) {
  .Terminal { width: 100%; height: 100%; max-height: 100vh; max-width: 100vw; }
  .Terminal__body { font-size: 12px; }
}