#matrix-canvas {
  position: absolute;
  top:0; left:0; width:100%; height:100%; z-index:0;
  pointer-events:none; /* Allow interaction on terminal */
  overflow:hidden;
}
.terminal-section { 
    display:flex;
     justify-content:center;
      align-items:center
      ; min-height:100vh; 
      padding:20px; 
      position:relative;
       z-index:1;
       margin:0;
         background:#111;
          font-family: 'Courier New', monospace; 
     }
.terminal-container { width:600px; max-width:95%; position:relative; z-index:2; }
.terminal-title { text-align:center; font-size:2rem; margin-bottom:20px; color:#0f0; }
.terminal-screen {
  background: rgba(0,0,0,0.85);
  padding:20px;
  border-radius:6px;
  box-shadow:0 0 20px #0f0;
  max-height:70vh;  /* scrollable area */
  overflow-y:auto;
  font-size:1rem;
  line-height:1.5;
  transition:all 0.2s ease;
  color:#0f0;
  scrollbar-width: thin;
  scrollbar-color: #0f0 #000;
}
.terminal-screen::-webkit-scrollbar { width:6px; }
.terminal-screen::-webkit-scrollbar-thumb { background:#0f0; border-radius:3px; }
.terminal-screen::-webkit-scrollbar-track { background:#000; }
.terminal-line { display:flex; align-items:center; margin-bottom:10px; }
.prompt { flex-shrink:0; margin-right:5px; }
.user-input {
  background:none; border:none; outline:none; color:#0f0;
  font-family:monospace; font-size:1rem; flex:1;
  resize:none; overflow:hidden; min-height:20px;
}
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 0%,50%{opacity:1}50.01%,100%{opacity:0} }
.terminal-btn { margin-left:5px; cursor:pointer; background:#0f0; color:#000; border:none; padding:3px 8px; font-family:monospace; font-size:1rem; border-radius:3px; }

/* ============================
   RESPONSIVE BREAKPOINTS
   ============================ */

/* Small Laptops (1025px - 1366px) */
@media (max-width: 1366px) {
  .terminal-container {
    width: 550px;
    max-width: 90%;
  }
  .terminal-title {
    font-size: 1.8rem;
  }
  .terminal-screen {
    font-size: 0.95rem;
    padding: 18px;
  }
  .user-input {
    font-size: 0.95rem;
  }
  .terminal-btn {
    font-size: 0.95rem;
    padding: 3px 7px;
  }
}

/* Tablets (769px - 1024px) */
@media (max-width: 1024px) {
  .terminal-section {
    padding: 15px;
    min-height: 90vh;
  }
  .terminal-container {
    width: 500px;
    max-width: 85%;
  }
  .terminal-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
  .terminal-screen {
    font-size: 0.9rem;
    padding: 15px;
    max-height: 65vh;
  }
  .terminal-line {
    margin-bottom: 8px;
  }
  .user-input {
    font-size: 0.9rem;
  }
  .terminal-btn {
    font-size: 0.9rem;
    padding: 3px 6px;
  }
}

/* Mobile (481px - 768px) */
@media (max-width: 768px) {
  .terminal-section {
    padding: 12px;
    min-height: 85vh;
  }
  .terminal-container {
    width: 100%;
    max-width: 95%;
  }
  .terminal-title {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  .terminal-screen {
    font-size: 0.85rem;
    padding: 12px;
    max-height: 60vh;
    border-radius: 4px;
  }
  .terminal-line {
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .prompt {
    font-size: 0.85rem;
    margin-right: 4px;
  }
  .user-input {
    font-size: 0.85rem;
    min-width: 200px;
  }
  .terminal-btn {
    font-size: 0.85rem;
    padding: 2px 5px;
    margin-left: 4px;
    margin-top: 4px;
  }
}

/* Small Phones (≤480px) */
@media (max-width: 480px) {
  .terminal-section {
    padding: 8px;
    min-height: 80vh;
  }
  .terminal-container {
    width: 100%;
    max-width: 98%;
  }
  .terminal-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  .terminal-screen {
    font-size: 0.75rem;
    padding: 10px;
    max-height: 55vh;
    border-radius: 4px;
  }
  .terminal-line {
    margin-bottom: 5px;
  }
  .prompt {
    font-size: 0.75rem;
    margin-right: 3px;
  }
  .user-input {
    font-size: 0.75rem;
    min-width: 150px;
  }
  .terminal-btn {
    font-size: 0.75rem;
    padding: 2px 4px;
    margin-left: 3px;
    margin-top: 3px;
  }
}