/**
 * CSS VARIABLES FOR THEMES
 */
:root {
  /* Light Mode Defaults */
  --bg-color: #F8F8F8;
  --text-color: #333;
  --secondary-text: #666;
  --card-bg: rgba(202, 230, 190, 0.3);
  --card-hover-bg: rgba(202, 230, 190, 0.5);
  --border-color: #B7D1A0;
  --link-color: #0078B4;
  --link-hover: #005580;
  --green-accent: #468847;
  --grid-line: rgba(0,0,0,0.05);
  --shadow-light: rgba(0, 0%, 0%, 0.1);
  --btn-bg: rgba(202, 230, 190, 0.75);
  --btn-border: #B7D1A0;
  --btn-hover-bg: rgb(188, 228, 170);
  --btn-text: #468847;
  --nav-color: #167196;
  --footer-color: #167196;
  --alert-error-bg: #F2DEDE;
  --alert-error-border: #EED3D7;
  --alert-error-text: #aa4342;
  --alert-info-bg: #D9EDF7;
  --alert-info-border: #BCE8F1;
  --alert-info-text: #167196;
}
html.dark {
  /* Dark Mode Overrides */
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --secondary-text: #ccc;
  --card-bg: rgba(70, 136, 71, 0.2);
  --card-hover-bg: rgba(70, 136, 71, 0.4);
  --border-color: #5a5a5a;
  --link-color: #4da6ff;
  --link-hover: #3399ff;
  --green-accent: #6bb76a;
  --grid-line: rgba(255,255,255,0.05);
  --shadow-light: rgba(0, 0%, 0%, 0.5);
  --btn-bg: rgba(70, 136, 71, 0.3);
  --btn-border: #5a5a5a;
  --btn-hover-bg: rgba(70, 136, 71, 0.5);
  --btn-text: #90ee90;
  --nav-color: #4da6ff;
  --footer-color: #4da6ff;
  --alert-error-bg: #3d1f1f;
  --alert-error-border: #5a2a2a;
  --alert-error-text: #ff9999;
  --alert-info-bg: #1f3d4d;
  --alert-info-border: #2a5a7a;
  --alert-info-text: #99ccff;
}
/**
 * USE BORDER BOX
 */
*,
*:before,
*:after {
    box-sizing: border-box;
}
/**
  * PAGE LAYOUT
  */
html {
  scroll-behavior: smooth;
}
body {
    background-color: var(--bg-color);
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 10px 10px;
    background-attachment: fixed;
    color: var(--text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4; /* Improved line height for better readability */
    margin: 0;
    padding: 10px; /* Reduced initial padding for smaller screens */
    text-shadow: 0 1px hsla(0, 0%, 100%, .5);
    text-rendering: optimizelegibility;
    min-height: 100vh; /* Changed to min-height for better flex support */
    opacity: 1 !important;
    overflow-x: hidden;
    transition: all 0.3s ease;
}
body.loaded {
  animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.grill-wrapper {
    background-image: var(--png-bg);
    @supports (background-image: var(--avif-bg)) {
        background-image: var(--avif-bg);
    }
    background-attachment: fixed;
    background-position: 85% 100%;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.container {
    margin: 0 auto;
    max-width: 750px;
    width: 100%; /* Ensure full width utilization */
    padding: 0 15px; /* Add side padding for small screens */
}
/**
 * ELEMENTS
 */
/* images */
input[type=image], img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
/* links */
a {
    color: var(--link-color);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--link-hover);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
a:hover::after {
  width: 100%;
}
a:hover,
a:focus,
a:active {
    color: var(--link-hover);
}
a:focus {
    outline: thin dotted var(--text-color);
}
/**
 * THEME TOGGLE BUTTON
 */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 50%;
  color: var(--btn-text);
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 10px var(--shadow-light);
}
.theme-toggle:hover {
  background: var(--btn-hover-bg);
  transform: scale(1.05);
}
.theme-toggle:focus {
  outline: 2px solid var(--link-color);
}
/**
 * JUMBOTRON
 */
.jumbotron {
    margin: 40px auto; /* Reduced top/bottom for smaller screens */
    text-align: center;
    padding: 0 10px; /* Add padding for content */
}
.jumbotron h1 {
    color: inherit;
    font-family: inherit;
    font-size: clamp(2rem, 8vw, 4.5rem); /* Responsive font size */
    font-weight: bold;
    line-height: 1.1;
    margin: 10px 0;
    cursor: default;
    text-rendering: optimizelegibility;
    animation: slideInDown 0.8s ease-out;
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}
.jumbotron .lead {
    font-size: clamp(1rem, 3vw, 1.3rem); /* Responsive lead text */
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--secondary-text);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.jumbotron .btn {
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 4px;
    color: var(--btn-text);
    cursor: pointer;
    display: inline-block;
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* Responsive button text */
    padding: clamp(12px, 3vw, 28px) clamp(24px, 5vw, 48px); /* Responsive padding */
    text-shadow: 0 1px hsla(0, 0%, 100%, .5);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Prevent text wrapping */
}
.jumbotron .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}
.jumbotron .btn:hover::before {
  left: 100%;
}
.jumbotron .btn:hover,
.jumbotron .btn:active,
.jumbotron .btn:focus,
.jumbotron .btn.drop {
    background-color: var(--btn-hover-bg);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-light);
}
.jumbotron .small-btn {
  font-size: 14px;
  padding: 8px 16px;
  margin-top: 10px;
  display: inline-block;
}
/**
 * DEVELOPER SECTION
 */
.developers-section {
  margin: 30px 0; /* Adjusted margin */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0 10px; /* Add padding for edges */
}
.developer-card {
  flex: 1 1 300px; /* Changed to allow growth but min 300px */
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  transition: all 0.4s ease-in-out;
  max-width: 350px; /* Increased max-width slightly for better balance */
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease-out forwards;
  position: relative;
  overflow: hidden;
}
.developer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(183, 209, 160, 0.1), transparent);
  transition: left 0.5s;
}
.developer-card:hover::before {
  left: 100%;
}
.developer-card:hover {
  background-color: var(--card-hover-bg);
  box-shadow: 0 4px 12px var(--shadow-light);
  transform: translateY(-5px);
}
.developer-card:nth-child(1) { animation-delay: 0.1s; }
.developer-card:nth-child(2) { animation-delay: 0.2s; }
.developer-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 15px; /* Center the photo */
  display: block; /* Ensure block display */
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}
.developer-card:hover .developer-photo {
  transform: scale(1.05);
}
.developer-name {
  font-size: clamp(1.2rem, 4vw, 1.5rem); /* Responsive name size */
  font-weight: bold;
  color: var(--green-accent);
  margin-bottom: 10px;
  position: relative;
  text-align: center; /* Center name */
}
.developer-name::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--green-accent);
  transition: width 0.3s ease;
}
.developer-card:hover .developer-name::after {
  width: 50px;
}
.developer-bio {
  font-size: clamp(0.9rem, 2.5vw, 1rem); /* Responsive bio size */
  margin-bottom: 15px;
  color: var(--text-color);
  text-align: center; /* Center bio */
}
.developer-links {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Increased gap for touch targets */
  align-items: center; /* Center links */
}
.developer-links a {
  color: var(--nav-color);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px; /* Add padding for better touch targets */
  width: 100%;
  justify-content: center; /* Center link content */
  min-height: 40px; /* Minimum touch target size */
}
.developer-links a:hover {
  color: var(--link-hover);
}
.developer-links svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.developer-links a:hover svg {
  transform: scale(1.1);
}
/**
 * BOXES
 */
.alert {
    border: 1px solid var(--alert-error-border);
    border-radius: 4px;
    padding: 14px;
    text-shadow: 0 1px hsla(0, 0%, 100%, .5);
    margin: 10px 0;
}
.alert-error {
    background-color: var(--alert-error-bg);
    border-color: var(--alert-error-border);
    color: var(--alert-error-text);
}
.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}
/**
 * DONATION BUTTONS
 */
span.donate-btns {
    display: block;
    text-align: center;
    margin: 11px 0 3px;
}
a.donate-btn {
    height: 26px;
    display: inline-block;
    margin: 2px 5px;
    background: hsl(0, 0%, 95%);
    line-height: 16px;
    padding: 3px 8px 3px 24px;
    border-radius: 3px;
    color: hsl(0, 0%, 25%);
    border: 1px solid hsl(0, 0%, 85%);
}
a.donate-btn:hover {
    color: #000;
    border: 1px solid hsl(0, 0%, 70%);
    background-color: hsl(0, 0%, 80%);
}
.icon {
    display: block;
    height: 16px;
    width: 16px;
    float: left;
    margin-left: -20px;
    margin-top: 1px;
}
.icon-paypal {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xml:space="preserve" width="16" height="16"><path fill="%23385c8e" d="M14.823 2.791c.65 1.192.435 2.597.179 3.428-1.385 4.524-7.635 4.278-8.539 4.278s-1.113.842-1.113.842l-.675 2.946c-.184 1.034-1.122.982-1.122.982H1.52q-.077 0-.143-.01c-.01.189.017.743.694.743h2.034s.938.053 1.122-.981l.674-2.946s.211-.842 1.114-.842 7.154.246 8.539-4.278c.309-1.011.56-2.869-.731-4.162"/><path fill="%23385c8e" d="m4.048 13.642.675-2.946s.21-.841 1.114-.841c.902 0 7.153.245 8.538-4.278C14.882 3.923 15.233 0 8.922 0H4.364s-.948-.044-1.181.963L.204 13.819s-.128.806.687.806h2.035s.938.053 1.122-.982m1.718-7.479.605-2.612s.193-.71.816-.816c.622-.106 1.682.019 1.955.07 1.77.332 1.394 2.007 1.394 2.007-.35 2.586-4.375 2.227-4.375 2.227-.631-.228-.395-.877-.395-.877"/></svg>');
}
.icon-bitcoin {
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 -0.01 0.68 0.68" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M.665.323a.323.323 0 1 1-.648 0 .323.323 0 0 1 .649 0M.42.203c.045.015.078.038.071.081Q.482.329.446.336q.048.027.033.086C.46.477.414.481.354.47L.339.529.303.52.318.462.29.455.275.513.24.504.255.445.183.427.201.386l.026.006C.237.394.242.388.243.384l.04-.159C.283.217.281.208.266.204L.24.198.249.16l.072.018L.336.12l.035.009-.014.057.029.007L.4.136l.036.009zM.335.3C.359.306.412.32.421.284S.379.235.354.23L.347.228.329.299l.006.002M.308.415C.337.423.4.439.41.399.42.358.359.344.329.337L.32.335.3.413l.007.002" fill="%23F7931A"/></svg>');
}
.icon-ethereum {
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.963 11.98-4.91-2.9L7.962 16l4.913-6.92-4.915 2.9zM8.037 0l-4.91 8.149 4.91 2.903 4.91-2.9z" fill="%23343434"/></svg>');
}
.icon-kofi {
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="-0.181 0 1.859 1.859" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><g data-name="Layer 1"><g data-name="Coffee Icon"><path data-name="Coffee Cup" d="M.124.36A.125.125 0 0 1 .248.222H1.25a.125.125 0 0 1 .124.138l-.151 1.388a.125.125 0 0 1-.124.111h-.7a.125.125 0 0 1-.124-.111Z" fill="%237b7b7b"/><path d="M1.387.14h-.032V.11a.11.11 0 0 0-.11-.11h-.99a.11.11 0 0 0-.11.11v.03H.11A.11.11 0 0 0 0 .249v.06a.11.11 0 0 0 .11.11h1.277a.11.11 0 0 0 .11-.11v-.06a.11.11 0 0 0-.11-.11" fill="%2398c7eb"/><g data-name="Cup Sleeve"><path data-name="Cup Sleeve" d="M.072.861A.11.11 0 0 1 .181.738H1.32a.11.11 0 0 1 .109.123l-.062.5a.11.11 0 0 1-.109.096H.242a.11.11 0 0 1-.109-.096Z" fill="%23edaea3"/><path d="m.751 1.271-.026-.026C.629 1.16.566 1.103.566 1.033A.1.1 0 0 1 .668.932a.11.11 0 0 1 .083.039.11.11 0 0 1 .083-.039.1.1 0 0 1 .102.101c0 .07-.063.127-.159.212Z" fill="%23ff7878"/></g></g></g></g></svg>');
}
/**
 * NAVIGATION LINKS
 */
nav {
    padding: 20px 0;
}
nav > ul,
nav a {
    color: var(--nav-color);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
nav > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0;
    cursor: default;
}
nav > ul > li:after {
    content: "|";
    margin: 0 8px;
    opacity: 0.3;
}
nav > ul > li:last-child:after {
    content: "";
    margin: 0;
}
/* Navigation Bar Styles */
.nav-bar {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 10px;
  margin: 20px 0;
  text-align: center;
  color: var(--nav-color);
  font-size: 14px;
}
.nav-bar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.nav-bar ul li {
  display: inline-block;
  margin: 0 8px;
  flex: 1 1 auto;
  min-width: 80px; /* Prevent overly small links on tiny screens */
}
.nav-bar ul li:after {
  content: "|";
  margin-left: 8px;
  opacity: 0.3;
}
.nav-bar ul li:last-child:after {
  content: "";
  margin: 0;
}
.nav-bar a {
  color: var(--nav-color);
  text-decoration: none;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  display: block;
  padding: 5px; /* Better touch target */
  min-height: 30px; /* Touch-friendly */
}
.nav-bar a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--link-hover);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav-bar a:hover::after {
  width: 100%;
}
.nav-bar a:hover {
  color: var(--link-hover);
}
/**
 * FOOTER
 */
footer {
  text-align: center;
  padding: 15px;
  font-size: clamp(0.8rem, 2vw, 0.875rem); /* Responsive footer text */
  color: var(--footer-color);
  font-weight: 600;
  margin: 20px 0 0 0; /* Adjust margin */
  transition: all 0.3s ease;
  width: 100%;
}
footer:hover {
  transform: translateY(-1px);
}
footer p {
  margin: 0;
}
/* MEDIA QUERIES */
@media only screen and (max-width: 768px) {
  body {
    padding: 5px; /* Further reduce padding */
  }
  .container {
    padding: 0 10px;
  }
  .jumbotron {
    margin: 20px auto;
  }
  .developers-section {
    margin: 20px 0;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .developer-card {
    max-width: 100%;
    padding: 15px;
    flex: 1 1 auto;
  }
  .developer-photo {
    width: 100px;
    height: 100px;
  }
  .developer-name {
    font-size: 1.25rem;
  }
  .developer-bio {
    font-size: 0.95rem;
  }
  .nav-bar ul {
    flex-direction: column;
    gap: 5px;
  }
  .nav-bar ul li {
    margin: 2px 0;
    min-width: auto;
  }
  .nav-bar ul li:after {
    display: none; /* Hide separators on mobile */
  }
  .theme-toggle {
    top: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}
@media only screen and (max-width: 480px) {
  .jumbotron h1 {
    font-size: 2.5rem;
  }
  .jumbotron .lead {
    font-size: 1.1rem;
  }
  .developer-links a {
    font-size: 0.9rem;
    gap: 6px;
  }
  .developer-photo {
    width: 80px;
    height: 80px;
  }
}
/* High DPI / Retina displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  body {
    background-size: 5px 5px; /* Finer grid for high DPI */
  }
}