@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

/* CSS Variables */
:root {
    --primary-color: #ff4081;
    --bg-gradient: linear-gradient(135deg, var(--primary-color), #181818);
    --navbar-bg-color: rgba(50, 50, 50, 0.8); /* Default navbar background */
    --navbar-text-color: #ffffff; /* Default navbar text color */
    --navbar-link-hover-color: var(--primary-color);
    
    /* Maze game specific variables */
    --bg-color: #ffffff;
    --text-color: #333333;
    --accent-color: var(--primary-color);
    --wall-color: #333333;
    --path-color: #ffffff; 
    --player-color: var(--primary-color);
    --start-marker-color: #4CAF50;
    --finish-marker-color: #FFC107;
}

/* General Styles */
body {
    /* background: var(--bg-gradient); */
    color: white;
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: url(../img/stonewall.png) no-repeat center center fixed;
    background-size: cover;
    transition: background 0.5s, color 0.5s;
    overflow-x: hidden;
}

/* Dark Mode Styles */
body.dark-mode {
    --primary-color: #a8a8a8;
    --navbar-bg-color: rgba(0, 0, 0, 0.8);
    --navbar-text-color: #eeeeee;
    background: url(../img/stonewall.png) no-repeat center center fixed;
    background-size: cover;
    /* --bg-gradient: linear-gradient(135deg, #181818, #000000);
    background: var(--bg-gradient); */
    color: #eee;
    
    /* Dark mode maze variables */
    --bg-color: #121212;
    --text-color: #eeeeee;
    --wall-color: #555555;
    --path-color: #212121;
    --start-marker-color: #3D9140;
    --finish-marker-color: #D4A30D;
}

/* Navbar Styles */
.navbar {
    background: var(--navbar-bg-color); /* Use CSS variable */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background 0.3s, backdrop-filter 0.3s;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link { /* Target nav links as well */
    color: var(--navbar-text-color); /* Use CSS variable */
    transition: color 0.3s;
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--navbar-link-hover-color); /* Use CSS variable for hover */
}

/* Navbar Social Media Styles */
.navbar-brand-container {
    display: flex;
    align-items: center;
}

.social-media-navbar {
    display: flex;
    gap: 10px;
    margin-left: 15px;
}

.social-media-navbar a {
    color: var(--navbar-text-color); /* Use CSS variable */
    font-size: 1.2em;
    transition: color 0.3s;
}

.social-media-navbar a:hover {
    color: var(--navbar-link-hover-color); /* Use CSS variable for hover */
}

/* Logo Styles */
.logo-container {
    position: fixed;
    top: 60px;
    /* Adjust as needed */
    left: 20px;
    width: 100px;
    /* Adjust as needed */
    height: 100px;
    /* Adjust as needed */
    z-index: 1000;
}

.logo {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Heading Styles */
h1,
h2 {
    color: var(--primary-color);
    transition: color 0.3s;
}

.dark-mode h1,
.dark-mode h2 {
    color: var(--primary-color);
}

/* Image Styles */
img:hover {
    transform: scale(1.08);
    transition: 0.3s ease-in-out;
}

/* Glass Effect Styles */
.glass {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease; /* Added transition for smooth collapse */
}

.glass.collapsed>*:not(h2) {
    display: none;
}

.glass.collapsed {
    padding: 10px;
}

.dark-mode .glass {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fade-in Animation */
.fade-in {
    animation: fadeIn 1s ease-in-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Theme Toggle Button */
#theme-toggle {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#theme-toggle:hover {
    background-color: #d6336c;
}

/* Chat Container Styles */
#chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 10px;
}

/* Form Styles */
form input[type="text"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    transition: border-color 0.3s;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
    border-color: var(--primary-color);
}

form textarea {
    resize: vertical;
}

form button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

form button[type="submit"]:hover {
    background-color: #d6336c;
}

/* Subtitle Styles */
.subtitle {
    font-size: 1.5em;
    color: #ddd;
    margin-top: 0.5em;
}

/* Scream Popup Styles */
#scream-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(61, 61, 61, 0.829);
    color: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 1000;
    text-align: center;
    font-size: 2em;
}

/* 3D Object Container Styles */
#rotating-object-container {
    width: 200px;
    height: 200px;
    margin: 20px auto;
}

/* Gallery Styles */
#gallery .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#gallery img {
    width: 300px;
    height: auto;
    margin: 10px;
    border-radius: 5px;
}

/* Video Styles */
#videos video {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    display: block;
}

/* Video Glass Styles */
.video-glass {
    background: rgba(30, 30, 40, 0.7);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    padding: 1rem;
    margin: 0 auto;
    max-width: 900px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-glass iframe {
    border-radius: 12px;
    width: 100%;
    height: 450px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    background: #000;
}

/* Multilingual Support Button */
#translate-bio {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

#translate-bio:hover {
    background-color: #0056b3;
}

/* Proofs Section Styles */
#proofs {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Resume Section Styles */
#resume {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#download-resume {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

#download-resume:hover {
    background-color: #218838;
}

/* Portfolio Section Styles */
#portfolio {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Skills Chart Section Styles */
#skills-chart {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* GitHub Widget Styles */
#github {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#github-repos ul {
    list-style: none;
    padding: 0;
}

#github-repos li {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#github-repos li:last-child {
    border-bottom: none;
}

#github-repos a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: block;
    transition: color 0.3s;
}

#github-repos a:hover {
    color: white;
    text-decoration: none;
}

#github-repos p {
    color: #ddd;
    font-size: 0.9em;
    margin-top: 5px;
}

#github-repo-stats {
    display: flex;
    gap: 10px;
    font-size: 0.8em;
    color: #bbb;
}

#github-repo-stats span {
    display: flex;
    align-items: center;
}

#github-repo-stats svg {
    margin-right: 5px;
}

/* Discord Section Styles */
#discord {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#discord-widget iframe {
    width: 100%;
    max-width: 350px;
    height: 500px;
    border: none;
}

/* Business Section Styles */
#business {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#business h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

#business ul {
    list-style: disc;
    margin-left: 20px;
    color: #ddd;
}

#business a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

#business a:hover {
    color: white;
    text-decoration: underline;
}

/* Contact Section Styles */
#contact {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#contact p {
    color: #ddd;
    margin-bottom: 5px;
}

#contact form {
    margin-top: 20px;
}

#contact form input[type="text"],
#contact form input[type="email"],
#contact form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ddd;
    transition: border-color 0.3s;
}

#contact form input[type="text"]:focus,
#contact form input[type="email"]:focus,
#contact form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

#contact form textarea {
    resize: vertical;
}

#contact form button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#contact form button[type="submit"]:hover {
    background-color: #d6336c;
}

#contact .contact-info {
    margin-top: 20px;
    font-size: 0.9em;
}

#contact .contact-info p {
    margin-bottom: 5px;
}

/* Social Media Styles */
.social-media {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: left;
}

.social-media a {
    color: #ddd;
    font-size: 1.2em;
    transition: color 0.3s;
}

.social-media a:hover {
    color: var(--primary-color);
}

#contact .copyright {
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
}

/* Chat Icon Styles */
#chat-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: url('images/Digital-Synergy.png') center/cover no-repeat;
    /* Replace with your icon */
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

#chat-icon:hover {
    transform: scale(1.1);
}

/* Theme Dropdown Styling */
#theme-select {
    background: rgba(30, 30, 40, 0.7);
    color: var(--primary-color, #ff4081);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 1rem;
    font-family: inherit;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    outline: none;
    margin-left: 1rem;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

#theme-select:focus, #theme-select:hover {
    background: rgba(50, 50, 70, 0.85);
    border-color: var(--primary-color, #ff4081);
    color: #fff;
}

/* Styles for the Customize Theme Button */
#toggle-random-theme-widget-button {
    background-image: var(--customize-button-bg-image, linear-gradient(45deg, #6c757d, #343a40)); /* Default gradient */
    color: var(--customize-button-text-color, #ffffff) !important; /* Ensure text color overrides Bootstrap */
    border: 1px solid var(--customize-button-border-color, #6c757d);
    padding: 0.25rem 0.5rem; /* from btn-sm */
    font-size: .875rem; /* from btn-sm */
    border-radius: 0.2rem; /* from btn */
    transition: background-image 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    /* Override bootstrap outline styles */
    background-color: transparent; /* Necessary for background-image to show */
}

#toggle-random-theme-widget-button:hover {
    opacity: 0.85;
    /* Bootstrap's default hover for btn-outline-light might interfere.
       If specific hover background/text color is needed, define variables and set them here. */
}

#open-theme-widget-button {
    background-image: var(--customize-button-bg-image, linear-gradient(45deg, #6c757d, #343a40)); /* Default gradient */
    color: var(--customize-button-text-color, #ffffff) !important; /* Ensure text color overrides Bootstrap */
    border: 1px solid var(--customize-button-border-color, #6c757d);
    padding: 0.25rem 0.5rem; /* from btn-sm */
    font-size: .875rem; /* from btn-sm */
    border-radius: 0.2rem; /* from btn */
    transition: background-image 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    /* Override bootstrap outline styles */
    background-color: transparent; /* Necessary for background-image to show */
}

#open-theme-widget-button:hover {
    opacity: 0.85;
    /* Bootstrap's default hover for btn-outline-light might interfere.
       If specific hover background/text color is needed, define variables and set them here. */
}

#set-random-theme-button {
    background-image: var(--customize-button-bg-image, linear-gradient(45deg, #6c757d, #343a40)); /* Default gradient */
    color: var(--customize-button-text-color, #ffffff) !important; /* Ensure text color overrides Bootstrap */
    border: 1px solid var(--customize-button-border-color, #6c757d);
    padding: 0.25rem 0.5rem; /* from btn-sm */
    font-size: .875rem; /* from btn-sm */
    border-radius: 0.2rem; /* from btn */
    transition: background-image 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    /* Override bootstrap outline styles */
    background-color: transparent; /* Necessary for background-image to show */
}

#set-random-theme-button:hover {
    opacity: 0.85;
    /* Bootstrap's default hover for btn-outline-light might interfere.
       If specific hover background/text color is needed, define variables and set them here. */
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Adjust base font size for mobile */
    }

    .navbar-brand {
        font-size: 1.2em; /* Smaller brand text */
    }

    .navbar .container-fluid {
        flex-direction: column; /* Stack navbar items */
        align-items: flex-start;
    }

    #theme-select, #color-picker {
        margin-left: 0;
        margin-top: 10px; /* Add space when stacked */
        width: 100%; /* Make them full width for easier tapping */
    }

    .social-media-navbar {
        margin-left: 0;
        margin-top: 10px;
    }
    
    .logo-container {
        top: 10px; /* Adjust logo position */
        left: 10px;
        width: 60px; /* Smaller logo */
        height: 60px;
    }

    header h1 {
        font-size: 2em; /* Adjusted from your 2.5em for further reduction */
    }

    .subtitle {
        font-size: 1em; /* Adjusted from your 1.2em */
    }

    .container {
        margin-top: 20px; /* Reduce top margin */
        padding-left: 15px;
        padding-right: 15px;
    }

    .glass {
        padding: 15px; /* Reduce padding in glass sections */
    }

    #bio #generated-bio {
        flex-direction: column; /* Stack image and text in bio */
        align-items: center;
        text-align: center;
    }

    #bio .bio-picture {
        margin-bottom: 15px;
    }

    #resume-content h3, #resume-content h4 {
        font-size: 1.2em;
    }
    #resume-content p, #resume-content li {
        font-size: 0.9em;
    }

    .video-glass iframe {
        height: 300px; /* Adjust video height */
    }

    .contact-form {
        padding: 1rem; /* Reduce padding for contact form */
        margin-left: 0;
        margin-right: 0;
    }

    #contact .contact-info p {
        font-size: 0.85em;
    }

    #gallery img {
        width: 100%; /* Ensures gallery images are responsive */
        margin: 5px 0; /* Adjust margin for stacked images */
    }

    /* Ensure all images are responsive by default within this breakpoint */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }

    header h1 {
        font-size: 1.8em;
    }

    .subtitle {
        font-size: 0.9em;
    }
    
    .navbar .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo-container {
        width: 50px;
        height: 50px;
    }

    .video-glass iframe {
        height: 250px;
    }
    
    #download-resume, #my-form-button {
        padding: 8px 15px; /* Smaller buttons */
        font-size: 0.9em;
    }
}

/* Custom Footer Styles */
#custom-footer {
    padding: 20px 0;
    text-align: center;
    margin-top: 40px; /* Space above the footer */
}

.footer-content {
    max-width: 100%; /* Limit footer width */
    margin: 0 auto; /* Center the content */
    padding: 20px;
    /* Glass effect is already applied via .glass class */
}

.social-media-footer {
    margin-bottom: 15px;
}

.social-media-footer a {
    color: var(--primary-color); /* Use theme color for icons */
    font-size: 1.5em; /* Larger icons */
    margin: 0 10px;
    transition: color 0.3s;
}

.social-media-footer a:hover {
    color: white; /* Or a lighter shade of the primary color */
}

.dark-mode .social-media-footer a:hover {
    color: #ccc;
}

.copyright-footer {
    font-size: 0.9em;
    color: #ccc; /* Default light gray for text */
    margin-bottom: 10px;
}

.dark-mode .copyright-footer {
    color: #aaa;
}

#custom-footer a#back-to-top {
    color: var(--primary-color); /* Use theme color */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

#custom-footer a#back-to-top:hover {
    color: white;
    text-decoration: underline;
}

.dark-mode #custom-footer a#back-to-top:hover {
    color: #ccc;
}

/* Ensure footer text color changes with themes that alter general text color */
body.cyberpunk-mode .copyright-footer,
body.retro-mode .copyright-footer,
body.neon-mode .copyright-footer,
body.pastel-mode .copyright-footer {
    color: inherit; /* Inherit from body color set by theme */
}

body.grayscale-mode .copyright-footer {
    color: #eee;
}

body.solarized-mode .copyright-footer {
    color: #839496; /* Solarized base text color */
}

body.monokai-mode .copyright-footer {
    color: #F8F8F2; /* Monokai base text color */
}

body.oceanic-mode .copyright-footer {
    color: #C0C5CE; /* Oceanic base text color */
}

body.highcontrast-mode .copyright-footer {
    color: #FFFF00; /* High contrast primary color for text */
}

/* PDF Export Specific Styles */
.pdf-export-active #resume-content.pdf-export-styles {
    background-color: #ffffff !important;
    padding: 15px !important; /* Consistent padding */
    font-family: Arial, sans-serif !important; /* Basic font */
}

.pdf-export-active #resume-content.pdf-export-styles * {
    background-image: none !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.4 !important; /* Adjust line height for readability */
    font-size: 10pt !important; /* Consistent font size */
}

/* Ensure headings and specific elements in PDF have clear, basic styling */
.pdf-export-active #resume-content.pdf-export-styles h3,
.pdf-export-active #resume-content.pdf-export-styles h4,
.pdf-export-active #resume-content.pdf-export-styles strong {
    font-weight: bold !important;
    /* Color will be set by JS based on theme */
}

.pdf-export-active #resume-content.pdf-export-styles p,
.pdf-export-active #resume-content.pdf-export-styles li {
    margin-bottom: 8pt !important;
    /* Color will be set by JS based on theme */
}

.pdf-export-active #resume-content.pdf-export-styles ul {
    list-style-type: disc !important; /* Ensure basic bullets */
    padding-left: 20pt !important;
}

/* Hide elements not suitable for PDF */
.pdf-export-active .navbar,
.pdf-export-active #custom-footer,
.pdf-export-active #chat-container,
.pdf-export-active #particles-container,
.pdf-export-active #scream-popup,
.pdf-export-active #download-resume, /* Hide the download button itself */
.pdf-export-active .logo-container {
    display: none !important;
}

/* Cyberpunk Theme Styles */
body.cyberpunk-mode {
    --primary-color: #0f0;
    background: #000;
    color: var(--primary-color);
    
    /* Cyberpunk maze variables */
    --bg-color: #000000;
    --text-color: #0f0;
    --wall-color: #0066ff;
    --path-color: #001100;
    --player-color: #ff00ff;
    --start-marker-color: #00cc00;
    --finish-marker-color: #ffff00;
}

.cyberpunk-mode h1,
.cyberpunk-mode h2 {
    color: var(--primary-color);
}

.cyberpunk-mode .glass {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

/* Retro Theme Styles */
body.retro-mode {
    --primary-color: #FFA500;
    --bg-gradient: linear-gradient(135deg, #FFA500, #800080);
    background: var(--bg-gradient);
    color: black;
    
    /* Retro maze variables */
    --wall-color: #800080;
    --path-color: #FFA500;
    --player-color: #FF0000;
}

/* Neon Theme Styles */
body.neon-mode {
    --primary-color: #00FFFF;
    --bg-gradient: linear-gradient(135deg, #00FFFF, #111);
    background: var(--bg-gradient);
    color: black;
}

/* Pastel Theme Styles */
body.pastel-mode {
    --primary-color: #E0BBE4;
    --bg-gradient: linear-gradient(135deg, #E0BBE4, #957DAD);
    background: var(--bg-gradient);
    color: black;
}

/* Grayscale Theme Styles */
body.grayscale-mode {
    --primary-color: #808080;
    --bg-gradient: linear-gradient(135deg, #808080, #000);
    background: var(--bg-gradient);
    color: white;
}

/* Solarized Theme Styles */
body.solarized-mode {
    --primary-color: #268BD2;
    background: #002B36;
    color: #839496;
}

/* Monokai Theme Styles */
body.monokai-mode {
    --primary-color: #A6E22E;
    background: #272822;
    color: #F8F8F2;
}

/* Oceanic Theme Styles */
body.oceanic-mode {
    --primary-color: #6699CC;
    background: #2B303B;
    color: #C0C5CE;
}

/* Highcontrast Theme Styles */
body.highcontrast-mode {
    --primary-color: #FFFF00;
    background: #000000;
    color: black;
}

/* Maze Game Specific Styles */
.maze-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    max-width: 550px;
}

.maze-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
}

.start-marker {
    color: var(--start-marker-color);
    display: flex;
    align-items: center;
}

.finish-marker {
    color: var(--finish-marker-color);
    display: flex;
    align-items: center;
}

.start-marker-icon, .finish-marker-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 5px;
}

.start-marker-icon {
    background-color: var(--start-marker-color);
}

.finish-marker-icon {
    background-color: var(--finish-marker-color);
}

#mazeCanvas {
    border: 2px solid var(--accent-color, var(--primary-color));
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.contact-form {
  background: rgba(30, 30, 40, 0.7);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 500px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--primary-color, #ff4081);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-color, #ff4081);
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.contact-form button {
  background: var(--primary-color, #ff4081);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.contact-form button:hover {
  background: #fff;
  color: var(--primary-color, #ff4081);
}

/* Styles for PDF Export */
.pdf-export-styles,
.pdf-export-styles * { /* Apply to all children within the container */
    color: #000000 !important; /* Black text */
    background-color: #ffffff !important; /* White background */
    background-image: none !important; /* Remove any background images */
    font-family: Arial, sans-serif !important;
    /* New additions for text rendering */
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important; /* For Webkit browsers */
    -moz-osx-font-smoothing: grayscale !important; /* For Firefox */
    font-kerning: normal !important;
    font-variant-ligatures: none !important;
    text-shadow: none !important; /* Ensure no text shadows */
    letter-spacing: normal !important; /* Ensure normal letter spacing */
    word-spacing: normal !important; /* Ensure normal word spacing */
    line-height: normal !important; /* Ensure normal line height */
    font-size: inherit !important; /* Attempt to normalize font sizes if they are too erratic */
}

.pdf-export-styles h1,
.pdf-export-styles h2,
.pdf-export-styles h3,
.pdf-export-styles h4,
.pdf-export-styles h5,
.pdf-export-styles h6 {
    color: #000000 !important; /* Ensure headings are also black */
    font-weight: bold !important; /* Ensure headings are bold if they weren't */
}

.pdf-export-styles ul, .pdf-export-styles li {
    list-style-type: disc !important; /* Force a basic list style if symbols are issues */
}

.pdf-export-styles a {
    color: #0000FF !important; /* Optional: style links for PDF */
    text-decoration: underline !important;
}