/* General Styles */
body {
  background-color: #1B1106; /* Black amber background */
  color: #FFB52A; /* Glowing amber text */
  font-family: 'Kanit', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden; /* Prevent scrolling */
}

/* Loading Screen */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1B1106; /* Black amber background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#loading-text {
  color: #FFB52A; /* Glowing amber text */
  font-family: 'Courier New', monospace;
  font-size: 24px;
  text-shadow: 0 0 8px #FFB52A; /* Light glow effect */
}

@keyframes blink {
  0%, 100% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
}

/* Terminal Container */
#terminal {
  position: relative;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: #1B1106; /* Match body background */
  border: 2px solid #FFB52A; /* Glowing amber border */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 50px; /* Space for fixed header */
}

#terminal-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000000; /* Black background for contrast */
  color: #FFB52A; /* Glowing amber text */
  font-size: 16px;
  border-bottom: 2px solid #FFB52A;
  text-shadow: 0 0 5px #FFB52A; /* Light glow effect */
  z-index: 1000;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

#quick-nav {
  display: flex;
  font-size: 14px;
  color: #FFB52A; /* Glowing amber */
  text-shadow: 0 0 5px #FFB52A; /* Glow for navigation */
}

#quick-nav .nav-link {
  margin-left: 15px;
}

#quick-nav a {
  color: #C35815; /* Dark amber links */
  text-decoration: none;
  text-shadow: 0 0 5px #C35815; /* Light glow for links */
}

#quick-nav a:hover {
  text-decoration: underline;
  color: #FFB52A; /* Glow on hover */
}

/* Terminal Body */
#terminal-body {
  display: flex;
  flex-direction: column;
  padding: 15px;
  flex: 1;
  overflow-y: auto; /* Scrollable output */
}

/* Title Section */
#title-section {
  margin-bottom: 20px;
}

#main-title {
  color: #FFB52A; /* Glowing amber */
  font-family: 'Silkscreen', cursive;
  font-size: 36px;
  margin: 0;
  text-shadow: 0 0 8px #FFB52A; /* Stronger glow for title */
}

#subtitle {
  color: #FFB52A; /* Amber subtitle */
  font-family: 'Silkscreen', cursive;
  font-size: 18px;
  margin: 10px 0;
  text-shadow: 0 0 6px #FFB52A; /* Subtle glow */
}

#instructions {
  color: #FFB52A; /* Amber instructions */
  font-size: 16px;
  text-shadow: 0 0 4px #FFB52A; /* Subtle glow */
}

/* Command Form */
#command-form {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#command-form label {
  margin-right: 10px;
  color: #FFB52A;
  font-family: 'Kanit', sans-serif;
  font-size: 18px;
  text-shadow: 0 0 4px #FFB52A; /* Light glow */
}

#command-input {
  flex: 1;
  background: #1B1106;
  color: #FFB52A;
  border: 2px solid #C35815; /* Dark amber border */
  outline: none;
  font-family: 'Kanit', sans-serif;
  font-size: 18px;
  padding: 5px;
  text-shadow: 0 0 4px #FFB52A; /* Glow for input text */
}

#command-input:hover,
#command-input:focus {
  border-color: #FFB52A; /* Amber border on hover/focus */
  box-shadow: 0 0 8px #FFB52A; /* Glow effect */
}

/* Output Area */
#output {
  flex: 1;
  overflow-y: auto;
  background: #1B1106;
  padding: 10px;
  border: 1px solid #FFB52A; /* Amber border */
  white-space: pre-wrap; /* Preserve line breaks */
  scroll-behavior: smooth; /* Smooth scrolling for new entries */
  color: #FFB52A; /* Glowing amber text */
  text-shadow: 0 0 4px #FFB52A; /* Subtle glow */
}

/* User Command */
.user-command {
  margin-bottom: 2px; /* Minimal spacing below user command */
  color: #C35815; /* Dark amber for user commands */
  font-weight: bold;
  text-shadow: 0 0 3px #C35815; /* Subtle glow */
}

/* System Response */
.system-response {
  margin-top: 2px; /* Minimal spacing above system response */
  color: #FFB52A; /* Amber for system responses */
  text-shadow: 0 0 3px #FFB52A; /* Subtle glow */
}

/* About Section Layout */
.about-container {
  margin: 0px; /* General margin for the container */
  text-align: left; /* Ensure everything is left-aligned */
  display: flex;
  flex-direction: column; /* Stack all elements vertically */
  gap: 0px; /* Consistent spacing between sections */
}

/* About Header (Image + Name + Title) */
.about-header {
  display: flex;
  align-items: center;
  margin-bottom: 0px; /* Slight margin for separation */
}

.about-icon {
  background-color: #f3d0ba;
  width: 50px; /* Fixed size for the image */
  height: 50px;
  object-fit: cover; /* Prevent distortion */
  padding: 5px;
  margin-right: 10px; /* Space between image and text */
  border: 2px solid #C35815; /* Add a border for style */
  border-radius: 5px; /* Optional: Rounded corners for polish */
}

.about-text {
  display: flex;
  flex-direction: column; /* Stack name and title vertically */
  text-align: left; /* Align text to the left */
  gap: 2px; /* Minimal space between name and title */
}

/* About Name */
.about-name {
  font-size: 25px; /* Larger font size for the name */
  font-weight: bold;
  color: #FFB52A; /* Glowing amber */
  text-shadow: 0 0 4px #FFB52A; /* Subtle glow */
  margin: 0; /* Remove unnecessary spacing */
}

/* About Title */
.about-title {
  font-size: 14px; /* Smaller font for the title */
  color: #C35815; /* Dark amber */
  text-shadow: 0 0 3px #C35815; /* Subtle glow */
  margin: 0; /* Remove unnecessary spacing */
}

/* About Bio */
.about-bio {
  margin: 0px; /* Consistent spacing for compactness */
  color: #FFB52A; /* Amber text */
  text-shadow: 0 0 4px #FFB52A; /* Subtle glow */
  line-height: 1.4; /* Readable line spacing */
  text-align: left;
}

/* About Links */
.about-links {
  display: flex;
  flex-wrap: wrap; /* Allow links to wrap on smaller screens */
  gap: 20px; /* Consistent spacing between links */
  margin-top: 0px; /* Minimal spacing above links */
  text-align: left;
}

.about-links a {
  font-size: 14px; /* Uniform link font size */
  color: #C35815; /* Dark amber links */
  text-shadow: 0 0 0px #FFB52A; /* Subtle glow effect */
  text-decoration: none;
}

.about-links a:hover {
  color: #FFB52A; /* Highlight on hover */
  text-decoration: underline;
}

/* About Note Styling */
.about-note {
  margin-top: 0px; /* Space above the note */
  font-size: 14px; /* Slightly smaller font size */
  color: #FFB52A; /* Amber color for the text */
  text-shadow: 0 0 3px #FFB52A; /* Subtle glow effect */
  text-align: left; /* Align the text to the left */
}

/* Highlighted Text */
.highlight {
  color: #f3d0ba; /* Light amber for highlighted text */
  font-weight: bold;
}



/* Social Media Section */
.social-item {
  display: flex;
  align-items: center;
  margin: 8px 0; /* Space between items */
}

.social-icon {
  width: 24px; /* Adjust size as needed */
  height: 24px;
  margin-right: 10px; /* Space between icon and text */
}

#output .social-item a {
  color: #C35815; /* Dark amber links */
  text-decoration: none;
  font-size: 16px;
  text-shadow: 0 0 4px #C35815; /* Subtle glow */
}

#output .social-item a:hover {
  color: #FFB52A; /* Glowing amber on hover */
  text-decoration: underline;
}



  /* Color Pop */
  .pop {
    color: #f3d0ba;
    font-style: italic;
    font-weight: bold;
  }

/* Responsive Design */
@media (max-width: 768px) {
  #terminal-header {
      flex-direction: column;
      align-items: flex-start;
  }
  #quick-nav {
      flex-wrap: wrap;
      margin-top: 10px;
  }
  #quick-nav .nav-link {
      margin-left: 0;
      margin-right: 10px;
      margin-bottom: 5px;
  }
  #terminal-body {
    padding-top: 30px;
  }
  

}











/* Modal Container */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* On top of other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
}

/* Modal Content */
.modal-content {
  background-color: #000;
  margin: 15% auto;
  padding: 20px;
  border: 2px solid #FFB52A;
  width: 80%;
  max-width: 600px;
  color: #FFB52A;
  font-family: 'Kanit', sans-serif;
  box-shadow: 0 0 3px #FFB52A;
  text-shadow: 0 0 5px #FFB52A;
}

/* Close Button */
.close-btn {
  color: #FFB52A;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  color: #C35815; /* Dark amber hover */
}