* {
	font-family: "Lucida Console", monospace;
}

html {

}

body {
	overflow: hidden;
}

img {
  pointer-events: none;
}

button {
	cursor: pointer;
}

#turn_end_button {
	position: absolute;
	right: 4%;
	bottom: 4%;
	width: 8%;
	aspect-ratio: 1 / 0.5;
	border: 3px solid black;
	border-radius: 15px;
	background-color: #323232;
	color: #ffff00aa;
	animation: button_flash 2s ease-in-out infinite;
	visibility: hidden;
}

#particles-js {
	overflow: hidden;
	height: calc(100% + 100px);
	width: calc(100% + 100px);
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #323232;
	background-position: 50% 50%;
	z-index: -50000;
	translate: -50px -50px;
}

#curves_svg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 6000;
}

.prevent-select {
	-webkit-user-select: none;
	user-select: none;
}

#resources_container {
	position: absolute;
	left: calc(50% - 450px);
	top: 1%;
	width: 900px;
	height: 30px;
	z-index: 500;
	background-color: rgba(175, 175, 175, 0.5);
	border-radius: 15px;
	border: 3px solid black;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}

#resources_container > div {
	position: relative;
	width: 300px;
	height: 30px;
	padding: 0px 0px;
	left: 0px;
	word-wrap: break-word;
}

#resources_container > div:nth-of-type(1) {
	border-style: none solid none none;
	border-color: black;
	border-width: 3px;
}

#resources_container > div:nth-of-type(2) {
	border-style: none solid none none;
	border-color: black;
	border-width: 3px;
}

#resources_container > div > p:nth-of-type(1) {
	left: 0px;
	position: absolute;
	width: 100%;
	height: 30px;
	top: -17px;
	line-height: 33px;
	text-align: left;
	word-wrap: break-word;
	padding-left: 10px;
}

#resources_container > div > p:nth-of-type(2) {
	right: 0px;
	position: absolute;
	width: auto;
	height: 30px;
	top: -17px;
	line-height: 33px;
	text-align: right;
	word-wrap: break-word;
	padding-right: 10px;
}

#buffs_container {
	position: absolute;
	left: 0px;
	top: calc(2% + 39px);
	/*height: 30px;*/
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

#buffs_container > div {
	flex: 0 0 30px;
	position: relative;
	height: 30px;
	width: 30px;
	overflow: visible;
}

#buffs_container > div > img {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#buffs_container > div > p {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	text-align: right;
	color: #f0f0f0;
	margin: 0px;
	line-height: 50px;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

/* elements inside blend */
#buffs_container > div > div * {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#buffs_container > div > div {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#buffs_infobox {
	position: absolute;
	text-align: center;
	font-size: 16px;
	color: #f0f0f0;
	z-index: 5001;
	/*line-height: 30px;*/
	white-space: nowrap;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px;
	pointer-events: none;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

#card_template {
	position: absolute;
	height: 126px;
	width: 86px;
	margin: 0px -10px;
	background-color: #505050;
	flex: 0 0 auto;
}

.card {
	position: relative;
	height: 126px;
	width: 86px;
	background-color: #505050;
	flex: 0 0 auto;
	z-index: 500;
}

.card:hover {
	z-index: 501;
}

.card > p {
	position: absolute;
	text-align: center;
	width: 90%;
	margin: 0px;
	/*bottom: 2%;*/
	top: 64%;
	left: 5%;
	color: #f0f0f0;
	font-size: 9px;
}

.card > img {
	position: absolute;
	height: 45%;
	width: 90%;
	margin: 0px;
	top: 8%;
	left: 50%;
	font-size: 9px;
	translate: -50% 0px;
}

.card > span {
	position: absolute;
	text-align: center;
	width: 90%;
	left: 5%;
	z-index: 2;
	color: #f0f0f0;
	text-shadow: 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050;
	font-size: 9px;
}

.card > p > span {
	white-space: nowrap;
}

#card_holder {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 100px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
	z-index: -500;
}

#bear_container {
	position: absolute;
	left: 4%;
	top: calc(4% + 69px);
	height: 360px;
	width: 200px;
	border: 3px solid black;
	border-radius: 15px;
	background-color: rgba(50, 50, 50, 0.8);
}

#bear_container > * {
	position: absolute;
}

#bear_container > img {
	height: 50px;
	width: 60px;
	left: 70px;
	top: 28px;
}

#bear_container > div:nth-of-type(1) {
	height: 50px;
	width: 60px;
	left: 70px;
	top: 83px;
	background-color: #565e64;
}

#bear_container > div:nth-of-type(2) {
	height: 50px;
	width: 30px;
	left: 35px;
	top: 83px;
	background-color: #3d4144;
}

#bear_container > div:nth-of-type(3) {
	height: 50px;
	width: 30px;
	left: 135px;
	top: 83px;
	transform-origin: top left;
	background-color: #3d4144;
}

#bear_container > div:nth-of-type(4) {
	height: 20px;
	width: 20px;
	left: 65px;
	top: 23px;
	border-radius: 50%;
	background-color: #3d4144;
}

#bear_container > div:nth-of-type(5) {
	height: 20px;
	width: 20px;
	left: 115px;
	top: 23px;
	border-radius: 50%;
	background-color: #3d4144;
}

#bear_container > p {
	top: 156px;
	left: 5%;
	height: 128px;
	width: 90%;
	text-align: center;
	color: #f0f0f0;
	font-size: 16px;
	margin: 0px;
	word-break: keep-all;
}

#bear_container > button {
	top: 307px;
	height: 30px;
	width: 150px;
	left: 25px;
	background-color: #323232;
	color: #f0f0f0;
	border: 3px solid;
	border-radius: 5px;
	border-color: #000000;
	opacity: 1;
	visibility: hidden;
	animation: button_flash 2s ease-in-out infinite;
	pointer-events: inherit;
}

@keyframes bear_wave {
	0% {
		rotate: 0deg;
		translate: 0px 0px;
	}
	25% {
		rotate: -160deg;
		translate: 20px 0px;
	}
	50% {
		rotate: 0deg;
		translate: 0px 0px;
	}
	75% {
		rotate: -160deg;
		translate: 20px 0px;
	}
	100% {
		rotate: 0deg;
		translate: 0px 0px;
	}
}

@keyframes button_flash {
	0% {
		border-color: #666600;
	}
	50% {
		border-color: #ffff00;
	}
	100% {
		border-color: #666600;
	}
}

#field_container {
	position: absolute;
	left: calc(12% + 200px + (80% - 200px) / 3);
	top: calc(3% + 74px);
	height: calc(85% - 205px + 10% - 3% - 58px);
	width: calc(calc(80% - 200px) / 3);
	border: 3px solid #67cd67;
	border-radius: 15px;
	background-color: #0064004d;
	opacity: 0.001;
	transition: opacity 0s;
	/*pointer-events: none;*/
	z-index: 499;
}

#field_container > div:nth-of-type(1) {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	display: flex;
	flex-flow: row wrap-reverse;
	align-items: bottom;
}

#field_container > div:nth-of-type(1) > div {
	width: 10%;
	aspect-ratio: 1 / 0.6;
	transform-origin: center center;
	pointer-events: auto;
}

#field_container > div:nth-of-type(1) > div > img {
	width: 100%;
	height: 100%;
}

#field_container > div:nth-of-type(2) {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 50%;
}

#field_container > div:nth-of-type(2) > p {
	position: absolute;
	left: 50%;
	translate: -50% 0%;
	color: #f0f0f0;
	text-shadow: 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050;
}

#field_container > div:nth-of-type(2) > img:nth-of-type(1) {
	position: absolute;
}

#field_container > div:nth-of-type(2) > img:nth-of-type(2) {
	position: absolute;
}

#field_container > div:nth-of-type(2) > div {
	position: absolute;
	pointer-events: inherit;
	cursor: pointer;
}

#field_container > div:nth-of-type(2) > table {
	position: absolute;
	text-align: center;
	color: #f0f0f0;
	top: 50%;
	border-collapse: separate;
	table-layout: fixed;
	text-shadow: 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050;
}

#hive_container {
	position: absolute;
	left: calc(8% + 200px);
	top: calc(3% + 74px);
	height: calc(85% - 205px + 10% - 3% - 58px);
	width: calc((80% - 200px) / 3);
	border: 3px solid #ffc400;
	border-radius: 15px;
	background-color: #85670C4d;
	opacity: 0.001;
	transition: opacity 0s;
	/*pointer-events: none;*/
	z-index: 499;
}

#hive_container > div:nth-of-type(1) {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	display: flex;
	flex-flow: row wrap-reverse;
	align-items: bottom;
}

#hive_container > div:nth-of-type(1) > div {
	width: 10%;
	/*old 0.73*/
	aspect-ratio: 1 / 0.6;
	pointer-events: auto;
}

#hive_container > div:nth-of-type(1) > div > img {
	width: 100%;
	height: 100%;
}

#mob_container {
	position: absolute;
	left: calc(16% + 200px + (80% - 200px) / 3 * 2);
	top: calc(3% + 74px);
	height: calc(85% - 205px + 10% - 3% - 58px);
	width: calc(calc(80% - 200px) / 3);
	border: 3px solid #ff6b6b;
	border-radius: 15px;
	background-color: #ff00004d;
	opacity: 0.001;
	transition: opacity 0s;
	/*pointer-events: none;*/
	z-index: 499;
}

#mob_container > div:nth-of-type(1) {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	display: flex;
	flex-flow: row wrap-reverse;
	align-items: bottom;
}

#mob_container > div:nth-of-type(1) > div {
	width: 10%;
	aspect-ratio: 1 / 0.6;
	pointer-events: auto;
}

#mob_container > div:nth-of-type(1) > div > img {
	width: 100%;
	height: 100%;
}

#mob_container > div:nth-of-type(2) {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 50%;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	pointer-events: inherit;
}

#mob_container > div:nth-of-type(2) > div > p {
	text-shadow: 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050, 0 0 1px #505050;
}

#mob_container > div:nth-of-type(2) > div > div:nth-of-type(1) {
	height: 70%;
	width: 70%;
	translate: 20% 20%;
	position: absolute;
}

#bees_infobox {
	position: absolute;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	z-index: 5002;
	/*line-height: 30px;*/
	white-space: nowrap;
	/*make design for this*/
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px;
	pointer-events: none;
	text-align: center;
	transform-origin: bottom left;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

#mobs_infobox {
	position: absolute;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	z-index: 5003;
	/*line-height: 30px;*/
	white-space: nowrap;
	/*make design for this*/
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px;
	pointer-events: none;
	text-align: center;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

#quest_container {
	position: absolute;
	left: calc(50% - 250px);
	top: calc(4% + 69px);
	width: 500px;
	height: 360px;
	border: 3px solid black;
	border-radius: 15px;
	background-color: rgba(50, 50, 50, 0.8);
	opacity: 0;
	z-index: 498;
	pointer-events: none;
}

#quest_container::after {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 50%;
	border: 3px solid black;
	border-style: none solid none none;
	pointer-events: none;
}

#quest_container::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	height: 50%;
	width: 100%;
	border: 3px solid black;
	border-style: none none solid none;
	pointer-events: none;
}

#quest_container > div {
	position: absolute;
	height: 50%;
	width: 50%;
	color: #f0f0f0;
	font-size: 14px;
	pointer-events: none;
	box-sizing: border-box;
	cursor: pointer;
}

#quest_container > div:nth-of-type(1) {
	border-radius: 15px 0px 0px 0px;
}

#quest_container > div:nth-of-type(2) {
	border-radius: 0px 15px 0px 0px;
	width: calc(50% - 3px);
}

#quest_container > div:nth-of-type(3) {
	border-radius: 0px 0px 0px 15px;
}

#quest_container > div:nth-of-type(4) {
	border-radius: 0px 0px 15px 0px;
	width: calc(50% - 3px);
}

#quest_container > div > p {
	opacity: 1;
	width: 80%;
	position: absolute;
	left: 10%;
	line-height: 16px;
	font-size: 12px;
	pointer-events: none;
}

#shop_container {
	opacity: 0;
	position: absolute;
	top: calc(2% + 39px);
	left: 0%;
	width: 100%;
	height: calc(96% - 39px);
	z-index: 497;
	pointer-events: none;
}

#shop_container > div {
	background-color: rgba(50, 50, 50, 0.8);
	position: absolute;
	border: 3px solid black;
	border-radius: 15px;
	box-sizing: border-box;
	pointer-events: none;
}

#shop_container > div:nth-of-type(1) {
	top: 0px;
	left: 2%;
	height: calc(98% - 235px);
	width: 47%;
	display: flex;
	flex-flow: row wrap;
	padding: 3px;
	justify-content: left;
	align-items: flex-start;
}

#shop_container > div:nth-of-type(1) > div {
	position: relative;
	width: 10%;
	aspect-ratio: 1 / 0.73;
	pointer-events: auto;
}

#shop_container > div:nth-of-type(1) > div > img {
	height: 100%;
	width: 100%;
}

#shop_container > div:nth-of-type(2) {
	top: calc(100% - 235px);
	left: 2%;
	height: 235px;
	width: 47%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
	z-index: -500;
}

#shop_container > div:nth-of-type(2) > div {
	position: relative;
	bottom: 30px;
	pointer-events: auto;
}

#shop_container > div:nth-of-type(3) {
	top: 0px;
	left: 51%;
	height: 100%;
	width: 47%;
}

#shop_container > div:nth-of-type(3) > div {
	height: 198px;
	width: 83.3%;
	left: 16.7%;
	position: absolute;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(2) {
	height: 198px;
	width: 100%;
	left: 0%;
	position: absolute;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(1) {
	top: 0px;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(2) {
	top: 50%;
	translate: 0% -50%;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(3) {
	top: calc(97% - 198px);
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(4) {
	position: absolute;
	height: 3%;
	top: 198px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(4) > div {
	position: relative;
	width: 72px;
	/*
	(100% - 6 * card width) / 6
	*/
	/*margin: 0px calc((100% - 6 * (132px - 72px)) / 48) 0px calc((100% - 6 * (132px - 72px)) / 48);*/
	margin: 0px 6px;
	/*height: 200%;*/
	height: 25px;
	text-align: center;
	border-radius: 5px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	pointer-events: auto;
	cursor: pointer;
	transition: scale 0.3s;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(4) > div > p {
	position: relative;
	font-size: 16px;
	margin: 0px;
	translate: 0px 2%;
	line-height: 16px;
	padding: 0px;
	color: #f0f0f0;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(4) > div > img {
	position: relative;
	width: 30%;
	margin: 0px 0px 0px 5px;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(5) {
	height: 3%;
	top: 97%;
	background-color: red;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(n + 6) {
	position: absolute;
	left: calc(8.3% + 4px);
	height: 50px;
	width: calc(15.7% - 6px);
	translate: -50% -50%;
	border-radius: 5px;
	text-align: center;
	pointer-events: auto;
	transition: scale 0.3s;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(n + 6) > p {
	position: absolute;
	left: 50%;
	top: 33%;
	font-size: 16px;
	translate: -50% -50%;
	color: #f0f0f0;
	margin: 0px;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(n + 6) > span > p {
	position: absolute;
	left: 33%;
	top: 100%;
	font-size: 16px;
	color: #f0f0f0;
	margin: 0px;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(n + 6) > span {
	position: absolute;
	left: 50%;
	top: 70%;
	font-size: 16px;
	translate: -50% -50%;
	width: 100%;
}

#shop_container > div:nth-of-type(3) > div:nth-of-type(n + 6) > span > img {
	position: absolute;
	width: 30%;
	top: 50%;
	left: 67%;
}

#treats_infobox {
	position: absolute;
	padding: 5px;
	background-color: #323232;
	border: 3px solid black;
	border-radius: 15px;
	color: #f0f0f0;
	width: 266px;
	box-sizing: border-box;
	z-index: 5004;
}

#treats_infobox > div {
	width: 100%;
	color: white;
	border-radius: 15px;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	justify-content: space-between;
}

#treats_infobox > div:nth-of-type(1) > p:nth-of-type(1) {
	width: 100%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #000000;
	margin: 0px;
}

#treats_infobox > div:nth-of-type(2) > button:nth-of-type(1) {
	height: 10%;
	width: 30%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #00ff00;
}

#treats_infobox > div:nth-of-type(2) > input {
	height: 10%;
	width: 66%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #000000;
	outline: none;
}

#treats_infobox > div:nth-of-type(3) > button:nth-of-type(1) {
	width: 48%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #ff0000;
}

#treats_infobox > div:nth-of-type(3) > button:nth-of-type(2) {
	width: 48%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #00ff00;
}

#treats_infobox > div:nth-of-type(4) > button:nth-of-type(1) {
	width: 48%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #ffff00;
}

#treats_infobox > div:nth-of-type(4) > button:nth-of-type(2) {
	width: 48%;
	background-color: #323232;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	border: 3px solid #00ff00;
}

#shop_infobox {
	position: absolute;
	text-align: center;
	font-size: 12px;
	color: #f0f0f0;
	z-index: 5005;
	/*line-height: 30px;*/
	white-space: nowrap;
	/*make design for this*/
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px;
	pointer-events: none;
	text-align: center;
	transform-origin: bottom left;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}