body {
  font-family: 'Courier New', monospace;
  margin: 0;
  padding: 0;
  color: #e0e0e0;
  line-height: 1.6;
  background: 
  linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(26, 13, 46, 0.7) 100%),
  url('../images/GIF-by-Omer-Studios.gif');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(112, 0, 71, 0.436), rgba(0,0,0,0.95)),
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC');
  z-index: -1;
  opacity: 0.75;
}

.full-width-header {
  width: 100%;
  background: #000;
  border-bottom: 2px solid #ff00ff;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  padding: 5px 0;
  position: relative;
}

.phoneholm-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  position: relative;
  padding: 5px 0;
}

.phoneholm-header:before,
.phoneholm-header:after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, #ff00ff, #ffff00);
}

.phoneholm-header h1 {
  background: #000;
  padding: 0 20px;
  font-size: 22px;
  margin: 0;
  background: linear-gradient(to right, #ff00ff, #ffff00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.sparkle {
  position: absolute;
  font-size: 10px;
  color: #ffff00;
  animation: sparkle 2s infinite;
  opacity: 0;
}

.sparkle-1 { top: -10px; left: 10%; animation-delay: 0.1s; }
.sparkle-2 { top: 3px; left: 15%; animation-delay: 0.3s; }
.sparkle-3 { top: 15px; left: 8%; animation-delay: 0.5s; }
.sparkle-4 { top: -8px; right: 12%; animation-delay: 0.2s; }
.sparkle-5 { top: 7px; right: 18%; animation-delay: 0.4s; }
.sparkle-6 { top: 20px; right: 10%; animation-delay: 0.6s; }
.sparkle-7 { top: -3px; left: 50%; transform: translateX(-50%); animation-delay: 0.7s; }
.sparkle-8 { bottom: -10px; left: 20%; animation-delay: 0.8s; }
.sparkle-9 { bottom: -8px; right: 25%; animation-delay: 0.9s; }
.sparkle-10 { top: 50%; left: 30%; animation-delay: 1s; }
.sparkle-11 { top: 50%; right: 30%; animation-delay: 1.1s; }

@keyframes sparkle {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(40deg); }
}

.main-container {
  max-width: 900px;
  margin: 0 auto 30px;
  padding: 0 20px;
}

.nav {
  text-align: center;
  margin: 10px 0 25px 0; /* changed from margin: 25px 0; */
}

.nav a {
  display: inline-block;
  padding: 5px 15px;
  background: #000;
  border: 2px solid #ffff00;
  color: #ffff00;
  text-decoration: none;
  transition: all 0.3s;
}

.nav a:hover {
  background: #ffff00;
  color: #000;
}

.page-title {
  text-align: center;
  margin: 0 0 35px 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.page-title:before,
.page-title:after {
  content: "";
  flex: 1;
  height: 3px;
  background: linear-gradient(to right, #ff00ff, #ffff00);
}

.page-title h1 {
  background: #000;
  padding: 0 25px;
  font-size: 32px;
  margin: 0;
  color: #ffff00;
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  position: relative;
  letter-spacing: 1px;
}

.tagline {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  font-size: 20px;
  text-align: center;
  color: #ff00ff;
  font-weight: bold;
  margin: 20px 0;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
  border-top: 1px dotted #ffff00;
  border-bottom: 1px dotted #ffff00;
  padding: 10px 0;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Glitch Effect */
.glitched-text {
  position: relative;
  display: inline-block;
  color: #fff;
}

.glitched-text:hover {
  animation: glitch 0.3s linear infinite;
}

.glitched-text:hover::before,
.glitched-text:hover::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
}

.glitched-text:hover::before {
  color: #ff00ff;
  z-index: -1;
  animation: glitch 0.3s linear infinite;
}

.glitched-text:hover::after {
  color: #00ffff;
  z-index: -2;
  animation: glitch 0.3s linear reverse infinite;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

.force-glitch {
  animation: glitch 0.3s linear infinite !important;
}
.force-glitch::before,
.force-glitch::after {
  content: attr(data-text) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #000 !important;
}
.force-glitch::before {
  color: #ff00ff !important;
  z-index: -1 !important;
  animation: glitch 0.3s linear infinite !important;
}
.force-glitch::after {
  color: #00ffff !important;
  z-index: -2 !important;
  animation: glitch 0.3s linear reverse infinite !important;
}

/* VHS Caption */
.vhs-caption {
  font-style: italic;
  text-align: center;
  color: #ffff00;
  padding: 10px;
  position: relative;
}

.vhs-line {
  display: block;
  position: relative;
  margin: 8px 0;
  color: #ffff00 !important;
}

.vhs-line:hover {
  text-shadow: none !important;
  color: #ffff00 !important;
}

.vhs-caption:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 2px;
  background: linear-gradient(to right, transparent, #ff00ff, #ffff00, #ff00ff, transparent);
}

/* Textiles Grid */
.textiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Forces exactly 3 columns */
  row-gap: 0px;
  column-gap: 20px;
  margin: 40px 0;
}

.textile-card {
  border: 2px solid #ff00ff;
  padding: 15px;
  margin-bottom: 30px;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: auto;
  box-sizing: border-box;
  min-height: 450px; /* Minimum height, but can grow */
}

.textile-card:hover {
  box-shadow: 0 5px 15px rgba(255, 0, 255, 0.3);
  transform: translateY(-3px);
}

.textile-card:before {
  content: "✧･ﾟ:*";
  position: absolute;
  top: -15px;
  left: 10px;
  color: #ffff00;
  background: #000;
  padding: 0 5px;
}

.textile-card h3 {
  margin: 10px 0 8px;
  color: #ffff00;
  text-shadow: 2px 2px 0 #ff00ff;
  text-align: center;
  font-size: 1.3em;
  letter-spacing: 1px;
}

.textile-card img {
  width: calc(100% - 10px);
  border: 3px solid #ffff00;
  margin: 0 auto 15px;
  background: #000;
  padding: 5px;
  display: block;
  box-sizing: border-box;
  transition: all 0.3s;
}

.textile-card:hover img {
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.5);
}

/* Meta info row */
.textile-meta {
  font-size: 0.9em;
  color: #ff00ff;
  margin: 0 auto 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 90%;
  margin-bottom: 0px; /* Adjusted for spacing */
}

.textile-meta span {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #ff00ff;
  border-radius: 12px;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

.textile-meta span {
  display: inline-block;
  padding: 3px 5px;
}

.textile-meta span:not(:last-child)::after {
  content: "•";
  margin: 0 5px;
  color: #ffff00;
}

/* Create a wrapper for the main content that can scroll if needed */
.textile-card > *:not(.buttons-container) {
  flex-shrink: 1; /* Allow content to shrink */
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7em;
  margin-left: 10px;
  font-weight: bold;
  border-radius: 3px;
}

.digital {
  background: #000;
  color: #00ffff;
  border: 1px solid #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

.painting {
  background: #000;
  color: #ff00ff;
  border: 1px solid #ff00ff;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}
.collection {
  background: #000;
  color: #ffff00;
  border: 1px solid #ffff00;
  text-shadow: 0 0 5px rgba(255, 255, 0, 0.7);
}

/* KO-FI BUTTON */
.kofi-button {
  display: inline-block;
  padding: 5px 15px;
  background: #000;
  border: 2px solid #ffff00;
  color: #ffff00;
  text-decoration: none;
  transition: all 0.3s;
  margin-top: 10px;
  margin-right: 5px;
}

.kofi-button:hover {
  background: #ffff00;
  color: #000;
}

/* FOOTER */
html, body {
  height: 100%; 
}

body {
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1; 
}

footer {
  margin-top: auto; 
}


.textile-card .buttons-container {
  margin-top: auto; 
  display: flex;
  justify-content: center;
  padding-top: 10px;
  width: 100%;
}

.buttons-container {
  margin-top: auto; 
  padding-top: 0; 
  gap: 10px; /* gap between buttons */
  min-height: 40px; /* consistent height */
  align-items: center; 
}

.kofi-button, .project-button {
  padding: 5px 15px;
  background: #000;
  border: 2px solid #ffff00;
  color: #ffff00;
  text-decoration: none;
  transition: all 0.3s;
  margin: 0 5px 0 0;
}

/* For project buttons only (not affecting Ko-Fi floating widget) */
.project-button {
  display: inline-block;
  padding: 5px 15px;
  background: #000;
  border: 2px solid #ffff00;
  color: #ffff00;
  text-decoration: none;
  transition: all 0.3s;
  margin-top: 10px;
  margin-right: 5px;
}

.project-button:hover {
  background: #ffff00;
  color: #000;
}

/* MODAL SYSTEM */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  z-index: 100;
  align-items: flex-start; /* Changed from center to prevent vertical centering */
  justify-content: center;
  overflow-y: auto;
  padding: 30px 0;
}

.modal-content {
  text-align: center;
  margin: 20px auto;
  padding: 10px 20px 20px; /* Reduced top padding from 20px to 10px */
  border: 3px solid #ff00ff;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
  width: 800px; /* Increased from 700px */
  max-width: 92%; /* Increased from 90% */
  max-height: 85vh; /* Slightly reduced from 90vh */
  color: #e0e0e0;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  overflow-y: auto;
  padding-bottom: 60px; /* Make space for fixed button */
}

.modal-content:before {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffff00;
  font-size: 14px;
  background: #000;
  padding: 0 10px;
}

/* Reduce space between text elements */
.modal-content p {
  margin: 5px 0; /* Reduced spacing between paragraphs */
  line-height: 1.3; /* Slightly tighter line height */
}

.modal-content h2 {
  margin: 0px 0 0px; /* Reduced margin below heading */
 margin-top: 0; /* Remove top margin of title */
}

.modal-image {
  width: 100%;
  max-width: 400px;
  border: 3px solid #ffff00;
  margin: 15px auto;
  background: #000;
  padding: 5px;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffff00;
  font-size: 24px;
  cursor: pointer;
  background: #000;
  border: 2px solid #ff00ff;
  width: 40px; /* Increased from 30px */
  height: 40px; /* Increased from 30px */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 101; /* Ensure it's above other elements */
  border-radius: 50%; /* Optional: Makes it circular */
  padding: 0; /* Remove any default padding */
  margin: 0; /* Remove any default margins */
}

.close-modal:hover {
  background: #ff00ff;
  color: #000;
}

/* Buttons container at bottom */
.modal-buttons-container {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 0px 0;
  background: rgba(0, 0, 0, 0.9);
  border-top: 1px solid #ff00ff;
}

/* Modal gallery styles */
.modal-gallery {
  width: 100%;
  max-width: 600px; /* Increased from 500px */
  margin: 0 auto;
}

/* Make the main image a bit wider too */
.modal-image {
  width: 100%;
  max-width: 400px; /* Increased from 400px */
  height: auto;
  border: 3px solid #ffff00;
  margin: 10px auto 5px;
  background: #000;
  padding: 5px;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
  object-fit: contain;
}

.modal-title {
  color: #ffff00;
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  font-size: 2.1rem;
  margin-top: -15px; /* Increased from -15px to move it up more */
  margin-bottom: 15px;
  padding: 0 20px;
  text-align: center;
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: bold;
}

.modal-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.modal-main-image {
  object-fit: contain;
  border: 3px solid #ffff00;
  margin: 0 auto;
  background: #000;
  padding: 5px;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
  max-width: 100%;
  max-height: 55vh; /* Slightly reduced */
}

.modal-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
  margin-bottom: 10px; /* Reduced from default */
}

.modal-thumb {
  width: 70px;
  height: 70px;
  border: 2px solid #ff00ff;
  padding: 3px;
  background: #000;
  object-fit: cover;
  transition: all 0.3s;
  cursor: pointer;
}

.modal-thumb:hover, 
.modal-thumb.active {
  border-color: #ffff00;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.modal-thumb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.modal-thumb-caption {
  font-size: 0.8em;
  margin-top: 5px;
  color: #ffff00;
}

/* Enhanced Modal Text Styles */
.modal-description {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dotted #ff00ff;
  font-size: 1.05em; /* Slightly larger */
  line-height: 1.5; /* Better readability */
}

.modal-description p {
  margin: 12px 0; /* More breathing room */
}

.modal-description strong {
  color: #ff00ff;
}

/* Adjust the scrollable content area */
.modal-scrollable {
  max-height: calc(85vh - 80px); /* Account for buttons space */
  overflow-y: auto;
  padding-bottom: 10px; /* Extra space before buttons */
}

/* Custom scrollbar styling */
.modal-scrollable::-webkit-scrollbar {
  width: 10px;
}

.modal-scrollable::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.modal-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(#ff00ff, #ffff00);
  border-radius: 5px;
  border: 1px solid #000;
}

.modal-scrollable::-webkit-scrollbar-thumb:hover {
  background: #ffff00;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 40px;
  color: #ff00ff;
  font-size: 0.9em;
  border-top: 1px dotted #ff00ff;
  padding: 10px 0 10px;
  position: relative;
  z-index: 10;
  min-height: 20px;
  font-family: 'Courier New', monospace;
  width: 100%;
  background: #000 !important; /* Solid black */
  position: relative; /* stays above other elements */
  z-index: 10; 
  box-shadow: 0 0 20px #000; /* soft edge to blend */
}

/* CRT Effect */
.crt-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.1) 50%
  );
  background-size: 100% 4px;
  z-index: 10;
  pointer-events: none;
  opacity: 0.4;
}

/* Image captions in modal */
.modal-image-container {
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}

.modal-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #ffff00;
  padding: 5px 10px;
  font-size: 0.9em;
  text-align: center;
  border-top: 1px solid #ff00ff;
}

.modal-thumb-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #ffff00;
  padding: 2px 5px;
  font-size: 0.7em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-thumb-container {
  position: relative;
  display: inline-block;
}

/* Collection caption (permanent) */
.collection-caption {
  width: 100%;
  padding: 8px 0;
  background: rgba(0,0,0,0.8);
  color: #ffff00;
  text-align: center;
  font-weight: bold;
  border-top: 1px solid #ff00ff;
  border-bottom: 1px dotted #ff00ff;
}

/* Image-specific caption (changes) */
.image-specific-caption {
  width: 100%;
  padding: 8px 0;
  background: rgba(0,0,0,0.8);
  color: #ff00ff;
  text-align: center;
  font-style: italic;
  border-bottom: 1px solid #ffff00;
}