body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    .desktop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('assets/wallpaper.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .desktop-icon {
    width: 80px;
    text-align: center;
    position: absolute;
    top: 25px;
    left: 15px;
    cursor: pointer;
    }

    .desktop-icon span {
    color: white;  /* Change text color to white */
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12.5px;
}

    .desktop-icon:nth-child(2) {
    top: 125px;
    left: 15px;
    }
.hidden {
  display: none !important; /* Force it hidden when applied */
}

/* Terminal Window Frame */
.app-window {
  position: fixed;                /* Use fixed to stay centered */
  top: 50%;                       /* Center vertically */
  left: 50%;                      /* Center horizontally */
  transform: translate(-50%, -50%); /* Perfect centering */
  width: 80vw;                    /* Big width */
  height: 80vh;                   /* Big height */
  background-color: black;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3;
}
.app-window.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* Terminal Frame Header */
.window-header {
  background-color: #2e2e2e;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Terminal Content Area */
.terminal-content {
  flex-grow: 1;
  padding: 15px; /* Inner spacing inside terminal */
  color: rgb(175, 148, 148);
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 14px; /* Allow wrapping! */
  word-wrap: break-word;  /* Allow breaking long words */
  max-width: 100%;
  overflow-y: auto;
}

.terminal-content div {
  margin-bottom: 8px; /* Space between lines */
}

/* TERMINAL INPUT */
.terminal-input {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.terminal-input span {
  color: yellow;
  font-family: monospace;
  margin-right: 10px; 
}

#terminal-cursor {
  background: none;
  border: none;
  color: white; /* While typing */
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 14px;
  outline: none;
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-word;
  min-width: 1ch;
  max-width: 100%;
}

.terminal-line {
    display: flex;
    flex-wrap: nowrap; /* No line wrapping! */
    align-items: center;
    width: 100%; /* full width */
    overflow-x: auto; /* scroll if too long */
}

.terminal-line .prompt {
    color: yellow;
    margin-right: 5px;
    flex-shrink: 0; /* Prevent shrinking */
}

.terminal-input input {
  background: none;
  border: none;
  color: white;
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 14px;
  outline: none;
  width: auto;
  display: inline-block;
  -webkit-appearance: none;
  white-space: pre; /* No wrap; keep spaces */
  word-break: keep-all; /* Prevent breaking words */
  padding: 0;
  margin: 0;
  caret-color: white;
  white-space: nowrap;
  overflow-x: auto;
  text-overflow: clip;
}

.window-controls {
  display: flex;
  align-items: center;
}

.dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: orange;
  cursor: pointer;
}

.dot1 {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: rgb(177, 2, 2);
  cursor: pointer;
}


.window-title {
  color: yellow;
  font-family: monospace;
  margin-left: 10px; /* Optional: spacing from dots */
}

/* FONT COLORS */
.yellow-text {
  color: yellow;
  font-family: monospace;
}

.white-text {
  color: white;
}

.red-text {
  color: rgb(216, 244, 7) !important;
  font-family: monospace;
}


.lightblue-text {
  color: #09a8e7 !important;
  font-family: monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.terminal-link {
  color: #00ffff; /* Choose your color */
  text-decoration: underline;
}

.terminal-link:hover {
  color: #ff69b4; /* Optional hover color */
}

.link-blue {
  color: #00bfff; /* Bright blue link */
  text-decoration: underline;
}

.link-blue:hover {
  color: #ff4500; /* Orange on hover */
}



/* ----------------FILE SECTION------------------- */
.app-window.files {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 500px;
  background-color: #f0f4f8;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.app-window.files.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.files-header button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: black;  /* Match the color of your text */
  font-family: monospace; /* Match the font style */
  font-size: 16px; /* Match the font size */
  cursor: pointer;
  text-decoration: none;
}


.files-header {
    background-color: #e0e7ef;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-list {
  list-style: none;
  padding: 10px 20px;
}

.file-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.file-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.file-icon.folder {
  background: url('assets/folder-icon.png') no-repeat center center / cover;
}

.file-icon.text {
  background: url('assets/text-icon.png') no-repeat center center / cover;
}

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white; padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 10;
}