:root {
        --brown-dark: #9a5c20;
        --brown-dark-dark: #653404;
        --caramel: #cb8912;
        --gold-warm: #e39a17;
        --beige-soft: #f8cf90;
        --beige-light: #fbe7c2;
        --cream: #f5f5e9;
        --wood-light: #d7ccc8;
      }

      body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: var(--cream);
        background: radial-gradient(
          ellipse at 40% 30%,
          var(--brown-dark) 0%,
          #b06d26 40%,
          var(--gold-warm) 80%,
          var(--beige-soft) 100%
        );
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background-color: var(--brown-dark);
      }

      header img {
        max-height: 60px;
      }

      nav {
        background-color: var(--brown-dark);
        padding: 0.8rem 1rem;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      nav a {
        color: var(--cream);
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 1px;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        transition: all 0.3s ease;
        position: relative;
      }

      nav a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--gold-warm);
        transition: width 0.3s ease;
      }

      nav a:hover {
        color: var(--gold-warm);
      }

      nav a:hover::after {
        width: 100%;
      }

      .mobile-menu-toggle {
        display: none;
        background-color: var(--brown-dark);
        color: var(--wood-light);
        padding: 0.5rem 1rem;
        border: none;
        font-size: 1rem;
        width: 100%;
        cursor: pointer;
        transition: background 0.6s;
      }

      .mobile-menu-toggle:hover {
        background-color: var(--brown-dark-dark);
      }

      .mobile-nav {
        display: none;
        flex-direction: column;
        background-color: var(--wood-medium);
      }

      .mobile-nav a {
        padding: 1rem;
        text-align: center;
        color: var(--wood-light);
        text-decoration: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transition: background 0.3s;
      }

      .mobile-nav a:hover {
        background-color: var(--brown-dark-dark);
        color: var(--cream);
      }

      @media (max-width: 768px) {
        nav.desktop-nav {
          display: none;
        }
        .mobile-menu-toggle {
          display: block;
        }
        .mobile-nav {
          display: none !important;
        }
        .mobile-nav.open {
          display: flex !important;
        }
        html {
          background: var(--brown-dark); /* Solid color for areas outside body */
          height: 100%;
        }
        body {
          background-attachment: scroll; /* Fix for mobile scrolling */
        }
        
        .card-back-content {
          padding: 0.8rem; /* Reduce padding on mobile */
        }

        .card-back-content p {
          max-height: 30px;
          margin-bottom: 0.5rem;
        }

        /* Optional: style the scrollbar */
        .card-back-content p::-webkit-scrollbar {
          width: 3px;
        }

        .card-back-content p::-webkit-scrollbar-thumb {
          background-color: var(--gold-warm);
          border-radius: 3px;
        } 
        
        .streaming-content {
          max-height: 80vh; /* More space on mobile */
          width: 90%;
          padding: 1rem;
        }

        .streaming-platforms {
          max-height: 60vh; /* More scrolling area on mobile */
        } 
      }

      .about-section {
        padding: 2rem;
        background-color: rgba(0, 0, 0, 0.2);
        margin: 2rem;
        border-radius: 8px;
        text-align: center;
      }

      .about-section h2 {
        color: var(--gold-warm);
        margin-bottom: 1rem;
      }

      .about-section p {
        color: var(--cream);
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto;
      }

      .grid-container {
        display: flex;
        justify-content: center;
        padding: 1rem;
        flex: 1;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(3, 6fr);
        gap: 1.5rem;
        max-width: 1000px;
        width: 100%;
      }

      @media (max-width: 768px) {
        .grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .cover {
        perspective: 1000px;
        width: 100%;
        aspect-ratio: 1/1;
      }

      .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
        cursor: pointer;
      }

      /* Desktop hover effect */
      @media (hover: hover) and (pointer: fine) and (min-width: 769px) {
        .cover:hover .card {
          transform: rotateY(180deg);
        }
      }

      /* Mobile active (clicked) state */
      .card.flipped {
        transform: rotateY(180deg);
      }

      .card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      }

      .card-front {
        background-color: #000000;
      }

      .card-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .card-back {
        background-size: cover;
        background-position: center;
        transform: rotateY(180deg);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .card-back::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        filter: blur(8px) brightness(0.7);
        z-index: 0;
      }

      .card-back-content {
        position: relative;
        z-index: 1;
        color: white;
        padding: 1rem;
        text-align: center;
        width: 100%;
        height: 100%;
        flex-direction: column;
        /* Add this to contain the layout */
        padding-top: 20px
      }

      /* Scrollable paragraph */
      @media (min-width: 500px) {
        .card-back-content p {
          font-size: 0.77rem;
          max-width: 90%;
          margin: 0 auto;
          overflow-y: auto;
          flex: 1; /* Takes available space */
          max-height: 300px; /* Fixed pixel height - adjust as needed */
          padding: 0.5rem 0;
          -webkit-overflow-scrolling: touch;
        }
        
        .streaming-platforms {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.4rem;
          margin-top: 0.4rem;

          max-height: 50vh;
          overflow-y: auto;
          padding: 0.1rem;
        }
      }
      @media (max-width: 500px) {
        .card-back-content p {
          font-size: 0.77rem;
          max-width: 90%;
          margin: 0 auto;
          overflow-y: auto;
          flex: 1; /* Takes available space */
          max-height: 30px; /* Fixed pixel height - adjust as needed */
          padding: 0.5rem 0;
          -webkit-overflow-scrolling: touch;
        }
        
        .streaming-platforms {
          display: grid;
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.4rem;
          margin-top: 0.4rem;

          max-height: 50vh;
          overflow-y: auto;
          padding: 0.1rem;
      }
        
      }



      .card-back h3 {
        margin: 0.01rem 0;
        font-size: 0.9rem;
      }

      .card-back h4 {
        font-size: 0.7rem; /* Added size for h4 */
        margin: 0.2rem 0; /* Adjusted spacing */
        color: gray
      }

      .card-back p {
        margin: 0;
        font-size: 0.77rem;
        max-width: 90%;
      }

      .record-info {
        text-align: center;
        margin-top: 1.2rem;
        padding: 0 1rem;
      }

      .record-info h3 {
        font-family: "Playfair Display", serif;
        color: var(--text-dark);
        margin-bottom: 0.4rem;
        font-size: 1.4rem;
      }

      .record-info p {
        color: var(--wood-light);
        font-size: 0.8rem;
        line-height: 1.5;
      }

      .record-year {
        display: inline-block;
        background: gray;
        color: mintcream;
        padding: 0.2rem 0.6rem;
        border-radius: 10px;
        font-size: 0.6rem;
        margin-top: 0.3rem;
      }

      .stream-button {
        display: block;
        margin: 0.4rem auto 0;
        padding: 0.2rem 0.8rem;
        background-color: var(--brown-dark);
        color: var(--cream);
        border: none;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .stream-button:hover {
        background-color: var(--beige-soft);
        transform: translateY(-1px);
        color: var(--brown-dark-dark);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
      }

      .stream-button:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }

      /* Add streaming services overlay styles */
      .streaming-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
      }


        .streaming-overlay.show {
          display: flex;
        }

      .card-back-content.active-blur {
        filter: blur(12px) brightness(0.5) !important;
        transition: filter 0.3s ease;
      }

      .streaming-content {
        padding: 1.5rem;
        border-radius: 12px;
        max-width: 90%;
        width: 500px;
        text-align: center;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

        /* New scrolling styles */
        max-height:14vh; /* Viewport-based height */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: auto;
        flex-direction: column;
      }

      .streaming-content h3 {
        color: var(--cream);
        margin-bottom: 0.3rem;
      }



      /* Optional scrollbar styling */
      .streaming-platforms::-webkit-scrollbar {
        width: 6px;
      }
      .streaming-platforms::-webkit-scrollbar-thumb {
        background-color: var(--gold-warm);
        border-radius: 3px;
      }
      
      .streaming-platform {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--cream);
        transition: transform 0.4s;
      }

      .streaming-platform:hover {
        transform: translateY(-2px);
      }

      .streaming-icon {
        width: 40px; /* Reduced from 50px */
        height: 40px; /* Reduced from 50px */
        margin-bottom: 0.1rem;
      }

      /* Add style for platform names */
      .streaming-platform span {
        font-size: 0.75rem; /* Smaller text size */
        color: var(--cream);
        margin-top: 0.1rem;
      }

      .close-streaming {
        position: absolute;
        top: 5px;
        right: 5px;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        background: none;
        border: none;
      }

      /* Update the trigger style */
      .streaming-trigger {
        cursor: pointer;
        display: inline-block;
        margin-top: 0.5rem;
      }

      .streaming-trigger img {
        width: 30px;
        height: 30px;
        transition: transform 0.2s;
      }

      .streaming-trigger:hover img {
        transform: scale(1.1);
      }

      footer {
        text-align: center;
        background-color: var(--brown-dark);
        color: white;
        padding: 1rem;
        font-size: 0.85rem;
        margin-top: auto;
      }