/* Custom background styling for Yarboa's blog */
/* NOTE: All backgrounds use !important to override main.css */

/* Option 1: Gradient background (default - uncomment to use) */
/*
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  background-attachment: fixed !important;
}
*/

/* Option 2: Dark tech gradient (comment Option 1, uncomment this) */
/*
body {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%) !important;
  background-attachment: fixed !important;
}
*/

/* Option 3: Warm sunset gradient (comment Option 1, uncomment this) */
/*
body {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
  background-attachment: fixed !important;
}
*/

/* Option 4: Ocean/Tech blue gradient (comment Option 1, uncomment this) */
/*
body {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
  background-attachment: fixed !important;
}
*/

/* Option 5: Dark professional (comment Option 1, uncomment this) */
/*
body {
  background: linear-gradient(135deg, #232526 0%, #414345 100%) !important;
  background-attachment: fixed !important;
}
*/

/* Option 6: Fedora/Red Hat inspired (red to dark) */
/*
body {
  background: linear-gradient(135deg, #c81e1e 0%, #1d1d1d 100%) !important;
  background-attachment: fixed !important;
}
*/

/* Option 7: Animated gradient (smooth color transition) */
/*
body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
  background-size: 400% 400% !important;
  animation: gradient 15s ease infinite !important;
  background-attachment: fixed !important;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
*/

/* Option 8: Tech Matrix green */
/*
body {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
  background-attachment: fixed !important;
}
*/


/* Option 9: Vibrant developer theme (VS Code inspired) */
/*
body {
  background: linear-gradient(135deg, #1e1e1e 0%, #007acc 50%, #1e1e1e 100%);
  background-attachment: fixed;
}
*/

/* Option 10: Pattern background with subtle texture */
/*
body {
  background-color: #667eea !important;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px) !important;
  background-attachment: fixed !important;
}
*/

/* ============ BACKGROUND IMAGE OPTIONS ============ */

/* Option 11: Geometric pattern (CSS-generated) */
/*
body {
  background-color: #2c3e50 !important;
  background-image:
    linear-gradient(30deg, #445566 12%, transparent 12.5%, transparent 87%, #445566 87.5%, #445566),
    linear-gradient(150deg, #445566 12%, transparent 12.5%, transparent 87%, #445566 87.5%, #445566),
    linear-gradient(30deg, #445566 12%, transparent 12.5%, transparent 87%, #445566 87.5%, #445566),
    linear-gradient(150deg, #445566 12%, transparent 12.5%, transparent 87%, #445566 87.5%, #445566) !important;
  background-size: 80px 140px !important;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px !important;
  background-attachment: fixed !important;
}
*/

/* Option 12: Circuit board pattern (tech theme) */
/*
body {
  background-color: #1a1a2e !important;
  background-image:
    radial-gradient(circle at 20% 50%, transparent 20%, rgba(255,255,255,.05) 21%, rgba(255,255,255,.05) 34%, transparent 35%, transparent),
    radial-gradient(circle at 60% 30%, transparent 20%, rgba(255,255,255,.05) 21%, rgba(255,255,255,.05) 34%, transparent 35%, transparent),
    radial-gradient(circle at 80% 80%, transparent 20%, rgba(255,255,255,.05) 21%, rgba(255,255,255,.05) 34%, transparent 35%, transparent) !important;
  background-size: 200px 200px !important;
  background-attachment: fixed !important;
}
*/

/* Option 13: Hexagon pattern (modern tech) - ENHANCED for visibility */
/*
body {
  background: #1a1a2e !important;
  background-image:
    linear-gradient(30deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%),
    linear-gradient(150deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%),
    linear-gradient(30deg, #533483 12%, transparent 12.5%, transparent 87%, #533483 87.5%),
    linear-gradient(150deg, #533483 12%, transparent 12.5%, transparent 87%, #533483 87.5%) !important;
  background-size: 80px 140px !important;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px !important;
  background-attachment: fixed !important;
}
*/

/* TESTING: Super obvious bright red - if you can't see this, something is very wrong */
/*
body {
  background: #ff0000 !important;
}
*/

/* Option 14: Dots pattern (clean & minimal) */
/*
body {
  background-color: #667eea !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
  background-attachment: fixed !important;
}
*/

/* Option 15: Grid pattern (developer theme) */
/*
body {
  background-color: #1e1e1e !important;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  background-attachment: fixed !important;
}
*/

/* Option 16: Use your own background image (uncomment and add image URL) */
/*
body {
  background-image: url('/assets/background.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
*/

/* Fix body to fill entire viewport */
html {
  height: 100%;
}

body {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Option 17: SUPER VISIBLE - Bright gradient (testing) */
/*
body {
  background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%) !important;
  background-attachment: fixed !important;
}
*/

/* BACKGROUND IMAGE - Using free tech pattern */
/*
body {
  background-color: #1a1a2e !important;
  background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.344 0L13.858 8.485 15.272 9.9l9.9-9.9h-2.83zM27.03 0L17.03 10l1.414 1.414L29.857 0h-2.828zm5.686 0L21.03 11.686l1.415 1.415L35.857 0h-3.143zm5.686 0L26.686 11.686l1.415 1.415L41.857 0h-3.143zM49.8 0L38.115 11.686l1.414 1.414L54.628 0H49.8zM0 5.373l6.485 6.485 1.415-1.414L0 2.544v2.83zm0 5.686l9.9 9.9 1.414-1.414L0 8.83v2.83zm0 5.686L13.485 30.03l1.414-1.414L0 14.83v2.83zm0 5.686L17.03 36.03l1.414-1.414L0 20.83v2.83zM0 27.03l19.9 19.9 1.415-1.414L0 26.83v.2zm0 5.686L23.03 51.857l1.414-1.414L0 32.83v-.114zm0 5.686L26.686 57.544l1.414-1.414L0 38.83v-.2zM0 44.03l30.03 30.03 1.414-1.414L0 44.83v-.8zm0 5.686L33.686 79.1l1.414-1.414L0 50.83v-1.114zm0 5.686L37.343 83.757l1.414-1.414L0 56.83v-1.414zm0 5.686L41 88.8l1.414-1.414L0 62.83v-1.414zm0 5.686L44.657 94.1l1.414-1.414L0 68.83v-1.414zM0 74.03l48.314 48.314 1.414-1.414L0 74.83v-.8zm0 5.686L51.97 127.03l1.414-1.414L0 80.83v-1.114zm0 5.686l55.627 55.627 1.414-1.414L0 86.83v-1.414zm60 60V0H0v60h60z" fill="%23e94560" fill-opacity="0.1" fill-rule="evenodd"/></svg>') !important;
  background-size: 60px 60px !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}
*/


/* Option 18: Fedora Blue with dots (very visible) */
/*
body {
  background-color: #3c6eb4 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.3) 2px, transparent 2px) !important;
  background-size: 40px 40px !important;
  background-attachment: fixed !important;
}
*/

/* ============ USE YOUR OWN BACKGROUND IMAGE ============ */
/*
   To use your own image:
   1. Save your image to: /home/yarboa/tests/yarboa.github.io/assets/background.jpg
   2. Uncomment the option below:
*/

/* Option 19: Your own background image */
/*
body {
  background-image: url('/assets/background.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-color: #1a1a2e !important;
}
*/

/* ============ FREE BACKGROUND IMAGES FROM UNSPLASH ============ */
/* These use free images from Unsplash API - uncomment to try */

/* Option 20: Abstract tech background */
body {
  background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1920') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-color: #000 !important;
  min-height: 100vh !important;
}

/* Option 21: Dark code/programming theme */
/*
body {
  background-image: url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1920') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-color: #000 !important;
  min-height: 100vh !important;
}
*/


/* Option 22: Dark gradient mesh */
/*
body {
  background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=1920') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-color: #000 !important;
}
*/

/* Make content wrapper stand out with white background and shadow */
.wrapper {
  background-color: #ffffff;
  /* Uncomment below for semi-transparent wrapper (shows background through content) */
  /* background-color: rgba(255, 255, 255, 0.95); */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 20px auto;
  border-radius: 8px;
  /* Fixed width - always shows background on sides */
  max-width: 940px !important;
  width: 90%;
}

@media screen and (max-width: 1000px) {
  .wrapper {
    max-width: 90% !important;
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  .wrapper {
    max-width: 95% !important;
    width: 95%;
  }
}

/* Style the header */
.site-header {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px 8px 0 0;
}

/* Style the footer */
.site-footer {
  background-color: transparent !important;
  border-radius: 0 0 8px 8px;
  margin-top: 20px;
}

/* Adjust main content area - TRANSPARENT to show background! */
main.page-content {
  background-color: transparent !important;
  padding: 20px 0;
}

/* Add some spacing for mobile */
@media screen and (max-width: 600px) {
  .wrapper {
    margin: 10px;
    padding: 15px;
  }
}