@charset "utf-8";
/* CSS Document */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            color: #1f2937;
        }
		
		h1 { 
			font-size: 160%;
			text-align: center;
			color: #AA205C; /* Set a base color */
			padding: 5px 15px;
			box-sizing: border-box;
			border-radius: 25px;
			font-family: 'Indie Flower', cursive;
			transition: color 0.3s ease;
			
		}
		h1:hover {
			cursor:pointer;
			font-family: 'Indie Flower', cursive;
			font-weight: bold;
				/* Key properties for the AI effect */
			background-image: linear-gradient(
				90deg,
				#1a73e8, /* Blue */
				#34a853, /* Green */
				#000, 	/* black */
				#B6C511,
				#1a73e8, /* Blue again for a smooth loop */
				#34a853
			);
			background-size: 400% 100%; /* Make the gradient wider than the text */
				-webkit-background-clip: text; /* Clips the background to the text shape */
			background-clip: text;
			color: transparent; /* Makes the text itself transparent to show the background */
			animation: animated-text-color 4s infinite linear; /* New text color animation */					
		}

		.index { 
			font-family: 'Courier New', monospace;
			font-weight: bold;
			color: #AA205C;
			transition: color 0.3s ease;
		}

		.index:hover { 
			font-family: 'Courier New', monospace;
			font-weight: bold;
				/* Key properties for the AI effect */
			background-image: linear-gradient(
				90deg,
				#1a73e8, /* Blue */
				#34a853, /* Green */
				#000, 	/* black */
				#B6C511,
				#1a73e8, /* Blue again for a smooth loop */
				#34a853
			);
			background-size: 400% 100%; /* Make the gradient wider than the text */
				-webkit-background-clip: text; /* Clips the background to the text shape */
			background-clip: text;
			color: transparent; /* Makes the text itself transparent to show the background */
			animation: animated-text-color 4s infinite linear; /* New text color animation */		
		}
		.index-alert { 
			color: #AA205C;
			transition: color 0.3s ease;
		}

		.index-alert:hover { 
				/* Key properties for the AI effect */
			background-image: linear-gradient(
				90deg,
				#1a73e8, /* Blue */
				#34a853, /* Green */
				#000, 	/* black */
				#B6C511,
				#1a73e8, /* Blue again for a smooth loop */
				#34a853
			);
			background-size: 400% 100%; /* Make the gradient wider than the text */
				-webkit-background-clip: text; /* Clips the background to the text shape */
			background-clip: text;
			color: transparent; /* Makes the text itself transparent to show the background */
			animation: animated-text-color 4s infinite linear; /* New text color animation */		
		}				


        .sitemap-tree ul {
            position: relative;
            padding-left: 1.5rem;
            list-style-type: none;
        }
        
        /* Vertical line */
        .sitemap-tree ul::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0.625rem; /* 10px */
            bottom: 0;
            width: 2px;
            background-color: #d1d5db; /* gray-300 */
        }
        
        /* Horizontal line and dot/icon */
        .sitemap-tree li {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
        }
        
        .sitemap-tree li a, .sitemap-tree li span {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 0.5rem;
            transition: all 0.2s ease-in-out;
        }

        .sitemap-tree li a:hover {
			background-color: #B6C511;
            color: #212121;
        }

        .sitemap-tree li::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0.625rem; /* 10px */
            transform: translateY(-50%);
            width: 0.5rem;
            height: 2px;
            background-color: #d1d5db; /* gray-300 */
        }

        /* Connecting the lines and icons */
        .sitemap-tree li > a::before, .sitemap-tree li > span::before {
            content: '🔗'; /* Link icon for links */
            font-size: 0.75rem;
            margin-right: 0.5rem;
        }
        .sitemap-tree li > span.folder-name::before {
            content: '📂'; /* Folder icon for folders */
            font-size: 1rem;
            margin-right: 0.5rem;
        }
        
        /* Hide the vertical line for the last list item's child */
        .sitemap-tree li:last-child > ul::before {
            height: 1.5rem; /* Stop the line just at the last element */
        }


.imgS {
        border-radius: 10px;
        margin: 1.7px;
        max-width:40px;
		max-height: 90%;
		float:left;
		cursor:pointer;
		transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	 }
	 
.imgS:hover {
		animation: animated-border-glow 8s infinite linear;
    	transition: 0.2s all;
		transform: scale(1.1); 
	 }

/* Keyframes for the new animated border glow */
@keyframes animated-border-glow {
    0% {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1),
                    0 0 10px rgba(100, 100, 255, 0.7); /* Blue */
    }
    25% {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1),
                    0 0 10px rgba(100, 255, 100, 0.7); /* Green */
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1),
                    0 0 10px rgba(255, 100, 100, 0.7); /* Red */
    }
    75% {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1),
                    0 0 10px rgba(255, 255, 100, 0.7); /* Yellow */
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1),
                    0 0 10px rgba(100, 100, 255, 0.7); /* Blue (back to start) */
    }
}

/* Define the keyframes for the text color */
@keyframes animated-text-color {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}