.body {
    font-family: 'JetBrains Mono', monospace;

}
/* Terminal Styling */
.terminal {
    background-color: #000;
    border: 1px solid #cba6f7;
    box-shadow: 0 0 20px rgba(203, 166, 247, 0.2);
    transition: all 0.3s ease;
    position: relative;
  }
  
  .terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(203, 166, 247, 0.1);
    pointer-events: none;
  }
  
  .terminal-focused {
    box-shadow: 0 0 25px rgb(203, 166, 247);
  }
  
  /* Cursor and Text */
  .cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: #cdd6f4;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
  }
  
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  
  .terminal-header {
    position: absolute;
    top: 8px;
    right: 10px; /* Increased from 8px to account for scrollbar width */
    display: flex;
    gap: 6px;
    z-index: 10;
  }
  
  .terminal-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  
  .terminal-button:hover {
    opacity: 0.8;
  }

  #terminal-output {
    white-space: pre;
    font-family: 'JetBrains Mono', monospace;
    padding-right: 1.5rem; /* Add space for scrollbar */
    margin-right: 4px; /* Prevent text underflow */
  }

  /* Scrollbar small and short */
  #terminal-output::-webkit-scrollbar {
    width: 4px;
    background: #1a1a1a;
  }
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
  }
  
  @keyframes load {
    from { width: 0; }
    to { width: var(--target-width); }
  }
  
  .skill-bar {
    display: inline-block;
    overflow: hidden;
    animation: load 1.5s ease-out forwards;
  }

  .new-tab-warning {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }