/* $home: #05386b; */
/* $twitter: #379683; */
/* $codepen: #5cdb95; */
/* $github: #8ee4af; */
/* $background: #edf5e1; */
/* $shadow: #cccccc; */
/* $illumination: #fdc6be; */
/**/
/* @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); */
/**/
/* body { */
/*   background: $background; */
/*   text-transform: uppercase; */
/*   text-shadow: 0.5px 0.5px 0 $shadow; */
/* } */
/**/
/* .background { */
/*   position: fixed; */
/*   z-index: -1; */
/*   top: 0; */
/*   right: 0; */
/*   bottom: 0; */
/*   left: 0; */
/*   transition: 0.75s; */
/* } */
/**/
/* .nav { */
/*   padding: 0px; */
/*   width: 640px; */
/*   margin: 100px auto auto auto; */
/* } */
/**/
/* ul { */
/*   list-style-type: none; */
/* } */
/**/
/* li a { */
/*   padding: 30px; */
/*   float: left; */
/*   width: 100px; */
/*   text-align: center; */
/*   font-size: 15px; */
/*   color: $background; */
/*   text-decoration: none; */
/* } */
/**/
/* li a:hover .circle { */
/*   position: relative; */
/*   z-index: 1; */
/*   top: -60px; */
/*   width: 80px; */
/*   height: 80px; */
/*   border-radius: 100%; */
/*   animation: illuminate 2s ease-out infinite; */
/*   background: $illumination; */
/* } */
/**/
/* li i { */
/*   height: 50px; */
/* } */
/**/
/* li a:hover i { */
/*   transform: translateY(-10px); */
/* } */
/**/
/* li a .title { */
/*   font-size: 0px; */
/* } */
/**/
/* li a:hover .title { */
/*   transform: translateY(10px); */
/*   font-size: 15px; */
/*   transition: 0.5s; */
/* } */
/**/
/* li a.title:hover { */
/*   transform: translateY(-10px); */
/* } */
/**/
/* .nav li:first-child a { */
/*   background: $home !important; */
/* } */
/**/
/* .nav li:nth-child(2) a { */
/*   background: $twitter !important; */
/* } */
/**/
/* .nav li:nth-child(3) a { */
/*   background: $codepen !important; */
/* } */
/**/
/* .nav li:nth-child(4) a { */
/*   background: $github !important; */
/* } */
/**/
/* .nav li:first-child:hover ~ .background { */
/*   background: $home; */
/* } */
/* .nav li:nth-child(2):hover ~ .background { */
/*   background: $twitter; */
/* } */
/* .nav li:nth-child(3):hover ~ .background { */
/*   background: $codepen; */
/* } */
/**/
/* .nav li:nth-child(4):hover ~ .background { */
/*   background: $github; */
/* } */
/**/
/* @keyframes illuminate { */
/*   0% { */
/*     transform: scale(0.7, 0.7); */
/*     opacity: 0.7; */
/*   } */
/*   50% { */
/*     opacity: 0.3; */
/*   } */
/*   100% { */
/*     transform: scale(1.15); */
/*     opacity: 0; */
/*   } */
/* } */
@font-face {
  font-family: "OperatorMonoNerdFont";
  src: url("../font/OperatorMono/OperatorMonoNerdFont-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "OperatorMonoNerdFont";
  src: url("../font/OperatorMono/OperatorMonoNerdFont-Bold.otf")
    format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "OperatorMonoNerdFont";
  src: url("../font/OperatorMono/OperatorMonoNerdFont-BoldItalic.otf")
    format("opentype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "OperatorMonoNerdFont";
  src: url("../font/OperatorMono/OperatorMonoNerdFont-Italic.otf")
    format("opentype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "OperatorMonoNerdFont";
  src: url("../font/OperatorMono/OperatorMonoNerdFont-Light.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
}
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.ansi-green-fg {
  color: hsl(88.77, 100%, 34.84%);
}

.ansi-blue-fg {
  color: hsl(212.88, 99.95%, 63.64%);
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.terminal {
  padding: 20px;
  border: 2px solid #26c6da; /* Teal border color */
  border-radius: 5px;
  background-color: #252526; /* Slightly lighter dark background */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

.terminal-text {
  white-space: nowrap; /* Prevent text wrapping */
}

.prompt {
  color: #fff; /* Teal prompt color */
}

.python-version {
  color: #0fc469; /* Green for Python version */
}

.git-status {
  color: #ffe700; /* Yellow for Git status */
}

.kubectl-context {
  color: #ffa5d8; /* Pink for Kubernetes context */
}

.additional-info {
  margin-top: 10px;
}

@keyframes blink {
  50% {
    opacity: 0; /* Cursor disappears halfway through the animation */
  }
}

/* From the provided CSS structure */
body {
  /* Define text color variable */
  --text-color: hsl(223.81, 0%, 88.8%);

  font-family: "OperatorMonoNerdFont", monospace;
  background-color: hsl(223.81, 0%, 3.3%);
  color: var(--text-color); /* Use the variable */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* height: 100vh; */
  /* margin: 0; */
}

.glass-box {
  background: color-mix(in hsl, var(--color-slate-100) 40%, transparent);
  border: 1px solid hsl(223.81, 0%, 13.46%);
  border-radius: 0.5rem;
  box-shadow:
    0 0.25rem 1rem #0002,
    0 1px 2px #0003;
  backdrop-filter: blur(10px);
  width: 100%;
  overflow: hidden;
}

.window-decoration {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem;
  background-color: hsl(223.81, 0%, 13.46%);
  border-bottom: 1px solid hsl(223.81, 0%, 32.02%);
  position: relative;
}

.circles {
  position: absolute;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
}

.circle {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: gray;
}

.circle.red {
  background-color: hsl(349.79, 99.98%, 65.68%);
}
.circle.yellow {
  background-color: hsl(40.53, 100%, 39.92%);
}
.circle.green {
  background-color: hsl(88.77, 100%, 34.84%);
}

h2 {
  margin: 0;
  font-size: 1.1rem;
  color: hsl(223.81, 0%, 88.8%);
}

.terminal-content {
  font-family: "OperatorMonoNerdFont", monospace;
  padding: 1rem;
  background-color: hsl(223.81, 0%, 3.3%);
  color: hsl(223.81, 0%, 88.8%);
  font-family: "Fira Code Variable", monospace;
  font-size: 14px;
  /* Add max-height and overflow for scrolling */
  max-height: 60vh; /* Adjust as needed */
  overflow-y: auto;
}

#me {
  align: left;
  border-radius: 10%;
  padding: 10px;
}

/* Default prompt style */
.prompt {
  display: inline; /* Make prompts inline by default */
  margin-right: 0.5em; /* Space after prompt */
}

/* Container for history command lines */
.command-line {
  display: block; /* Ensure command lines take full width */
  margin-bottom: 0.5rem; /* Space below command lines */
}

/* Style the input line container specifically */
#input-line {
  /* Inherit general command line styles or add specific ones */
  /* Example: ensure prompt and input span are aligned */
  display: flex;
  align-items: baseline;
}

/* No specific style needed for #input-line .prompt anymore, */
/* as the default .prompt style is now inline. */
/* We can remove this rule. */

#current-input {
  /* Style the actual input field to be invisible but functional */
  background: transparent;
  border: none;
  outline: none;
  color: inherit; /* Match terminal text color */
  font-family: inherit; /* Match terminal font */
  font-size: inherit; /* Match terminal font size */
  padding: 0;
  margin: 0;
  /* Allow the input to grow and take available space */
  flex-grow: 1;
  /* Optional: Set a minimum width if needed */
  min-width: 1px;
  /* Use default caret, but match text color */
  caret-color: inherit;
}

/* Removed block cursor simulation styles */


.output-line {
  margin-bottom: 0.5rem; /* Add space below output lines */
}

/* Removed .blink and @keyframes blink-animation rules as the span is gone */

pre {
  margin: 1rem 0;
  margin: 0; /* Reset margin for pre inside output lines */
  white-space: pre-wrap;
  font-size: 14px; /* Match terminal font size */
  line-height: 1.4; /* Adjust line height */
  font-family: inherit; /* Inherit terminal font */
}

/* Ensure pre inside dynamically added output looks right */
.output-line pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}

#img_desc {
  flex-direction: row;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Optional: Style for when the terminal has conceptual focus */
.glass-box.focused {
  /* Example: slightly change border or add outline */
   outline: 2px solid var(--ansi-blue-fg, hsl(212.88, 99.95%, 63.64%));
   outline-offset: 2px;
}