.body {
	background: #0d0e12;
	font-family: "Work Sans", sans-serif;
}

.axie-container {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.axie-card {
	width: 18%;
	border: 1px solid #ccc;
	padding: 1px;
	text-align: center;
	border: 1px solid #282c34;
    border-radius: 8px;
	background: linear-gradient(180deg, rgba(175, 219, 27, 0), rgb(94 27 219 / 10%));
    position: relative;
	padding: 10px;
}

.axie-img {
	width: auto;
	height: 160px;
}

p {
	color: white;
}

.id_span {
	padding: 5px 10px;
    background: #282c34;
    border-radius: 20px;
}

.price {
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    margin-left: 10px;
	display: flex;
}

.profit_span {
    padding: 5px 10px;
    border: 1px solid #ffffff;
}

.beast_pp {
	color: #fdb014;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.img_pp {
	width: 20px;
	height: 20px;
	margin-right: 3px;
}

.pp_p {
	display: flex;
	flex-wrap: wrap;
}

.aquatic_pp {
	color: #00f5f8;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.plant_pp {
	color: #afdb1b;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.bug_pp {
	color: #ff433e;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.bird_pp {
	color: #fa59a0;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.reptile_pp {
	color: #9967fb;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.dawn_pp {
	color: #7183e3;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.dusk_pp {
	color: #029fae;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.mech_pp {
	color: #71898e;
	background: #282c34;
	border-radius: 20px;
    padding: 5px 10px;
	display: flex;
	margin: 3px;
}

.price_usd {
	color: #b4bccb;
	font-size: 14px;
	margin-left: 10px;
	display: flex;
    align-items: center;
}

.filter {
	padding: 10px 15px;
    background-color: #0d0e12;
    color: white;
    border-color: #3c424d;
    cursor: pointer;
    border-radius: 8px;
	font-family: 'Work Sans';
}

.button_filter {
	background: linear-gradient(104.04deg, #ffb444, #eb6f3a);
    padding: 10px 20px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Work Sans';
    font-weight: 500;
    font-size: 15px;
}

.select_text {
	font-family: 'Work Sans';
	color: white;
}

.mm_val_text {
	font-family: 'Work Sans';
	color: white;
}

.progress-circle {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: conic-gradient(
        #ff9345 calc(var(--progress) * 1%), 
        #3c424d calc(var(--progress) * 1%)
    );
    display: flex;
    justify-content: center;
    align-items: center;
	top: 15px;
    left: 15px;
	filter: drop-shadow(0 0 4px #3c424d));
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background: #13181d;
    border-radius: 50%;
    z-index: 1;
}

.level-text {
    position: relative;
    color: white;
    font-weight: 400;
    z-index: 2;
}

.progress-circle[data-progress] {
    --progress: calc((var(--progress-level) / 30) * 100);
}

.progress-circle[data-progress="0"] { --progress-level: 0; }
.progress-circle[data-progress="1"] { --progress-level: 1; }
.progress-circle[data-progress="2"] { --progress-level: 2; }
.progress-circle[data-progress="3"] { --progress-level: 3; }
.progress-circle[data-progress="4"] { --progress-level: 4; }
.progress-circle[data-progress="5"] { --progress-level: 5; }
.progress-circle[data-progress="6"] { --progress-level: 6; }
.progress-circle[data-progress="7"] { --progress-level: 7; }
.progress-circle[data-progress="8"] { --progress-level: 8; }
.progress-circle[data-progress="9"] { --progress-level: 9; }
.progress-circle[data-progress="10"] { --progress-level: 0; }
.progress-circle[data-progress="11"] { --progress-level: 1; }
.progress-circle[data-progress="12"] { --progress-level: 2; }
.progress-circle[data-progress="13"] { --progress-level: 3; }
.progress-circle[data-progress="14"] { --progress-level: 4; }
.progress-circle[data-progress="15"] { --progress-level: 5; }
.progress-circle[data-progress="16"] { --progress-level: 6; }
.progress-circle[data-progress="17"] { --progress-level: 7; }
.progress-circle[data-progress="18"] { --progress-level: 8; }
.progress-circle[data-progress="19"] { --progress-level: 9; }
.progress-circle[data-progress="20"] { --progress-level: 0; }
.progress-circle[data-progress="21"] { --progress-level: 1; }
.progress-circle[data-progress="22"] { --progress-level: 2; }
.progress-circle[data-progress="23"] { --progress-level: 3; }
.progress-circle[data-progress="24"] { --progress-level: 4; }
.progress-circle[data-progress="25"] { --progress-level: 5; }
.progress-circle[data-progress="26"] { --progress-level: 6; }
.progress-circle[data-progress="27"] { --progress-level: 7; }
.progress-circle[data-progress="28"] { --progress-level: 8; }
.progress-circle[data-progress="29"] { --progress-level: 9; }
.progress-circle[data-progress="30"] { --progress-level: 0; }
.progress-circle[data-progress="31"] { --progress-level: 1; }
.progress-circle[data-progress="32"] { --progress-level: 2; }
.progress-circle[data-progress="33"] { --progress-level: 3; }
.progress-circle[data-progress="34"] { --progress-level: 4; }
.progress-circle[data-progress="35"] { --progress-level: 5; }
.progress-circle[data-progress="36"] { --progress-level: 6; }
.progress-circle[data-progress="37"] { --progress-level: 7; }
.progress-circle[data-progress="38"] { --progress-level: 8; }
.progress-circle[data-progress="39"] { --progress-level: 9; }
.progress-circle[data-progress="40"] { --progress-level: 0; }
.progress-circle[data-progress="41"] { --progress-level: 1; }
.progress-circle[data-progress="42"] { --progress-level: 2; }
.progress-circle[data-progress="43"] { --progress-level: 3; }
.progress-circle[data-progress="44"] { --progress-level: 4; }
.progress-circle[data-progress="45"] { --progress-level: 5; }
.progress-circle[data-progress="46"] { --progress-level: 6; }
.progress-circle[data-progress="47"] { --progress-level: 7; }
.progress-circle[data-progress="48"] { --progress-level: 8; }
.progress-circle[data-progress="49"] { --progress-level: 9; }
.progress-circle[data-progress="50"] { --progress-level: 0; }
.progress-circle[data-progress="51"] { --progress-level: 1; }
.progress-circle[data-progress="52"] { --progress-level: 2; }
.progress-circle[data-progress="53"] { --progress-level: 3; }
.progress-circle[data-progress="54"] { --progress-level: 4; }
.progress-circle[data-progress="55"] { --progress-level: 5; }
.progress-circle[data-progress="56"] { --progress-level: 6; }
.progress-circle[data-progress="57"] { --progress-level: 7; }
.progress-circle[data-progress="58"] { --progress-level: 8; }
.progress-circle[data-progress="59"] { --progress-level: 9; }
.progress-circle[data-progress="60"] { --progress-level: 0; }


.memento-p {
	text-align: left;
	margin-top: 0px;
    margin-bottom: 0px;
	font-size: 14px;
}

.mm-30lvl {
	margin-top: 5px;
}

.memento-span {
	color: #00a100;
}

.span-eth {
	font-size: 12px;
}

.memento-profit {
	text-align: left;
}