@font-face {
	font-family:'Inconsolata';
	src:url(../fonts/Inconsolata.woff2) format('woff2');
}

@font-face {
	font-family:'Segoe';
	src:url(../fonts/Segoe.woff2) format('woff2');
}

html {
	height:100%;
	background:#000;
	color:#000000;
	font-family:"Inconsolata", sans-serif;
	min-height:600px;
	overflow-x:hidden;
}

body {
    margin:0px;
	height:100%;
}

#bodyInner {
	display:flex;
	flex-direction:column;
	height:100%;
}

@media (min-width: 1500px) {
	.gameMode #bodyInner {
		transform:scale(2) !important;
		transform-origin:0 0 !important;
		width:50% !important;
		height:50% !important;
	}
}

h1, h2, h3, h4, h5 {
	margin:0px;
}

a {
	text-decoration:none;
	color:#0094FF;
}

a[href]:hover, a[onclick]:hover {
	text-decoration:underline;
	color:#47B2FF;
}

a[href]:active, a[onclick]:active, a:visited:active {
	color:#FF4F4F !important;
}

a:visited {
	color:#C14FFF;
}

a:visited:hover {
	color:#D187FF;
}

.gameMode .externalLink, .gameMode #footerInner a {
	pointer-events:none !important;
	color:#FFFFFF !important;
}

b {
	text-decoration:underline;
}

b, #navInner a, .contentHeader, .connect {
	font-weight:700;
}

@media (max-width: 850px) {
	b, #navInner a, .contentHeader, .connect {
		font-weight:550 !important;
	}
}

br {
	margin-bottom:5px;
}

.show {
	display:inline-block !important;
}

#header {
	height:141px;
	position:relative;
}

#headerBackground {
	background-image:url("../images/purplefire.gif");
	background-position:0px -20px;
	width:100%;
	height:100px;
	opacity:0.5;
	filter:hue-rotate(-15deg);
}

#title {
	margin:10px;
	display:inline-block;
	position:absolute;
	bottom:41px;
	z-index:1;
}

#title:hover {
	filter:brightness(2);
}

#gameLogo {
	display:inline-block;
	position:absolute;
	right:20px;
	bottom:41px;
	opacity:0.9;
}

#headerDivider {
	width:100%;
	height:40px;
	background:linear-gradient(to bottom, #969696 0%, #6B6B6B 47%, #585858 53%, #3F3F3F 100%);
	border-bottom:1px #2F2F2F solid;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
	font-size:30px;
	display:flex;
	justify-content:center;
	align-items:center;
}

#headerNav {
	cursor:pointer;
	display:none;
	user-select:none;
}

@media (max-width: 850px) {
	#headerNav {
		display:inline-block; !important;
	}
}

#page {
	display:flex;
	flex-grow:1;
}

@media (max-width: 850px) {
	#page {
		flex-direction:column !important;
	}
}

#nav {
	padding:10px 20px;
	font-size:25px;
	min-width:160px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
	background:#757575;
	box-shadow:inset 4px 4px 10px #4C4C4C, inset -4px -4px 10px #BABABA;
}

@media (max-width: 850px) {
	#nav {
		min-width:unset !important;
		width:calc(100% - 40px) !important;
		display:none;
	}
}

#navBanners {
	width:200px;
	margin:auto -20px;
	margin-top:20px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}

@media (max-width: 850px) {
	#navBanners {
		width:100% !important;
		margin:unset !important;
	}
}

#navBanners a {
	margin:1px;
	height:31px;
}

#navInner {
	display:flex;
	flex-direction:column;
}

#navInner a {
	color:#000000;
	margin:3px;
}

.gameMode #navInner a {
	display:none;
}

.gameMode #navInner a.siteLink {
	display:inline-block !important;
}

#content {
	font-size:25px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
	width:100%;
	height:100%;
	background:#000000;
}

#contentInner {
	padding:5px;
	height:calc(100% - 52px);
	background:linear-gradient(to bottom, #3F3F3F 0%, #000000 50%, #000000 100%);
	box-shadow:inset 4px -4px 10px #141414, inset -4px -4px 10px #484848;
}

@media (max-width: 850px) {
	#contentInner {
		padding-bottom:75px !important;
		height:calc(100% - 122px) !important;
	}
}

#contentText {
	font-family:"Segoe", sans-serif;
	margin:0px 4px;
	color:#FFFFFF;
}

.contentHeader {
	background:linear-gradient(to bottom, #B2B0AE 0%, #93908D 47%, #84817E 53%, #6E6B69 100%);
	padding:5px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
	border-bottom:1px #565453 solid;
	font-size:30px;
	box-shadow:inset 4px -4px 10px #434343;
}

@media (max-width: 850px) {
	.contentHeader {
		box-shadow:unset !important;
	}
}

#footer {
	display:flex;
}

#footerInner {
	padding:10px;
	font-size:20px;
	width:100%;
	max-height:40px;
	text-align:center;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
	background:linear-gradient(to bottom, #969696 0%, #6B6B6B 47%, #585858 53%, #3F3F3F 100%);
	border-top:1px #3F3F3F solid;
}

#boba {
	vertical-align:text-top;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.75));
}

#boba:hover {
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.75)) brightness(1.25);
}

#yoda {
	position:fixed;
	bottom:20px;
	right:20px;
	display:flex;
	flex-direction:column;
	z-index:5;
}

@keyframes yodaGlow {
	0% {
		filter:drop-shadow(0px 0px 10px rgba(255, 20, 20, 0));
	}
	100% {
		filter:drop-shadow(0px 0px 10px rgba(255, 20, 20, 1)) drop-shadow(0px 0px 3px rgba(255, 20, 20, 1));
	}
}

@media (min-width: 1500px) {
	.gameMode #yoda {
		transform:scale(2) !important;
		transform-origin:100% 100% !important;
		bottom:40px !important;
		right:40px !important;
	}
}

#yodaImage {
	cursor:pointer;
	margin-left:auto;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.75));
	animation:yodaFloat 1s infinite alternate;
	animation-timing-function:ease-in-out;
}

@media (max-width: 850px) {
	#yodaImage {
		width:75px !important;
	}
}

@keyframes yodaFloat {
	0% {
		transform: translate(0px, 0px);
	}
	100% {
		transform: translate(0px, 5px);
	}
}

@keyframes yodaShake {
	0% {
		transform: translate(1px, 1px);
	}
	10% {
		transform: translate(-1px, -1px);
	}
	20% {
		transform: translate(-1px, 0px);
	}
	30% {
		transform: translate(1px, 1px);
	}
	40% {
		transform: translate(1px, -1px);
	}
	50% {
		transform: translate(-1px, 1px);
	}
	60% {
		transform: translate(-1px, 1px);
	}
	70% {
		transform: translate(1px, 1px);
	}
	80% {
		transform: translate(-1px, -1px);
	}
	90% {
		transform: translate(1px, 1px);
	}
	100% {
		transform: translate(1px, -1px);
	}
}

#yodaText {
	padding:10px;
	margin-left:auto;
	background:#FFFFFF;
	display:none;
	margin-bottom:10px;
	border-radius:10px;
	font-size:20px;
	max-width:200px;
	animation:yodaFloat 1.2s infinite alternate;
	animation-timing-function:ease-in-out;
	cursor:pointer;
}

/* creepypasta */

.creepypastaGlow {
	animation:yodaGlow 1s infinite alternate;
}

.creepypastaShaker {
	animation:yodaShake 0.5s infinite alternate !important;
}

.creepypastaGlitch {
	filter:grayscale(75%) !important;
	animation:glitch 1s linear infinite;
}

@keyframes glitch {
	0%,9%,13%,49%,51%,69%,72% {
		transform:translate(0px,0px) skew(0deg);
	}
	10% {
		transform:translate(20px,0px) skew(20deg); 
	}
	50% {
		transform:translate(6px,-9px) skew(1deg); 
	}
	70% {
		transform:translate(-10px,0) skew(-100deg); 
	}
}

.creepypastaHeader {
	background-image:url("../images/creepypasta/ben.jpg") !important;
	animation:slide 0.1s linear infinite;
}

@keyframes slide {
	0%{
		background-position:0px 0px;
	}
	100%{
		background-position:134px 0px;
	}
}

.creepypastaBackground {
	background-image:url("../images/funny/schizoeyes.gif") !important;
	animation:slide 1s linear reverse infinite;
	background-size:100px !important;
	opacity:0.5 !important;
}

.creepypastaLogo {
	filter:grayscale(50%) !important;
	opacity:0.7 !important;
}

/* PAGE - SERVERS */

#servers {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}

.server {
	width:calc(33% - 10px);
	max-width:320px;
	height:320px;
	margin:5px;
	padding:8px;
	position:relative;
	display:inline-flex;
	flex-direction:column;
	background:#666666;
	box-shadow:inset 4px 4px 10px #404040, inset -4px -4px 10px #BABABA;
	color:#FFFFFF !important;
	border-radius:10px;
	font-size:20px;
	box-sizing: border-box;
}

.offline.server {
	background:#3D3D3D;
	box-shadow:inset 4px 4px 10px #262626, inset -4px -4px 10px #707070;
}

.server *, .serverSmall * {
	box-sizing: border-box;
}

@media (max-width:1200px) {
	.server {
		width:100% !important;
	}
}

.server b {
	text-decoration:unset;
}

.gameMode .server {
	width:100% !important;
}

.serverTitle {
	display:flex;
	height:100%;
	align-items:center;
	text-shadow:1px 1px #000000, 2px 2px #000000;
}

.serverStatus {
	width:16px;
	height:16px;
	margin-right:5px;
}

.serverGame {
	min-width:32px;
	width:32px;
	min-height:32px;
	height:32px;
	margin-right:10px;
}

.offline .serverGame {
	filter:saturate(0);
}

.serverContent {
	margin-top:8px;
	position:relative;
	text-shadow:1px 1px #000000, 2px 2px #000000;
}

.serverMap {
	max-width:100%;
	max-height:190px;
	border-radius:5px;
	opacity:0.75;
	mask-image:linear-gradient(to bottom, rgb(0, 0, 0), rgba(0,0,0,0));
	object-fit:cover;
	vertical-align:top;
	user-select:none;
}

@media (max-width:1200px) {
	.serverMap {
		width:100%;
	}
}

.offline .serverMap {
	filter:saturate(0);
}

.gameMode .serverMap {
	width:100% !important;
}

.serverMapName {
	max-width:calc(100% - 16px);
	position:absolute;
	padding:4px 8px 4px;
	top:0px;
	left:0px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.serverPlayers {
	max-width:calc(100% - 16px);
	position:absolute;
	padding:4px 8px 8px;
	bottom:0px;
	left:0px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.tooltip {
	text-decoration:underline 2px dotted;
	text-underline-offset:3px;
}

@media (max-width:850px) {
	.tooltip {
		text-decoration:none !important;
	}
}

.serverButtons {
	display:flex;
	align-items:center;
}

.serverButton {
	height:40px;
	position:relative;
	background:linear-gradient(to bottom, #B2B0AE 0%, #93908D 47%, #84817E 53%, #6E6B69 100%);
	box-shadow:inset 4px -4px 10px #434343;
	border-radius:20px;
	padding:10px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	color:#FFFFFF !important;
	font-size:26px;
	font-family:'Quicksand', monospace;
	text-shadow:1px 1px #000000, 2px 2px #000000;
	text-decoration:none;
	user-select:none;
	margin-top:10px;
	margin-right:10px;
}

.serverButton:last-of-type {
	margin-right:0px !important;
}

.offline .serverButton {
	background:linear-gradient(to bottom, #6A6A6A 0%, #565656 47%, #4D4D4D 53%, #404040 100%);
	box-shadow:inset 4px -4px 10px #282828;
}

.serverConnect {
	width: 100%;
	cursor:pointer;
}

.gameMode .serverConnect, .gameMode .serverDynmap {
	display:none !important;
}

@media (max-width:850px) {
	.serverConnect {
		display:none !important;
	}
}

.serverInfo, .serverDynmap {
	min-width:40px;
}

.gameMode .serverInfo {
	width: 100% !important;
}

@media (max-width:850px) {
	.serverInfo, .serverDynmap {
		width: 100% !important;
	}
}

.info {
	min-width:24px;
	min-height:24px;
	background:url(../images/info.png) no-repeat;
	background-size:24px;
}

.dynmap {
	min-width:24px;
	min-height:24px;
	background:url(../images/dynmap.png) no-repeat;
	background-size:24px;
}

a.serverButton[href]:hover, a.serverButton[onclick]:hover {
	text-shadow:0px 0px 5px currentColor;
}

a.serverButton:hover .info, a.serverButton:hover .dynmap {
	filter:drop-shadow(0px 0px 3px currentColor);
}

a.serverButton[href]:active, a.serverButton[onclick]:active {
	filter:brightness(0.85);
}

.serverSmall {
	margin:5px;
	padding:8px;
	position:relative;
	display:inline-flex;
	flex-direction:column;
	background:#666666;
	box-shadow:inset 4px 4px 10px #404040, inset -4px -4px 10px #BABABA;
	color:#FFFFFF !important;
	border-radius:10px;
	font-size:20px;
	box-sizing: border-box;
}

.gametracker {
	display:inline-flex;
}