SteamStat.us - Windows 95 Theme by Nick2bad4u

/* ==UserStyle==
@name         SteamStat.us - Windows 95 Theme
@version      20241119.00.12
@namespace    typpi.online
@supportURL   https://github.com/Nick2bad4u/UserStyles/issues
@description  SteamStat.us - Windows 95 theme
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@author       Nick2bad4u
@license      UnLicense
==/UserStyle== */
@-moz-document domain("steamstat.us") {
	/* Main title styling with Windows 95 look */
	.title {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 10px 0;
		border: 2px solid #ffffff;
		border-right-color: #808080;
		border-bottom-color: #808080;
		background-color: #c0c0c0; /* Light gray background */
		padding: 5px;
		color: black;
		font-weight: 700;
		font-size: 2em;
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
		text-align: center;
	}

	/* Logo addition with Windows 95 logo */
	.title::after {
		display: inline-block;
		margin-left: 10px;
		background: url('https://i.gyazo.com/e96376514655b9307ce82826b1ae2691.png')
			no-repeat center;
		background-size: contain;
		width: 150px;
		height: 50px;
		content: '';
	}

	/* Link styling */
	a {
		color: #0000ee; /* Standard link color */
		font-weight: 400;
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
		text-decoration: underline;
	}

	a:hover {
		color: #551a8b; /* Visited link color */
	}

	/* Status colors */
	.good {
		color: black;
	}
	.minor {
		color: #808080; /* Dark gray */
	}
	.major {
		color: #ff0000; /* Red */
	}

	/* Refresh button styling */
	#js-refresh {
		cursor: pointer;
		border: 2px solid #ffffff;
		border-right-color: #808080;
		border-bottom-color: #808080;
		background-color: #c0c0c0;
		padding: 2px 5px;
		color: black;
		font-weight: 700;
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
	}

	#js-refresh:active {
		border-color: #808080 #ffffff #ffffff #808080;
	}

	/* Container styling */
	.services,
	#psa,
	noscript,
	footer,
	div.regions-title.sep {
		margin: 10px;
		border: 2px solid #ffffff;
		border-right-color: #808080;
		border-bottom-color: #808080;
		background-color: #c0c0c0; /* Light gray */
		padding: 10px;
		color: black;
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
	}

	/* Body styling */
	body {
		margin: 0;
		background-color: #008080; /* Teal background */
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
	}

	/* Tooltip customization */
	[data-tooltip]::before {
		position: absolute;
		top: -30px;
		left: 0;
		visibility: hidden;
		opacity: 0%;
		z-index: 1000;
		border: 1px solid #000000;
		background-color: #ffffe0; /* Light yellow */
		padding: 5px;
		width: 200px;
		content: attr(data-tooltip);
		color: black;
		font-size: 0.8em;
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
	}
	[data-tooltip]:hover::before {
		visibility: visible;
		opacity: 100%;
	}

	/* Buttons */
	button {
		cursor: pointer;
		border: 2px solid #ffffff;
		border-right-color: #808080;
		border-bottom-color: #808080;
		background-color: #c0c0c0;
		padding: 2px 5px;
		color: black;
		font-family:
			MS Sans serif,
			Tahoma,
			Verdana,
			Arial,
			sans-serif;
	}
	button:active {
		border-color: #808080 #ffffff #ffffff #808080;
	}

	/* Remove modern scrollbars */
	::-webkit-scrollbar {
		width: 16px;
	}
	::-webkit-scrollbar-track {
		border-top: 2px solid #ffffff;
		border-right: 2px solid #808080;
		border-bottom: 2px solid #808080;
		border-left: 2px solid #ffffff;
		background: #c0c0c0;
	}
	::-webkit-scrollbar-thumb {
		border: 1px solid #808080;
		background: #e0e0e0;
	}
}