@font-face {
			font-family: rim;
			src: url(font01.ttf);
			font-weight: 100;
		}
		
		body {
            font-family: rim; /* Playful font */
            background: #f0e7ff url('../images/bjconcept2.jpg'); /* Soft pastel purple */
            color: #e0e0e0;
            width: 900px;
            margin: 0 auto;
			padding: 100px 0;
        }
        .container {;
            background: rgb(238 225 230); /* Light pastel pink */
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 2px solid #ffb6c1; /* Soft pink border */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }
        header {
            background: #e8e4fc url('../images/batthern.png');
			background-position: bottom left;
            padding: 20px;
            height: 200px;
            text-align: left;
            font-size: 28px;
            font-weight: bold;
            color: #ff8c00; /* Orange accent */
        }
		.nav-menu {
            background: linear-gradient(145deg, #e6e4f7, #dcd7ff); /* Pastel gradient */
            border-bottom: 2px dotted #d5d0ff; /* Dashed border for a playful touch */
            padding: 10px;
            border-radius: 0 0 20px 20px;
        }
		.sub-menu .menu-item {
			margin-top: 4px;
		}
		#menu-main {
			display: flex;
            justify-content: space-evenly;
			margin:0;
		}
		.nav-menu ul {
			list-style-type: none; /* Removes the dots */
			padding-left: 0; /* Optional: removes any default padding */
		}

		.nav-menu li {
			margin: 0; /* Optional: removes default margin from <li> */
		}
		
		.nav-menu ul {
			list-style-type: none;
			padding-left: 0;
		}

		.nav-menu li {
			position: relative;
		}
		.sub-menu {
			width: 100%;
		}
		.nav-menu ul ul { /* Target submenus */
			display: none; /* Hide submenus by default */
			position: absolute; /* Ensures submenu appears near the parent item */
			left: 0; /* Align submenu with parent */
			top: 100%; /* Position submenu directly below the parent */
			z-index: 1000; /* Ensure submenu appears above other content */
		}

		.nav-menu li:hover > ul { /* Show submenus on hover */
			display: block;
		}
        .menu-item {
            flex: 1;
            color: #f88379; /* Soft orange-pink */
            text-align: center;
            text-decoration: none;
            background: #e8e4fc; /* Light pastel background */
            border-right: 1px solid #cfcff4;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: inset 0 0 5px #ccc, 0 2px #ddd;
            border-radius: 15px;
			text-shadow: 0px -1px #d3d3d3;
            margin: 8px;
        }
		.menu-item::after {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			width: calc(100% - 4px);
			height: 50%;
			background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
			border-radius: 10px;
			box-shadow: 0px 1px 4px -2px #3333333b;
			pointer-events: none;
		}
		.menu-item a {
			text-decoration: none;
			color: #f88379;
			display: block;
			padding: 14px 0;
		}
        .menu-item:last-child {
            border-right: none;
        }
        .menu-item:hover {
			background: linear-gradient(180deg, rgb(255 254 236) 0%, rgb(255 255 238) 5%, rgb(221 215 255) 100%);
			color: #f78a83;
		}
        .content {
             padding-top: 20px;
            background: rgba(255, 240, 245, 0.95);
            color: #4d4d4d;
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
        }
        footer {
            text-align: center;
            padding: 10px;
            font-size: 16px;
            background: linear-gradient(180deg, rgba(240,230,255,1) 0%, rgba(222,209,241,1) 3%, rgba(240,230,255,1) 40%, rgba(240,230,255,1) 60%, rgba(222,209,241,1) 100%);
            border-top: 2px dotted #d5d0ff;
            color: #ff8c00;
            border-radius: 0 0 20px 20px;
			display: flex;
			justify-content: space-evenly;
        }
		
/* WebKit Scrollbar Styling */
::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f0f0f0, #dcdcdc); /* Soft background gradient */
    border-radius: 10px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); /* Light shadow for a 3D effect */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a4d0ee, #4f80a9); /* Glossy gradient */
    border-radius: 10px;
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.5), inset -1px -1px 3px rgba(0, 0, 0, 0.2); /* Inner glow and shadow */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a4d0ee, #4f80a9); /* Slightly lighter on hover */
}

.comment {
	list-style-type: none;
	padding: 20px;
	padding-top: 10px;
	background: linear-gradient(39deg, rgba(218,234,245,0.7147233893557423) 0%, rgba(203,255,225,0.1516981792717087) 100%);
	border-radius: 10px;
	box-shadow: 0 0 8px #3333332c inset, 0 2px 5px #333333ec;
	margin: 20px 0;
}

.online-indicator {
    color: #00c0ff;
}