/* styles-ufs.css  STYLE UNCLE FLOYD SHOW ARTICLE V1 */
        :root {
            --primary-color: #e63946;
            --secondary-color: #457b9d;
            --background-color: #f1faee;
            --text-color: #1d3557;
            --accent-color: #a8dadc;
            --highlight-color: #ffd166;
            --dark-accent: #2a3f5e;
            --light-yellow: #fffceb;
            --light-pink: #ffeef1;
            --neon-green: #7fff00;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-image: 
                radial-gradient(circle at 100px 100px, var(--accent-color) 10px, transparent 10px),
                radial-gradient(circle at 200px 300px, var(--highlight-color) 15px, transparent 15px),
                radial-gradient(circle at 400px 200px, var(--primary-color) 8px, transparent 8px),
                radial-gradient(circle at 700px 400px, var(--secondary-color) 12px, transparent 12px);
            background-repeat: repeat;
            background-size: 800px 800px;
            
            background-image: url('images/Background_Bergen_Lrg.jpg'); /* Replace image.jpg with your image */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100%; /* Make sure it covers the entire viewport */
        }
        


        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        .small-logo {
            display: inline-block;
            background-color: white;
            border-radius: 50%;
            padding: 10px;
            margin-bottom: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 3px solid var(--primary-color);
        }
        
        .feature-art {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            border: 5px solid white;
        }
        
        h1 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: var(--primary-color);
            line-height: 1.2;
        }
        
        h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin: 30px 0 20px;
            color: var(--secondary-color);
            border-bottom: 3px solid var(--accent-color);
            padding-bottom: 10px;
        }
        
        h3 {
            font-size: 1.5rem;
            margin: 25px 0 15px;
            color: var(--secondary-color);
        }
        
        p {
            margin-bottom: 5px;
            font-size: 1.1rem;
        }
        
        .main-container {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 40px;
        }
        
        .sidebar {
            background-color: rgb(234, 225, 255);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 20px;
            height: fit-content;
        }
        
        .toc {
            margin-bottom: 30px;
            background-color: white;
            padding: 10px;
            border-radius: 10px;
        }
        
        .toc h3 {
            text-align: center;
            margin-top: 0;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px dotted var(--accent-color);
        }
        
        .toc ol {
            background-color: rgb(254, 254, 254);
            list-style-type: none;
            padding-left: 10px;
        }
        
        .toc li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 25px;
        }
        
        .toc li:before {
            background-color: white;content: "📺";
            position: absolute;
            left: 0;
            top: 2px;
        }
        
        .toc a {
            background-color: white;text-decoration: none;
            color: var(--secondary-color);
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 1px 1px;
        }
        
        .toc a:hover {
            background-color: rgb(244, 246, 244);
            color: var(--primary-color);
            text-decoration: underline;
            text-decoration: bold;
            padding-left: 5px;
        }
        
        .link-plus a {  
        color: rgb(86, 41, 207);
        font-weight: 600;
        text-decoration: underline;
        padding: 0rem 0rem;
        }

        .link-plus a:hover {
        color: rgb(240, 49, 161);
        font-weight: 700;
        text-decoration-line: var(--primary-color);
        text-transform:var(--primary-color);
        transition: background-color 0.3s ease;
        padding: 0rem 0rem;
    }

        .content {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            /*border: 15px solid rgb(221, 39, 215);  FOR TESTING ONLY */
        }
        

        /* New styles for the article header graphic */
        .article-header-graphic {
            width: 100%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            color: white;
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
            border: 5px solid wheat;
        }
        
        .header-decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0.9;
            background-image: 
                url('images/tablecloth_spread_lrg.jpg');
            background-size: auto 100%;
            background-position: center;
            background-repeat: repeat;
        }
        

        .header-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
 
        .header-title {
            font-family: 'Playfair Display', serif;
            /*  font-size: 3rem;
            line-height: 1.2;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3); */
            background-color: wheat;
            color: var(--dark-accent);
            font-weight: bold;
            padding: 6px 22px;
            border-radius: 20px;
            font-size: 2.2rem;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .header-subtitle {
            font-size: 1.6rem;
            margin-bottom: 20px;
            font-style: italic;
            -webkit-text-stroke: 1px rgba(225, 250, 3, 0.9); /* Chrome, Safari, Edge */
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);

        }
        
        .years-badge {
            background-color: var(--highlight-color);
            color: var(--dark-accent);
            font-weight: bold;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 1.2rem;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        

       .quote-strip {
            background-color: var(--dark-accent);
            color: white;
            padding: 15px;
            text-align: center;
            font-style: italic;
            font-size: 1.1rem;
            margin-top: 20px;
            border-radius: 5px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }

        .quote-strip-limited {
            background-color: var(--dark-accent);
            color: white;
            padding: 15px;
            text-align: center;
            font-style: italic;
            font-size: 1.1rem;
            margin: 20px auto;      /* center it */
            border-radius: 5px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);

            width: 100%;
            max-width: clamp(320px, 85vw, 900px);
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            font-size: 0.9rem;
            color: #666;
            border-bottom: 1px dashed var(--accent-color);
            padding-bottom: 15px;
        }
        
        .image-container {
            margin: 9px 0;
            text-align: center;
            /*border: 15px solid rgb(221, 39, 215);  FOR TESTING ONLY */
        }
        
        .image-container img {
            max-width: 100%;
            border-radius: 8px;
            /*  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 3px solid white;  keep images plain, except for a little rounding */
            
        }
        
        .image-container figcaption {
            margin-top: 5px;
            font-style: italic;
            font-size: 0.9rem;
            color: #666;
        }
        

        .image-container a {  
        color: rgb(86, 41, 207);
        font-weight: 600;
        text-decoration: underline;
        padding: 0rem 0rem;
        }

        .image-container a:hover {
        color: rgb(240, 49, 161);
        font-weight: 700;
        text-decoration-line: var(--primary-color);
        text-transform:var(--primary-color);
        transition: background-color 0.3s ease;
        padding: 0rem 0rem;
        }

        img {
        max-width: 100%;
        height: auto;
        margin: .8rem 0 0 0;
        /*   border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
        /*  transition: transform 0.3s ease; */
        }

        image{
        max-width: 100%;
        height: auto;
        margin: .8rem 0 0 0;
        /*   border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
        /*  transition: transform 0.3s ease; */
        }

         /*img:hover image:hover{  */
         /* transform: scale(1.0); */ 
         /* to Slightly enlarge the image on hover scale(1.02); */
         /*}    */



        .image-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .grid-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 8px;
            border: 3px solid white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .grid-image:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        }
        

        blockquote {
            margin: 30px 0;
            padding: 20px 30px;
            background-color: var(--highlight-color);
            border-left: 5px solid var(--primary-color);
            font-style: italic;
            position: relative;
            border-radius: 0 8px 8px 0;
            color: rgb(48, 93, 161);
        }
        
        blockquote:before {
            content: "";
            font-size: 4rem;
            position: absolute;
            left: 10px;
            top: -10px;
            color: rgba(0,0,0,0.1);
        }
        
        blockquote p {
            margin-bottom: 10px;
        }
        
        blockquote cite {
            display: block;
            text-align: right;
            font-weight: bold;
            font-style: normal;
        }
        
        .timeline {
            background-color: var(--light-yellow);
            padding: 25px;
            border-radius: 8px;
            margin: 30px 0;
            position: relative;
            border: 1px solid var(--highlight-color);
        }
        
        .timeline h4 {
            text-align: center;
            margin-bottom: 20px;
            color: var(--dark-accent);
            font-size: 1.2rem;
        }
        
        .timeline-item {
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
            border-left: 3px solid var(--secondary-color);
            padding-bottom: 10px;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0;
        }
        
        .timeline-date {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .timeline-content {
            margin-top: 5px;
        }
        




        .navigation-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px dashed var(--accent-color);
        }
        
        .nav-btn {
            display: inline-block;
            padding: 12px 25px;
            background-color: var(--secondary-color);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(69, 123, 157, 0.3);
        }
        
        .nav-btn:hover {
            background-color: var(--dark-accent);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(69, 123, 157, 0.4);
        }
        
        .nav-btn.next {
            background-color: var(--secondary-color);
            color: rgb(220, 240, 34);
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(57, 230, 167, 0.3);
        }
        
        .nav-btn.next:hover {
            display: inline-block;
            padding: 12px 25px;
            background-color: var(--dark-accent);

            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(230, 57, 70, 0.4);
        }


        
        .character-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }


        /* charcter cards area  
        .character-card {
            background-color: var(--light-yellow);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }  */
        
        /* MATT You might want to adjust existing .character-card styles if necessary */
        /*.character-card {
            background-color: var(--light-yellow);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: flex; /* Make it a flex container  
            flex-direction: column; /* Stack items vertically   
            align-items: center; /* Center items horizontally within the card  
            text-align: center;  Center text within the card 
        }  */

        /* IMPORTANT: Add position: relative to the parent .character-card */
        .character-card {
            z-index: 1; /* Ensure it stacks above the background */
            background-color: var(--light-yellow);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            position: relative; /* THIS IS CRUCIAL for absolute positioning of children */
            overflow:visible; /* Helps contain shadows and prevents content overflow visually */
            transition: all 0.3s ease;
            border: 2px solid transparent;

            /* Adjust padding if the image is overlapping content too much */
            /* You might need more top/right padding if the image is within the padding area */
             padding-top: 30px; /* Example: adjust padding to account for overlap */
             padding-right: 30px; /* Example: adjust padding to account for overlap */

            /* If you were using flexbox for centering before, you might remove it, or adjust it */
            /* For a floating image, you usually want the text to flow around it or below it */
           /*  display: block;  Revert to block display or adjust flex properties  
               text-align: left;   Revert text alignment if desired */  
        }

        .character-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
            border-color: var(--accent-color);
        }
        
        .character-card h4 {
            color: var(--primary-color);
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 2px dotted var(--accent-color);
            font-size: 1.2rem;
        }
        
        .character-card p {
            font-size: 0.95rem;
            margin-bottom: 10px;
        }
        
        .character-card .character-nickname {
            color: var(--secondary-color);
            font-style: italic;
            font-size: 0.9rem;
            margin-bottom: 15px;
            display: block;
        }
        
        /* Ensure character card text is alligned */
        .character-card h4,
        .character-card .character-nickname,
        .character-card p {
            text-align: left;
        }

        
        .character-image-container {
            /* text-align: center;  Center the image horizontally */
            /*  text-align: right;  
            margin-bottom: 15px; /* Space between image and text */
            position: absolute; /* Position relative to the nearest positioned ancestor */
            top: -31px;       /* Adjust this value to control vertical overlap */
            right: -15px;     /* Adjust this value to control horizontal overlap */
            z-index: 10;      /* Ensure it overlaps other content if necessary */
        }

        .character-headshot {
           /* width: 100px; Adjust as needed */
           /*  height: 100px;  Adjust as needed, makes it circular with border-radius: 50% */
           /*  border-radius: 50%;  Makes the image circular */
            /* object-fit: cover;  Ensures the image covers the area without distortion */
            /* border: 3px solid var(--primary-color);  Add a border, matching your theme */
            /* box-shadow: 0 2px 5px rgba(0,0,0,0.2);   Subtle shadow */
            /* transition: transform 0.3s ease;  Smooth hover effect */  
            width: 100px; /* Adjust as needed */
            height: 100px; /* Adjust as needed, makes it circular with border-radius: 50% */
            border-radius: 50%; /* Makes the image circular */
            object-fit: cover; /* Ensures the image covers the area without distortion */
            border: 3px solid var(--primary-color); /* Add a border, matching your theme */
            box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Stronger shadow for float effect */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
            z-index: 10; 
        }

        /* .character-headshot:hover { */
            /* transform: scale(1.05); */
            /* Slightly enlarge on hover */  
        /* } */


        .red-bold-name {
            color: var(--primary-color);  /* Red & Bold */ 
            font-weight: bold;
        }   

        
        
       /*  next area -- puppets  */
        .puppet-section {
            background-color: var(--light-pink);
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
            border: 2px dashed var(--primary-color);
        }
        
        .puppet-section h3 {
            text-align: center;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 20px;
        }
        
        .puppet-cards {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .puppet-card {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 200px;
            max-width: 300px;
            text-align: center;
        }
        
        .puppet-card h4 {
            color: var(--secondary-color);
            margin-bottom: 4px;
        }
        
        .puppet-card p {
            font-size: 0.9rem;
            margin-bottom: 0;
        }
        
        .puppet-image {
            width: 144px;
            height: 105px;
            background-color: var(--accent-color);
            border-radius: 50%;
            margin: 0 auto 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            border: 3px solid var(--primary-color);
        }


        .badge {
            z-index: 10;
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: var(--primary-color);
            color: white;
            font-size: 0.8rem;
            padding: 8px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(15deg);
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            border: 2px solid white;
        }


        .vintage-badge {
            z-index: 10;
            position: absolute;
            top: -20px;
            right: -20px;
            background-color: var(--primary-color);
            color: white;
            padding: 25px 15px;
            border-radius: 50%;
            transform: rotate(15deg);
            font-weight: bold;
            font-size: 0.9rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            border: 2px solid white;
        }
        
        .fun-fact {
            font-family: 'Playfair Display', serif;
            background-color: var(--accent-color);
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            position: relative;
            border-top: 3px solid var(--secondary-color);
            border-bottom: 3px solid var(--secondary-color);
        }
        
        .fun-fact h4 {
            /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif; */
            font-family: 'Playfair Display', serif;
            margin-top: 0;
            color: var(--dark-accent);
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        
     /*    .fun-fact:before {
            content: "💡";  
            position: absolute;  
            right: 20px;
            top: 15px;
            font-size: 2rem;
        } */
        
        .page-indicator {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #666;
        }
        
        .page-dots {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        
        .page-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ddd;
            margin: 0 5px;
        }
        
        .page-dot.active {
            background-color: var(--secondary-color);
            transform: scale(1.2);
        }
        
        
        .sketch-list {
            background-color: var(--light-yellow);
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
            border: 2px dashed var(--secondary-color);
        }
        
        .sketch-list h3 {
            text-align: center;
            color: var(--secondary-color);
            margin-top: 0;
            margin-bottom: 20px;
        }
        
        .sketch-list ul {
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        
        .sketch-list li {
            background-color: white;
            padding: 10px 15px;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-size: 0.9rem;
            border: 1px solid var(--accent-color);
            transition: all 0.3s ease;
        }
        
        .sketch-list li:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .music-section {
            background-color: var(--light-pink);
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
        }
        
        .music-section h3 {
            text-align: center;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 20px;
        }
        
        .music-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .music-card {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .music-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }
        
        .music-card .artist-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 15px;
            background-color: var(--accent-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .music-card h4 {
            color: var(--secondary-color);
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .music-card p {
            font-size: 0.8rem;
            margin-bottom: 0;
            color: #666;
        }
        
        .neon-sign {
            background-color: #000;
            color: var(--neon-green);
            padding: 15px;
            margin: 30px 0;
            border-radius: 8px;
            text-align: center;
            font-family: 'Courier New', monospace;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 0 10px var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
            letter-spacing: 2px;
            border: 3px solid var(--neon-green);
        }



        .two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }


        .map-graphic {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 2px solid var(--accent-color);
        }
        
        .map-graphic h3 {
            text-align: center;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 20px;
        }
        
        .broadcast-map {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }
        
        .broadcast-city {
            background-color: var(--light-yellow);
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 0.9rem;
            border: 1px solid var(--highlight-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            min-width: 150px;
            text-align: center;
        }
        
        .broadcast-city:hover {
            transform: translateY(-3px);
            background-color: var(--highlight-color);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .broadcast-city strong {
            display: block;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .venue-section {
            background-color: var(--light-pink);
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
            border: 2px solid var(--primary-color);
        }
        
        .venue-section h3 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .venue-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 3px solid white;
        }
        
        .quote-box {
            background-color: var(--light-yellow);
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-style: italic;
            position: relative;
            border-left: 3px solid var(--highlight-color);
        }
        
        .quote-box:before {
            content: "";
            font-size: 3rem;
            position: absolute;
            left: 10px;
            top: -15px;
            color: var(--highlight-color);
        }
        
        .quote-attribution {
            display: block;
            text-align: right;
            font-weight: bold;
            font-style: normal;
            margin-top: 10px;
        }

        .tribute-box {
            background: linear-gradient(135deg, var(--light-pink), var(--light-yellow));
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .tribute-box h3 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        
        .tribute-box h3:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-color);
        }
        
        .tribute-box p {
            font-style: italic;
            color: var(--dark-accent);
        }
        
        .lyrics-box {
            background-color: var(--light-yellow);
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-style: italic;
            text-align: center;
            position: relative;
            border: 1px solid var(--highlight-color);
        }
        
        .lyrics-box strong {
            display: block;
            margin-bottom: 10px;
            color: var(--secondary-color);
            font-size: 1.1rem;
        }
        
        .lyrics-credit {
            display: block;
            text-align: right;
            margin-top: 10px;
            font-size: 0.9rem;
            color: #666;
        }
        
        .modern-revival {
            background-color: var(--light-pink);
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
        }
        
        .modern-revival h3 {
            text-align: center;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 20px;
        }
        
        .revival-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .revival-item {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .revival-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }
        
        .revival-item h4 {
            color: var(--secondary-color);
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .revival-item p {
            font-size: 0.9rem;
            margin-bottom: 0;
        }
        
        .revival-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .conclusion-box {
            background-color: var(--light-yellow);
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
            border-left: 5px solid var(--highlight-color);
        }
        
        .conclusion-box h3 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 15px;
        }
        
        .current-status {
            background-color: var(--accent-color);
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            font-style: italic;
            text-align: center;
            border: 2px dashed var(--secondary-color);
        }
        
        .current-status h4 {
            color: var(--dark-accent);
            margin-bottom: 15px;
            font-size: 1.2rem;
        }
        
        .current-status p {
            margin-bottom: 10px;
        }
        
        .current-status .quote {
            font-weight: bold;
            font-size: 1.1rem;
            margin: 10px 0;
            color: var(--primary-color);
        }

        .footer {
            margin-top: 40px;
            text-align: center;
            font-size: 0.9rem;
            color: #666;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
        

        /* VERY BASIC RESPONSIVE DEISGN  */
        @media (max-width: 750px) {
            .main-container {
                grid-template-columns: 1fr;
            }
         
            
            body {
                background-color: lightblue;
            }
            
           .sidebar {
                position: static;
                margin-bottom: 30px;
                background-color: rgb(223, 109, 143);
            }

            .header-title {
                font-size: 2.2rem;
            }   

            h1 {
                font-size: 2rem;
            }

            
            .navigation-buttons {
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }


            
            .image-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .character-cards, .puppet-cards {
                grid-template-columns: 1fr;
            }

            
            .two-column {
                grid-template-columns: 1fr;
            }
            
            .music-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }

            .revival-grid {
                grid-template-columns: 1fr;
            }

 
            .character-headshot {
                width: 80px;
                height: 80px;
            }
            .character-image-container {
                top: -10px;
                right: -10px;
            }
            .character-card {
                padding-top: 25px; /* Adjust padding for smaller screens */
                padding-right: 25px;
            }

        }