/* General Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: linear-gradient(135deg, #f5f1e8, #f0ece3); /* Warm beige/cream gradient */
  color: #2c2c2c; /* Dark gray text */
}

/* Navigation Bar */
nav {
  background: rgba(255, 255, 255, 0.3); /* Glassy background */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3); /* Golden border */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

nav ul li {
  margin-right: 20px;
  position: relative;
  display: inline-block;
}

nav ul li a {
  color: #C9A961; /* Golden accent */
  text-decoration: none;
  padding: 5px 10px;
  font-weight: 600;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #D4AF37; /* Brighter golden on hover */
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu li a {
  display: block;
  padding: 10px;
  color: #C9A961; /* Golden accent */
  transition: background 0.3s ease;
}

.dropdown-menu li a:hover {
  background: rgba(212, 175, 55, 0.2); /* Golden tint on hover */
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Sections */
section {
  padding: 20px 20px; /* Reduce padding to minimize space */
  min-height: auto; /* Remove fixed height if not needed */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border between sections */
  margin: 0; /* Remove any default margin */
}

section h1 {
  text-align: center; /* Center align main headers */
  margin-top: 0;
  font-size: 2.5rem;
  color: #2c2c2c; /* Dark gray */
}

section h2,
section h3,
section p {
  text-align: left; /* Left-align subheaders and paragraphs */
  max-width: 800px;
  margin: 0 auto;
  color: #3a3a3a; /* Slightly lighter gray */
  margin-left: 15px; /* Uniform alignment */
}

/* Feature Box Styling */
.feature-box {
  background: rgba(255, 255, 255, 0.4); /* Lighter frosted glass effect */
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 20px; /* Reduce padding inside the feature box */
  margin: 10px auto; /* Add small spacing around the feature box */
  max-width: 1000px; /* Maximum width of the box */
  box-shadow: 0 4px 15px rgba(201, 169, 97, 0.15); /* Golden shadow */
}

.feature-box p {
  text-align: left; /* Align text to the left */
  margin-left: 0; /* Remove left margin */
  margin-right: 0; /* Remove right margin */
  max-width: none; /* Allow text to span the full width of the box */
  padding: 0 15px; /* Add padding for spacing inside the box */
  line-height: 1.6; /* Improve readability */
  margin-bottom: 20px; /* Add spacing below the explanatory text */
}

.feature-box h2,
.feature-box h3,
.feature-box p {
  margin-left: 15px; /* Align with code block */
  margin-bottom: 15px; /* Add spacing between paragraphs */
}

.feature-box pre {
  background: #2d2d2d;
  border-radius: 5px;
  padding: 15px;
  overflow-x: auto;
  margin: 15px 0;
  margin-left: 15px; /* Align with text */
}

.feature-box code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  color: inherit; /* Inherit colors from Prism.js theme */
}

/* Intro Box Styling */
.intro-box {
  text-align: center; /* Center align everything inside the intro box */
}

.intro-box h1,
.intro-box p {
  margin-left: 0; /* Remove left margin for centered alignment */
  text-align: center; /* Ensure all text is centered */
  max-width: 800px; /* Limit width for better readability */
  margin: 0 auto; /* Center the text block horizontally */
}

/* Style for links inside the intro box */
.intro-box a {
  color: #C9A961; /* Golden accent */
  text-decoration: none; /* Remove default underline */
  font-weight: 600; /* Make the link bold */
}

.intro-box a:hover {
  text-decoration: underline; /* Add underline on hover */
  color: #D4AF37; /* Brighter golden on hover */
}
/* Output Section */
.output-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.output-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .output-content {
    flex-direction: column;
  }
}

/* Image Grid Styling */
.image-grid {
  display: flex; /* Arrange images in a row */
  justify-content: space-between; /* Add spacing between images */
  gap: 10px; /* Add spacing between images */
  margin-top: 30px; /* Add spacing above the image grid */
  margin-bottom: 30px; /* Add spacing above the image grid */
}

.image-grid img {
  max-width: 50%; /* Each image takes up roughly half the width of the container */
  height: 500px; /* Fixed height for all images */
  object-fit: cover; /* Ensure images maintain aspect ratio and fit within the box */
  border-radius: 10px; /* Rounded corners for aesthetics */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Feature Image Styling */
.feature-image {
  max-width: 512px; /* Set maximum width to 512px */
  height: auto; /* Maintain aspect ratio */
  margin: 20px auto; /* Center the image horizontally */
  display: block; /* Ensure proper alignment */
  border-radius: 10px; /* Rounded corners for aesthetics */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Style for links inside the feature box */
.feature-box a {
  color: #ca3490; /* Match the pinkish theme */
  text-decoration: none; /* Remove default underline */
  font-weight: 600; /* Make the link bold */
}

.feature-box a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* Image Comparison Grid */
.image-comparison-grid {
  display: flex;
  justify-content: space-between; /* Space between the two columns */
  gap: 20px; /* Add spacing between columns */
  margin-top: 20px;
}

.image-column {
  display: flex;
  flex-direction: column; /* Stack images vertically */
  align-items: center; /* Center-align images and text */
  width: 48%; /* Each column takes up half the width */
}

.image-column h3 {
  text-align: center; /* Center-align the title */
  margin-bottom: 10px; /* Add spacing below the title */
  width: 100%; /* Ensure the title spans the full width of the column */
}

.image-column img {
  max-width: 100%; /* Ensure images fit within the column */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Rounded corners for aesthetics */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin-bottom: 10px; /* Add spacing between images */
}

/* Code Block Styling */
pre {
  background: #2d2d2d; /* Dark background */
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 15px 0;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  color: #f8f8f2 !important; /* Bright text color for uncolored parts */
}

/* Syntax Highlighting Customization */
.hljs-comment,
.hljs-quote {
  color: #7c7c7c !important; /* Gray for comments */
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #ff7b72 !important; /* Red for keywords */
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #d19a66 !important; /* Orange for numbers */
}

.hljs-string,
.hljs-doctag {
  color: #a5d6ff !important; /* Blue for strings */
}

.hljs-title,
.hljs-name,
.hljs-section,
.hljs-selector-id,
.hljs-selector-class {
  color: #61afef !important; /* Light blue for function names */
}

.hljs-type,
.hljs-built_in,
.hljs-builtin-name {
  color: #e5c07b !important; /* Yellow for types */
}

.hljs-attribute {
  color: #98c379 !important; /* Green for attributes */
}

.hljs-regexp,
.hljs-link {
  color: #c678dd !important; /* Purple for regex */
}

.hljs-meta {
  color: #abb2bf !important; /* Light gray for meta */
}

/* Final Scene Image Styling */
.final-image {
  max-width: 100%; /* Ensure the image fits within the container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Rounded corners for aesthetics */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin-bottom: 20px; /* Add spacing below the image */
}

/* Output Content Styling */
.output-content {
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  align-items: center; /* Center-align content */
  gap: 20px; /* Add spacing between the image and text */
}

/* ElfSight Widget Styling */
.elfsight-app-a5132ce8-3bea-4c1f-9199-249ddfe67dc2 {
  max-width: 100%; /* Ensure the widget fits within the container */
  margin: 20px auto; /* Center the widget horizontally */
  display: flex;
  justify-content: center; /* Center-align the widget */
}

.feature-box p {
  text-align: left; /* Align text to the left */
  margin-left: 0; /* Remove left margin */
  margin-right: 0; /* Remove right margin */
  max-width: none; /* Allow text to span the full width of the box */
  padding: 0 15px; /* Add padding for spacing inside the box */
  line-height: 1.6; /* Improve readability */
}

/* ElfSight Widget Styling */
.elfsight-app-c2baa672-69f7-4746-849f-317574cc23e6 {
  max-width: 100%; /* Ensure the widget fits within the container */
  margin: 20px auto; /* Center the widget horizontally */
  display: flex;
  justify-content: center; /* Center-align the widget */
}

.feature-box p {
  text-align: left; /* Align text to the left */
  margin-left: 0; /* Remove left margin */
  margin-right: 0; /* Remove right margin */
  max-width: none; /* Allow text to span the full width of the box */
  padding: 0 15px; /* Add padding for spacing inside the box */
  line-height: 1.6; /* Improve readability */
}

/* ElfSight Widget Styling */
.elfsight-app-0bda6a08-3d07-43f7-aece-3e484d7cf5cd {
  max-width: 100%; /* Ensure the widget fits within the container */
  margin: 20px auto; /* Center the widget horizontally */
  display: flex;
  justify-content: center; /* Center-align the widget */
}

.feature-box p {
  text-align: left; /* Align text to the left */
  margin-left: 0; /* Remove left margin */
  margin-right: 0; /* Remove right margin */
  max-width: none; /* Allow text to span the full width of the box */
  padding: 0 15px; /* Add padding for spacing inside the box */
  line-height: 1.6; /* Improve readability */
}

/* Made By Styling */
.made-by {
  font-family: 'Satisfy', cursive; /* Fancy cursive font */
  font-size: 1.8rem; /* Larger font size */
  color: #ca3490; /* Pink color matching theme */
  text-align: center; /* Center-align the text */
  margin-top: 25px; /* Add spacing above the text */
  font-weight: 400;
  letter-spacing: 1px; /* Add slight spacing between letters */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* References Section Styling */
#references {
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.1); /* Frosted glass effect */
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
}

#references h1 {
  text-align: center; /* Center align the title */
  margin-bottom: 20px;
}

#references h2 {
  margin-top: 20px; /* Add spacing above each subsection */
  color: #ca3490; /* Match the theme color */
}

#references ul {
  list-style-type: disc; /* Use bullet points */
  padding-left: 20px; /* Indent the list items */
  margin-bottom: 15px;
}

#references li {
  margin-bottom: 5px; /* Add spacing between list items */
}

#references a {
  color: #ca3490; /* Match the theme color */
  text-decoration: none; /* Remove underline */
  font-weight: 600; /* Make links bold */
}

#references a:hover {
  text-decoration: underline; /* Add underline on hover */
}