html, body {
		margin: 0;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: #1e1e2f;
		color: #eee;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding: 20px;
		box-sizing: border-box;
		min-height: 100vh;
	  }

	  .header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-bottom: 10px;
	  }

	  img.hero {
		max-width: 80px;
		width: 80px;
		height: auto;
		border-radius: 15px;
	  }

	  /* Desktop */
	  @media (min-width: 600px) {
		img.hero {
		  max-width: 80px;
		}
	  }

	  /* Mobile */
	  @media (max-width: 599px) {
		img.hero {
		  max-width: 60px;
		}
	  }

	  /* Tiny screens / smartwatches */
	  @media (max-width: 320px) {
		img.hero {
		  max-width: 50px;
		}
	  }

	  .logo-link {
		display: inline-block;
		cursor: pointer;
	  }

	  img.hero:hover {
		transform: scale(1.05);
	  }

	  h1 {
		font-size: 2.5rem;
		margin: 0;
		letter-spacing: 2px;
		text-shadow: 0 0 10px #9c27b0;
	  }
	  h2 {
		font-size: 1.6rem;
		margin: 30px 0 15px;
		letter-spacing: 1px;
		color: #b48aff;
		text-shadow: 0 0 8px #7e57c2;
	  }

	  ul.links {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 25px;
		flex-wrap: wrap;
		justify-content: center;
	  }
	  
	  ul.links:has(> li > a[href="blog.html"]) {
		margin-top: 10px;
	  }
	  ul.links li a {
		text-decoration: none;
		color: #9c27b0;
		font-weight: 600;
		font-size: 1.2rem;
		padding: 10px 20px;
		border: 2px solid #9c27b0;
		border-radius: 8px;
		transition: background-color 0.3s ease, color 0.3s ease;
		cursor: pointer;
		display: inline-block;
		-webkit-tap-highlight-color: transparent;
		position: relative;
		overflow: hidden;
	  }
	  ul.links li a i { margin-right: 8px; }
	  ul.links li a:hover { background-color: #9c27b0; color: #fff; }
	  @media(hover:none){ ul.links li a:hover{ background-color: transparent; color: #9c27b0; } }

	  .tap-active { background-color: #9c27b0 !important; color: #fff !important; }
	  ul.links li a.expanded { background-color: #9c27b0; color: #fff; }

	  .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 600ms linear; background-color: rgba(255,255,255,0.5); pointer-events: none; }
	  @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } }

	  #mc-ip { margin-top:8px; color:#bbb; font-size:1rem; max-height:0; opacity:0; overflow:hidden; transition:max-height 0.5s ease, opacity 0.5s ease; }
	  #mc-ip.show { max-height:400px; opacity:1; }

	  #player-list-container { max-height:200px; overflow-y:auto; margin-top:10px; padding-right:5px; }
	  #player-list { list-style:none; padding:0; margin:0; text-align:left; }
	  #player-list li { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); margin-bottom:6px; }
	  #player-list img { width:28px; height:28px; border-radius:6px; image-rendering:pixelated; }
	  #player-count { margin:6px 0 4px; color:#cfcfea; font-weight:600; }

	  @media(max-width:500px){ ul.links { flex-direction: column; gap:15px; } }

	  .submenu {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.4s ease, opacity 0.4s ease;
	  }
	  .submenu.show {
		max-height: 500px;
		padding-bottom: 15px;
		opacity: 1;
	  }
	  .submenu a {
		font-size: 1rem;
		padding: 8px 14px;
		border-color: #b48aff;
		color: #b48aff;
		transition: background-color 0.3s ease, color 0.3s ease;
	  }
	  .submenu a:hover { background-color: #9c27b0; color: #fff; }

	  #minecraft-submenu a,
	  #media-submenu a, 
	  #grandarr-submenu a {
		font-size: 1rem;
		padding: 8px 16px;
		color: #b968c7;
		border: 2px solid #b968c7;
		font-weight: normal;
	  }

	  p a {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		font-size: inherit !important;
		font-weight: normal !important;
		display: inline !important;
		background: none !important;
		color: #80b3ff !important;
		text-decoration: underline;
		cursor: pointer;
	  }
	  p a:hover {
		color: #b48aff !important;
		background: none !important;
		text-decoration: underline;
	  }

	  .blog-container {
		display: flex;
		width: 1200px;
		margin: 20px auto;
		padding: 0;
	  }

	  .sidebar {
		width: 300px;
		padding: 20px;
		background: rgba(255,255,255,0.05);
		border-radius: 12px;
		margin-right: 20px;
		border: 2px solid #9c27b0;
	  }

	  .sidebar h3 {
		margin-top: 0;
		color: #b48aff;
	  }

	  .posts {
		list-style: none;
		padding: 0;
	  }

	  .posts li {
		border-bottom: 1px solid rgba(156, 39, 176, 0.3);
	  }

	  .posts li:last-child {
		border-bottom: none;
	  }

	  .posts li a {
		display: block;
		padding: 10px;
		color: #9c27b0;
		text-decoration: none;
		border-radius: 4px;
		transition: background-color 0.3s;
	  }

	  .posts li a:hover {
		background-color: #9c27b0;
		color: #fff;
	  }

	  main {
		width: 880px;
		padding: 20px;
		background: rgba(255,255,255,0.02);
		border-radius: 12px;
		border: 2px solid #9c27b0;
	  }

	  @media (max-width: 768px) {
		.blog-container {
		  flex-direction: column;
		  width: 100%;
		  padding: 0 10px;
		}
		.sidebar {
		  width: 100%;
		  margin-right: 0;
		  margin-bottom: 20px;
		}
		main {
		  width: 100%;
		}
	  }

	  article {
		color: #ffffff;
	  }

	  article h2 {
		color: #b48aff;
		margin-bottom: 10px;
	  }

	  article p {
		color: #ffffff;
		line-height: 1.6;
		margin-bottom: 15px;
	  }