body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #0f0;
  font-family: Consolas, "Courier New", Courier, monospace;
  overflow: hidden; /* Prevent page scrolling */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.terminal {
  position: fixed; /* Fixed position */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%; /* Adjusted width */
  max-width: 1200px; /* Adjusted maximum width */
  background-color: #000;
  border: 2px solid #0f0;
  border-radius: 5px;
  overflow: hidden;
  height: 90vh; /* Adjusted height */
  z-index: 999; /* Ensure the terminal is on top */
}

.terminal-header {
  background-color: #444;
  padding: 5px;
  position: fixed;
  top: 0;
  width: 100%; /* Adjusted width */
  max-width: 1200px; /* Adjusted maximum width */
  z-index: 1000; /* Ensure the header is on top of the terminal body */
}

.terminal-body {
  padding: 20px;
  overflow-y: auto; /* Enable terminal scrolling */
  height: calc(100% - 40px); /* Adjust terminal body height */
}

.button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.red {
  background-color: #ff5f57;
}

.yellow {
  background-color: #ffbd2e;
}

.green {
  background-color: #28ca42;
}

.terminal-body {
  padding: 20px;
  overflow-y: auto; /* Enable terminal scrolling */
  height: calc(100% - 40px); /* Adjust terminal body height */
}

.input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.input-line span {
  color: #0f0;
  margin-right: 5px;
}

.current-dir {
  color: #0f0;
  margin-right: 5px;
  font-family: Consolas, "Courier New", Courier, monospace;
}

.input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.input-line input {
  background-color: transparent;
  border: none;
  color: #0f0;
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: inherit;
  outline: none;
  width: calc(100% - 20px);
  padding-right: 5px; /* Extra padding to accommodate cursor */
  position: relative; /* Make the container relative for absolute positioning */
}

.input-line input::after {
  content: ""; /* Cursor symbol */
  width: 2px; /* Adjust the width of the cursor */
  background-color: #0f0; /* Color of the cursor */
  position: absolute; /* Position the cursor absolutely */
  top: 0;
  bottom: 0;
  margin: auto 0; /* Center the cursor vertically */
  animation: blink 0.8s infinite; /* Blink animation */
}

@keyframes blink {
  0% {
    opacity: 1;
  } /* Cursor visible */
  50% {
    opacity: 0.5;
  } /* Cursor semi-transparent */
  100% {
    opacity: 1;
  } /* Cursor visible again */
}

.input-line input:focus {
  outline: none;
}

input#userInput::-webkit-file-upload-button {
  display: none !important;
}