/* General Terminal Styles */
body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background-color: #000; /* Black background */
    color: #00FF00; /* Terminal green text */
    font-family: 'Silkscreen', monospace;
  }
  
  #terminal {
    position: absolute; /* Allow terminal to fill the entire window */
    top: 0;
    left: 0;
    width: 100%; /* Ensure terminal spans full width */
    height: 100%; /* Full viewport height */
    border: 2px solid #00FF00; /* Flat green border */
    background-color: #000; /* Black background */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow vertical scrolling if content overflows */
    padding: 10px; /* Add padding for content */
    box-sizing: border-box; /* Include padding in the width calculation */
  }
  
  /* Header */
  #header {
    margin-bottom: 20px;
    text-align: left; /* Align text to the left */
  }
  
  .ascii-art {
    color: #00FF00; /* Terminal green */
    margin: 0;
    line-height: 1.2;
    font-size: 12px; /* Default font size for ASCII art */
    overflow-wrap: break-word; /* Allow long lines to wrap */
    white-space: pre-wrap; /* Preserve ASCII spacing */
  }
  
  /* Adjust ASCII art for smaller screens */
  @media (max-width: 768px) {
    .ascii-art {
      font-size: 10px; /* Scale down ASCII art */
    }
  }
  
  .tagline {
    color: #FFF; /* White text */
    font-size: 14px;
    margin-top: 10px;
  }
  
/* Directory Section */
#directory {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px; /* Space between columns */
  }
  
  .directory-category {
    grid-column: span 2; /* Make category titles span both columns */
    color: #FFF; /* White text for categories */
    font-size: 16px;
    margin-top: 20px; /* Add space above categories */
    text-transform: uppercase;
  }
  
  .directory-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .directory-list li {
    margin-bottom: 10px;
    color: #00FF00; /* Terminal green */
  }
  
  .directory-list li a {
    color: #FF99CC; /* Light pink links */
    text-decoration: none;
  }
  
  .directory-list li a:hover {
    color: #FFCCE5; /* Softer pink hover effect */
  }
  
  .node {
    color: #FFF; /* White node numbers */
    font-weight: bold;
    margin-right: 10px;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    #directory {
      grid-template-columns: 1fr; /* Switch to one column on smaller screens */
      gap: 10px; /* Reduce gap for smaller screens */
    }
  }
    
  /* Footer */
  #footer {
    text-align: left; /* Align footer text to the left */
    color: #FFF; /* White text */
    font-size: 12px;
    padding: 10px 0;
  }
  
  /* Mobile Responsiveness */
  @media (max-width: 768px) {
    #terminal {
      padding: 5px; /* Reduce padding on smaller screens */
    }
  
    .section-title {
      font-size: 16px; /* Scale down section titles */
    }
  
    .directory-list li {
      font-size: 14px; /* Scale down directory text */
    }
  }



  /* Base Glitch Effect */
.glitch {
    position: relative;
    display: inline-block;
    color: #FFF; /* Base text color */
    font-weight: bold;
    text-shadow: 
      2px 2px 0 #FF1CC0, /* Pink shadow */
      -2px -2px 0 #B131FA; /* Purple shadow */
  }
  
  .glitch::before,
  .glitch::after {
    content: attr(data-text); /* Use the same text as the base */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #FF1CC0; /* Pink for the top layer */
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* Start clipped */
    animation: glitch 2s infinite ease-in-out;
  }
  
  .glitch::after {
    color: #B131FA; /* Purple for the bottom layer */
    animation-delay: 0.2s; /* Offset for second layer */
  }
  
  @keyframes glitch {
    0% {
      clip: rect(0, 0, 0, 0);
      transform: translate(0, 0);
    }
    20% {
      clip: rect(2px, 100vw, 18px, 0);
      transform: translate(-2px, -2px);
    }
    40% {
      clip: rect(0, 100vw, 12px, 0);
      transform: translate(2px, 2px);
    }
    60% {
      clip: rect(4px, 100vw, 22px, 0);
      transform: translate(1px, -1px);
    }
    80% {
      clip: rect(6px, 100vw, 14px, 0);
      transform: translate(-1px, 1px);
    }
    100% {
      clip: rect(0, 0, 0, 0);
      transform: translate(0, 0);
    }
  }