@import url(colors.css);

@font-face {
	font-family: minecraft_seven_v2;
	src: url(/assets-nuclear/fonts/Minecraft-Seven_v2.ttf);
}

nav {
	font-family: minecraft_seven_v2;
	--btn-size: 30pt;
	display: grid;
	max-width: 216px;
	max-height: min-content;
	grid-template-columns: minmax(100px, 216px);
	/* grid-template-rows: repeat(3, var(--btn-size)) 16px var(--btn-size); */
	grid-template-areas:
		"first"
		"second"
		"third"
		"fourth"
		"fifth";
	grid-gap: 4px;
	position: relative;
	padding: 5px;
	padding-bottom: 0px;
	background-color: var(--color_menu_bg);

	/* & button:nth-child(1) {
		grid-area: first;
	} */

	& a {
		padding: 0px 5px;

		height: var(--btn-size);

		cursor: pointer;
		overflow: hidden;
		white-space: nowrap;
		user-select: none;
		background: var(--color_cyan);
		color: var(--color_darkpurple);
		border: 2px solid var(--color_darkpurple);
		align-self: center;
		align-content: center;
		text-decoration: none;

		&:hover {
			background-color: var(--color_cyan);
			font-weight: bold;
			/* color: var(--color_cyan); */
			/* text-shadow: 2px 2px #ffffffcc; */
			/* color: #85ffeb; */
			box-shadow: rgba(240, 46, 170, 0.4) 1px 1px, rgba(240, 46, 170, 0.4) 1px 1px inset,
				rgba(240, 46, 170, 0.3) 3px 3px, rgba(240, 46, 170, 0.3) 3px 3px inset,
				rgba(240, 46, 170, 0.2) 5px 5px,
				rgba(240, 46, 170, 0.1) 8px 8px,
				rgba(240, 46, 170, 0.05) 10px 10px;
		}

		&:active {
			color: var(--color_purple);
			/* box-shadow: inset -2px -4px #0004, inset 2px 2px #FFF5; */
		}
	}

}