body {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #853eee;
  color: #ffffff; 
  font-family: Arial, sans-serif;
  animation: fadeIn 0.4s ease-in-out;
  
  /* Windows 7 Glassy Scrollbar Styling for Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
}

/* Windows 7 Glassy Scrollbar Styling for WebKit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track:hover {
  background: rgba(255, 255, 255, 0.12);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 
              0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, border-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 180, 254, 0.5) !important;
  border-color: rgba(216, 180, 254, 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 
              0 0 8px rgba(216, 180, 254, 0.6) !important;
  cursor: url('images/cursors/32x32/hover.png'), pointer !important;
}

/* Smooth Page Fade-In Transition */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Styling specifically for the navigation links at the top */
.top-links a:link,
.top-links a:visited,
.top-links a:active {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: #ffffff;
  text-decoration: none;
  padding: 6px 14px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  margin: 4px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
              0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.top-links a:hover {
  color: #d8b4fe;
  text-shadow: 0px 0px 8px rgba(216, 180, 254, 0.8), 
               1px 1px 0px #000000, 
               -1px -1px 0px #000000, 
               1px -1px 0px #000000, 
               -1px 1px 0px #000000;
  text-decoration: underline;
  cursor: url('images/cursors/32x32/hover.png'), pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(216, 180, 254, 0.6);
}

/* Styling for general links (like Bandcamp and Physical Media) */
a:link,
a:visited,
a:active {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: #ffffff;
}

a:hover {
  color: #d8b4fe;
  text-shadow: 0px 0px 8px rgba(216, 180, 254, 0.8), 
               1px 1px 0px #000000, 
               -1px -1px 0px #000000, 
               1px -1px 0px #000000, 
               -1px 1px 0px #000000;
  text-decoration: underline;
  cursor: url('images/cursors/32x32/hover.png'), pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Styling for other text elements */
p {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 20px;
}

h1 {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
}

h3 {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 50px;
  color: #ffffff;
}

h2 {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
}

h4 {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: #ffffff;
}

/* Make marquee text elements larger */
marquee h3,
marquee h4 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 50px;
}

/* Add a rounded white border with a shadow to all images across the site */
img {
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

/* Light purple glow effect and hover cursor when hovering over images (like album covers) */
img:hover {
  border-color: #d8b4fe;
  box-shadow: 0px 0px 20px 5px rgba(216, 180, 254, 0.8);
  transform: scale(1.02);
  cursor: url('images/cursors/32x32/hover.png'), pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Light purple glow effect and hover cursor when hovering over hyperlinks containing images */
a:hover img {
  border-color: #d8b4fe;
  box-shadow: 0px 0px 20px 5px rgba(216, 180, 254, 0.8);
  cursor: url('images/cursors/32x32/hover.png'), pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Windows 7 / Retro Pixelated Text Effect */
body, p, h1, h2, h3, h4, li, a {
  text-shadow: 1px 1px 0px #000000, 
               -1px -1px 0px #000000, 
               1px -1px 0px #000000, 
               -1px 1px 0px #000000;
  letter-spacing: 1px;
}

/* Windows 7 Glassy Container Style for Paragraphs & Headings */
p, h1, h2, h3, h4 {
  display: block;
  width: fit-content;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 8px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
              0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Glassy container style applied to lists while preserving list numbers/bullets */
ol, ul {
  padding-left: 30px;
  width: fit-content;
}

li {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-family: Arial, sans-serif;
  color: #ffffff;
  display: list-item;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 8px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
              0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Windows 7 Glassy Container Style for Album Titles */
.album-title {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  padding: 6px 14px;
  margin-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
              0 4px 6px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px 0px #000000, 
               -1px -1px 0px #000000, 
               1px -1px 0px #000000, 
               -1px 1px 0px #000000;
  letter-spacing: 1px;
}

/* Embed & Fake Player Cursors - Locked to normal select cursor even on hover */
.bandcamp-player,
.bandcamp-player iframe,
.fake-player,
.fake-player-text,
.fake-player-sub,
.bandcamp-player:hover,
.bandcamp-player iframe:hover,
.fake-player:hover,
.fake-player-text:hover,
.fake-player-sub:hover {
  cursor: url('images/cursors/32x32/select.png'), auto !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Footer buttons/links and Modal Close Button Cursors */
.site-footer a,
.modal-close {
  cursor: url('images/cursors/32x32/select.png'), auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.site-footer a:hover,
.modal-close:hover {
  cursor: url('images/cursors/32x32/hover.png'), pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Combined Music Section Layout Styles */
.music-section-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin: 50px auto 30px auto;
  max-width: 1200px;
  flex-wrap: wrap;
}

.music-lists {
  text-align: left;
}

.music-lists ol, 
.music-lists ul {
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.music-lists li {
  margin: 10px 0;
}

.music-lists a {
  color: #ffffff;
  text-decoration: none;
  text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000;
}

.music-lists a:hover {
  color: #d8b4fe;
}

/* ==========================================
   RESPONSIVE MOBILE & DESKTOP STYLES
   ========================================== */

/* Hide elements meant only for mobile on desktop */
.mobile-only {
    display: none !important;
}

/* ==========================================
   MOBILE & iOS BREAKPOINT (Max-Width: 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    body {
        padding: 10px;
        align-items: flex-start;
    }

    /* Switch visibility for desktop/mobile elements */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* Adjust typography flow for smaller screens */
    h1 {
        font-size: 1.5rem;
    }

    p, a, li {
        font-size: 0.95rem;
    }
}

/* ==========================================
   iOS-SPECIFIC SAFARI FIXES
   ========================================== */
body.ios-device {
    -webkit-text-size-adjust: 100%;
}