@font-face {
  font-family: 'Minecraft';
  src: url('../fonts/Minecraft.ttf');
}

@font-face {
  font-family: 'Minecraft Regular';
  src: url('../fonts/Minecraft-Regular.otf');
}

a {
	text-decoration: none;
}

body {
	background-image: url(../images/background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000;    
    font-family: 'Minecraft Regular', 'Minecraft', monospace;
}

.content {
	position: relative;
	margin-top: 46px;
    height: calc(100vh - 46px);
    cursor: crosshair;
}

.main-menu {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translate(-50%, 0);
}

.main-menu,
#menu .menu-btn {
	background-image: url(../images/texture.png);
	color: #fff;
	width: 350px;
	height: 65px;
	max-width: 90vw;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid #000;
	box-shadow:
		inset 4px 4px 0 rgba(255,255,255,0.25),
		inset -4px -8px 0 rgba(0,0,0,0.25);
	font-size: 26px;
	text-shadow: 4px 4px #3f3f3f;
	user-select: none;
	cursor: pointer;
}

.main-menu:hover,
#menu .menu-btn:hover,
#menu .menu-btn.highlighted {
	border-color: #fff;
}

.menu {
	position: absolute;
	bottom: 5px;
	left: 50%;
	color: #fff;
	background: rgba(0,0,0,0.5);
	border: 2px solid #000;
	transform: translate(-50%, 0);
	display: inline-flex;
	box-shadow:
		inset 4px 4px 0 #7e7e7e,
		inset -4px -4px 0 #5d5d5d;
	z-index: 1;
}

.menu-item {
	width: 80px;
	height: 80px;
	border-top: 4px solid #5d5d5d;
	border-left: 4px solid #5d5d5d;
	border-right: 4px solid #7e7e7e;
	border-bottom: 4px solid #7e7e7e;
	margin: 4px;
	box-shadow: 
		-4px 0 0 #7e7e7e,
     	4px 0 0 #5d5d5d;
    background-repeat: no-repeat;
    background-position: center;
}

.menu-item.selected {
	border-top: 4px solid #5f6d5c;
	border-left: 4px solid #5f6d5c;
	border-right: 4px solid #d1e4cc;
	border-bottom: 4px solid #d1e4cc;
	box-shadow:
		0 0 0 4px #a1b29d,
		4px 0 0 4px #5f6d5c,
		0 4px 0 4px #5f6d5c,
		4px 4px 0 4px #5f6d5c,
		-4px 0 0 4px #d1e4cc,
		0 -4px 0 4px #d1e4cc,
		0 0 0 8px #d1e4cc,
		0 0 0 12px #000;
	z-index: 2;
}

.menu-item.sword {background-image: url(../images/sword-icon.png);}
.menu-item.pickaxe {background-image: url(../images/pickaxe-icon.png);}
.menu-item.axe {background-image: url(../images/axe-icon.png);}
.menu-item.shovel {background-image: url(../images/shovel-icon.png);}


.hand-item {
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url(../images/hand.png);
	width: 423px;
	height: 319px;
}

.hand-item.sword {
	background-image: url(../images/sword.png);
	width: 446px;
	height: 741px;
}

.hand-item.pickaxe {
	background-image: url(../images/pickaxe.png);
	width: 409px;
	height: 509px;
}

.hand-item.axe {
	background-image: url(../images/axe.png);
	width: 370px;
	height: 543px;
}

.hand-item.shovel {
	background-image: url(../images/shovel.png);
	width: 332px;
	height: 567px;
}

.hand-item.dark {
	filter: brightness(0.5);
}

#menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(5px);
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

#menu .menu-btn {
	width: 450px;
	height: 70px;
	font-size: 28px;
}

.chat-btn {
	position: absolute;
	bottom: 0;
	left: 0;
	color: rgba(255,255,255,0.5);
	font-size: 22px;
	margin: 10px;
  	font-style: italic;
  	cursor: text;
  	user-select: none;
  min-width: 28vw;
}

.chat-popup {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 60vh;
	z-index: 2;
}

#chattable {
	width: 100%;
	height: 100%;
}

.hidden,
#menu.hidden {
	display: none;
}

@media only screen and (max-width: 1850px) {
	.chat-btn {
		min-width: 26vw;
	}

	.hand-item {
		max-width: 50vw;
		background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 1700px) {
	.chat-btn {
		min-width: 24vw;
	}
}

@media only screen and (max-width: 1550px) {
	.chat-btn {
		bottom: 95px;
	}
}

@media only screen and (max-width: 1000px) {
	.menu-item {
		width: 8vw;
		height: auto;
		aspect-ratio: 1/1;
	}
}

@media only screen and (max-width: 900px) {
	.menu-item {
		background-size: contain;
	}
}

@media only screen and (max-width: 800px) {
	.menu-item {
		width: 9vw;
	}

  .menu-item:nth-last-child(1) {
      display: none;
  }
}

@media only screen and (max-width: 759px) {
	.main-menu {
		top: 50px;
	}
}

@media only screen and (max-width: 700px) {
	.menu-item {
		width: 10vw;
	}
}

@media only screen and (max-width: 600px) {
	.menu-item {
		width: 12vw;
	}

  .menu-item:nth-last-child(2) {
      display: none;
  }
}

@media only screen and (max-width: 450px) {
	.menu-item {
		width: 14vw;
	}

  .menu-item:nth-last-child(3) {
      display: none;
  }
}

@media only screen and (max-width: 395px) {
	.menu-item {
		width: 16vw;
	}

  .menu-item:nth-last-child(4) {
      display: none;
  }

	.main-menu {
		top: 75px;
	}
}

@media only screen and (max-width: 350px) {
	.main-menu,
	#menu .menu-btn {
		font-size: 8vw;
	}
}