@font-face {
	font-family: "NFPixels";
	src: url("/fonts/NFPixels/NFPixels-Regular.ttf") format("truetype");
	src: url("/fonts/NFPixels/NFPixels-Regular.otf") format("opentype");
}

body,
html {
	margin: 0;
	padding: 0;
	font-family: "NFPixels", sans-serif;
	background-color: black;
	color: #CBCBCB;
	text-shadow: black 0 2px;
}

/* The animation code */
@keyframes noita-decoration-9piece0-open {
	from {outline-offset: -10px; opacity: 0.0;}
	75% {outline-offset: 2px; opacity: 1;}
	to {opacity: 1;}
}

/* A recreation of the decorative frame that is used for showing wand info or settings in Noita */
.noita-decoration-9piece0 {
	outline: 2px solid #937F64;
	background-color: #000000D4;
	margin: 2px;
	padding: 5px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	transition: transform 0.05s ease-out;
	animation: noita-decoration-9piece0-open 0.3s;
}

.noita-decoration-9piece0.noita-active {
	outline: 2px solid #C88830;
	background-color: #0E0D0CF2;
	outline-offset: 2px;
}

.noita-decoration-9piece0.noita-hoverable:hover {
	transform: translateX(4px);
}

.noita-inventory-box {
	border-top: 2px dashed #794738;
	border-left: 2px dashed #5F302C;
	border-bottom: 2px dashed #582B28;
	border-right: 2px dashed #5F302C;
	background-color: #3D302BDA;
	width: 32px;
	height: 32px;
	margin: 2px;
	border-radius: 4px;
}

.noita-inventory-box.noita-active {
	border-color: #C98930;
	border-style: solid;
	background-color: #49341426;
	outline-offset: 2px;
}

.noita-inventory-box:hover {
	transform: scale(1.1);
}

.noita-inventory-group {
	background-color: #372724;
	display: flex;
	border-radius: 6px;
	margin: 6px;
	outline: 4px dotted #4F322D;
	box-shadow: -1px -1px 3px 0px #4F322D, 1px -1px 0 5px #6A4038, -1px 1px 0px 5px #402D2A;
}

.noita-inventory-group-invisible {
	display: flex;
	border-radius: 6px;
	margin: 6px;
}

.noita-icon {
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
}