:root {
	--bg1-1: 23,32,51;
	--bg1-2: 29,40,64;
	--bg1-3: 35,49,77;
	--bg1-4: 40,57,89;
	--bg1-5: 46,65,102;
	--bg2-1: 32,38,51;
	--bg2-2: 40,47,64;
	--bg2-3: 47,56,77;
	--bg2-4: 55,66,89;
	--bg2-5: 63,76,102;
	--text5: 245,236,228;
}
html {
	height: 100%;
	background: #060b14 url('/starcraft/img/bg.jpg') no-repeat center center fixed;
	background-size: cover;
}
body {
	font-family: 'Play', sans-serif;
	position: relative;
	color: #f5ece4;
}
* {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #e2c58d;
}
a:hover {
	text-decoration: underline;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

header, footer {
}


header {
	background: rgb(var(--bg1-3));
	border-bottom: 1px solid rgba(245, 236, 228, 0.3);
}
	#header {
		width: clamp(360px,75%,960px);
		padding: 0.4em 0.4em 0.4em 0;
	}
#header_buttons {
	
}
	.header_wrapper {
		
	}
		.header_button {
		}
		.header_button:hover {
			background-color: rgba(0,0,0,0.3);
		}
		.header_on .header_button {
		}
	#nav_home {
		border-right: 1px solid rgba(245, 236, 228, 0.3);
	}
	nav {
		top: 95%;
		left: 0;
		border-radius: 0.5em;
		background-color: rgb(var(--bg2-4));
		border: 1px solid rgba(245, 236, 228, 0.3);
		box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
	}
		.nav {
			color: rgb(245, 236, 228);
			padding: 0.5em 1em;
			border: 0.1em solid rgb(var(--bg2-4));
			border-radius: 0.5em;
			font-size: 0.9em;
			text-align: center;
		}
		.nav:hover {
			background-color: rgb(var(--bg1-3));
		}
			.nav a {
				color: rgb(245, 236, 228);
			}
			.nav a:hover {
				text-decoration: none;
				color: rgb(var(--orange4));
			}
			.nav_site {
				font-size: 1.1em;
			}
			.nav:hover .nav_site {
				color: rgb(var(--orange4));
			}
			.nav_site_img {
				margin-top: 0.3em;
				height: 6em;
			}
			.nav_tools {
				padding: 0 0.5em;
			}
				.nav_tool {
					font-size: 0.9em;
					margin-top: 0.5em;
				}
	#site_nav_wrapper {
		margin-left: 1rem;
		display: flex;
		align-items: center;
		position: relative;
		align-self: stretch;
	}
		.site_nav {
			color: #f5ece4;
			font-size: 1.1em;
			margin-right: 1rem;
			position: relative;
			align-self: stretch;
			display: flex;
			align-items: center;
		}
		.site_nav:hover, .site_nav_on {
			text-decoration: none;
			color: rgb(var(--orange4));
		}
		.site_nav_dropdown {
			position: absolute;
			z-index: 3;
			left: -1.2em;
			top: 95%;
			border-radius: 0.5em;
			background-color: rgb(var(--bg2-4));
			width: max-content;
			border: 1px solid rgba(245, 236, 228, 0.3);
			display: none;
			box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
		}
		.site_nav:hover .site_nav_dropdown, .site_nav_on .site_nav_dropdown {
			display: block;
		}
			.site_nav_dropdown a {
				display: block;
				color: rgb(245, 236, 228);
				padding: 0.6em 1.2em;
				border: 0.2em solid rgb(var(--bg2-4));
				border-radius: 0.5em;
				font-size: 0.9em;
			}
			.site_nav_dropdown a span {
				font-size: 0.8em;
				display: block;
				padding: 0.3em 0;
				font-weight: 100;
			}
			.site_nav_dropdown a:hover {
				text-decoration: none;
				background-color: rgb(var(--bg1-3));
			}
		#tools_nav:hover {
			cursor: pointer;
		}
		#tools_nav svg {
			transition: transform 0.3s ease-out, margin 0.5s ease-out;
			height: 1em;
			width: 1em;
			vertical-align: bottom;
			margin-bottom: 0.05em;
		}
		.site_nav:hover svg, .site_nav_on svg {
			transform: rotate(180deg);
			color: #e2c58d;
		}
	.header_dropdown {
		background-color: #bfc8bf;
		color: #4c544c;
	}
	.header_on #user_button {
		background-color: #c3c3c3;
	}
	.user_nav {
		color: #2c2c2c;
	}
	.user_nav:hover {
		background-color: #2c2c2c;
		color: #efa747;
		text-decoration: none;
	}
.msg {
	text-align: center;
	background-color: rgba(10,15,20,0.5);
	padding: 3em;
	border-radius: 1em;
	margin: 0 10% 1.5em 10%;
	position: relative;
}
	.msg_title {
		font-size: 1.5em;
	}
	.msg_content {
		margin-top: 1em;
		font-size: 1.1em;
	}
main {
}
	#main {
		background-color: rgba(var(--bg2-1),0.3);
		width: clamp(360px,75%,960px);
		margin: 0 auto;
		padding: 1em;
		box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
	}

footer {
	background: rgba(36,50,79,1);
	border-top: 1px solid rgba(245, 236, 228, 0.3);
}