 /* Reset & Base */
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
 	background: linear-gradient(135deg, #1a1a2e, #16213e);
 	color: #ffffff;
 	line-height: 1.6;
 	animation: fadeIn 1.2s ease-in-out;
 }

 a {
 	color: #00fff7;
 	text-decoration: none;
 	transition: color 0.3s;
 }

 a:hover {
 	color: #ff4f91;
 }

 /* Header */
 header {
 	background: rgba(0, 0, 0, 0.7);
 	padding: 15px 30px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 	position: sticky;
 	top: 0;
 	z-index: 1000;
 }

 nav {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }

 .left {
 	font-size: 1.8em;
 	font-weight: bold;
 	color: #00fff7;
 	animation: slideInLeft 1s;
 }

 .right ul {
 	list-style: none;
 	display: flex;
 	gap: 20px;
 }

 .right li {
 	transition: transform 0.3s ease;
 }

 .right li:hover {
 	transform: scale(1.1);
 }

 /* Main */
 main {
 	padding: 60px 20px;
 	text-align: center;
 	max-width: 900px;
 	margin: auto;
 	animation: slideInUp 1s;
 }

 h1 {
 	font-size: 3em;
 	color: #00fff7;
 }

 h2 {
 	margin: 20px 0;
 	font-size: 2em;
 	color: #ff4f91;
 }

 p {
 	margin: 20px 0;
 	font-size: 1.1em;
 	text-align: justify;
 }

 /* Footer */
 footer {
 	text-align: center;
 	padding: 20px;
 	background-color: rgba(0, 0, 0, 0.7);
 	margin-top: 50px;
 	color: #aaa;
 }

 /* Animations */
 @keyframes fadeIn {
 	from {
 		opacity: 0;
 	}

 	to {
 		opacity: 1;
 	}
 }

 @keyframes slideInLeft {
 	from {
 		transform: translateX(-100%);
 		opacity: 0;
 	}

 	to {
 		transform: translateX(0);
 		opacity: 1;
 	}
 }

 @keyframes slideInUp {
 	from {
 		transform: translateY(30px);
 		opacity: 0;
 	}

 	to {
 		transform: translateY(0);
 		opacity: 1;
 	}
 }

 /* Responsive */
 @media (max-width: 768px) {
 	nav {
 		flex-direction: column;
 		align-items: flex-start;
 	}

 	.clock {
 		font-size: 18px;
 		margin-top: 10px;
 		color: #fff;

 	}

 	.right ul {
 		flex-direction: column;
 		width: 100%;
 	}

 	.right li {
 		padding: 10px 0;
 	}

 	main {
 		padding: 30px 10px;
 	}
 }