@font-face
	font-family 'FreePixel'
	src url('/css/FreePixel.ttf')

@font-face
	font-family 'PixelArial'
	src url('/css/PixelArial11.ttf')

*
	margin 0
	padding 0

body
	overflow hidden
	font-family FreePixel
	font-size 16px

canvas
	-webkit-touch-callout none
	-webkit-user-select none
	-khtml-user-select none
	-moz-user-select none
	-ms-user-select none
	user-select: none

.small
	font-family PixelArial
	font-size 8px

#gui
	color #fff
	&.hidden *
		display: none
	.container
		position fixed
	#chat
		bottom 0
		left 0
		width 400px
		max-height 300px
		overflow hidden
		background-color rgba(0, 0, 0, 0.55)
		#chat-messages
			> span
				display block
				margin-top 5px
				> span
					color #afa
					&.teama
						color #f76
					&.teamb
						color #8af
				&.server
					color #68c
		input
			font-family inherit
			font-size inherit
			border 0
			display block
			width 100%
			padding 2px 0 2px 0
			background-color rgba(20, 20, 20, 0.5)
			height 0
			&:focus
				height inherit
				background-color #eee
	#weapons
		bottom 0
		left 50%
		transform translate(-50%, 0)
		> .weapon
			background-position center
			background-size 64px
			background-color rgba(0, 0, 0, 0.5)
			float: left
			width: 48px
			height: 48px
			&.active
				background-color rgba(15, 15, 15, 0.3)
				width 44px
				height 44px
				border 2px solid rgba(30, 30, 30, 0.2)
