@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*#region Infrastructure */

:root {
	--rust-red: #cd412b;
	--rust-green: #425424;
}

* {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	display: grid;
	grid-template-areas: "header header header"
		"ad-left main ad-right";
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: 60px 1fr;
	background-color: #484a4a;
	background-image: url(/images/bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	backdrop-filter: blur(4px);
	min-height: 100vh;
	width: 100%;
}

/*#region Header */

header {
	grid-area: header;
	position: sticky;
	top: 0;
	background-color: rgba(0, 0, 0, 0.9);
	border-bottom: 1px solid #242423;
	z-index: 2;
}

	header > div {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

		header > div > ul {
			height: 100%;
			display: flex;
			align-items: center;
			list-style-type: none;
		}

			header > div > ul > li {
				height: 100%;
			}

				header > div > ul > li > a {
					height: 100%;
					color: white;
					text-decoration: none;
					font-weight: bold;
					font-size: 13px;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 10px;
					padding-inline: 1.5rem;
					background: transparent;
					transition: 300ms;
				}

					header > div > ul > li > a.active {
						background: linear-gradient(to bottom, #39221f, #412420, #4a2621, #522822, #5b2a23, #612b23, #662c24, #6c2d24, #702e24, #742f25, #783125, #7c3225);
					}

					header > div > ul > li > a > .icon {
						background-color: #827d78;
					}

					header > div > ul > li > a:is(.active, :hover) > .icon {
						background-color: white;
					}

/*#endregion */

main {
	grid-area: main;
	background-color: #202020e6;
	padding-inline: 1rem;
	/*background-color: rgba(0, 0, 0, 0.8);*/
	color: white;
}

/*#endregion */

/*#region Ads */

.ad-left {
	grid-area: ad-left;
}

.ad-right {
	grid-area: ad-right;
}

.ad {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.7);
}

/*#endregion */

/*#region Container */

.container {
	margin-inline: auto;
}

@media (min-width: 576px) {
	.container {
		width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		width: 720px;
	}
}

@media (min-width: 1024px) {
	.container {
		width: 1006px;
	}
}

@media (min-width: 1400px) {
	.container {
		width: 1060px;
	}
}

@media (min-width: 1600px) {
	.container {
		width: 1245px;
	}
}

/*#endregion */

/*#region .switch */
.switch {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	gap: 10px;
}

/*#endregion */

/*#region .icon */
.icon {
	display: inline-flex;
	object-fit: contain;
	color: black;
	background-color: white;
	-webkit-mask: var(--src) no-repeat center / contain;
	mask: var(--src) no-repeat center / contain;
	height: 20px;
	width: 20px;
}
/*#endregion */

/*#region Loading */
#Loading {
	grid-column: 1/-1;
	grid-row: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.50);
	font-weight: bold;
	position: sticky;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	z-index: 200;
}


	#Loading::after {
		content: "";
		position: absolute;
		transform: translate(-50%, -50%);
		animation: spin 1s linear infinite;
		border: 2px solid var(--rust-red);
		background: transparent;
		border-width: 4px;
		border-radius: 50%;
		border-top-color: transparent;
		top: 50%;
		left: 50%;
		height: 150px;
		width: 150px;
	}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
/*#endregion */

/*#region rust-btn */

.rust-btn {
	border: 0;
	color: white;
	height: 45px;
	background: #1e1e1e;
	padding: 13px 16px;
	font-weight: bold;
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	transition: 300ms;
}

	.rust-btn.active {
		background: var(--rust-green);
	}

		.rust-btn.active:hover {
			filter: brightness(1.15);
		}

	.rust-btn:not(.active):hover {
		background: #2c2c2d;
	}

	.rust-btn > .icon {
		height: 20px;
		width: 20px;
		background-color: #827d78;
	}

	.rust-btn.active > .icon {
		background-color: white;
	}
/*#endregion */

/*#region rust-input */

.rust-input {
	position: relative;
	--color: #a2a2a2;
}

	.rust-input > input {
		width: 100%;
		background: #222222;
		border: none;
		outline: none;
		color: var(--color);
		padding-inline: 14px;
		height: 45px;
		font-size: 12px;
		font-weight: bold;
	}

	.rust-input > .icon {
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		height: 14px;
		background: var(--color);
	}

/*#endregion */

/*#region rust-select */

.rust-select {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
}

	.rust-select > b {
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 13px;
	}

	.rust-select > .visualizer {
		margin-left: auto;
		display: flex;
		height: fit-content;
	}

		.rust-select > .visualizer > span {
			min-width: 140px;
			height: 45px;
			display: flex;
			align-items: center;
			padding-inline: 10px;
			font-size: 13px;
			font-weight: bold;
			color: white;
			background: black;
		}

		.rust-select > .visualizer > i {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #222222;
			color: #a89f96;
			height: 45px;
			width: 45px;
			font-size: 20px;
			font-weight: bold;
			cursor: pointer;
		}

			.rust-select > .visualizer > i:hover {
				color: white;
			}

		.rust-select > .visualizer > .option-list {
			position: absolute;
			top: 45px;
			background: #1c1b16;
			border: 2px solid #363732;
			z-index: 2;
			right: 0;
			width: fit-content;
			min-width: 140px;
			list-style-type: none;
			display: flex;
			flex-direction: column;
			gap: 3px;
			padding: 7px;
		}

			.rust-select > .visualizer > .option-list > li {
				background-color: #13140f;
				font-weight: bold;
				font-size: 13px;
				padding: 10px 14px;
				cursor: pointer;
				transition: background-color 300ms;
			}

				.rust-select > .visualizer > .option-list > li.selected {
					background-color: var(--rust-green);
				}

				.rust-select > .visualizer > .option-list > li:hover {
					background-color: #2c2c2d;
				}

		.rust-select > .visualizer > .option-list,
		.rust-select > select {
			display: none;
		}



/*#endregion */