* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  :root {
	--accent: #e56300;
	--white: #f5efed;
	--border-color: #b99c93;
	--bg-color: rgba(34, 31, 36, 0.9);
	--accent-gradient: linear-gradient(275deg, #fda503, #e56300 45%, #e56300 55%, #fda503) 0%/200%;
	--accent-gradient-hover: linear-gradient(275deg, #fda503, #e56300 45%, #e56300 55%, #fda503) 100%/200%;
	--gap-xl: 6.4rem;
	--gap-lg: 4.8rem;
	--gap-md: 3.2rem;
	--gap-sm: 2.4rem;
	--gap-ss: 1.6rem;
	--gap-xs: 0.8rem;
	font-size: 10px;
  }
  ol,
  ul {
	list-style-type: none;
  }
  a {
	text-decoration: none;
  }
  img {
	max-width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	vertical-align: top;
  }
  h1 {
	align-items: center;
	display: flex;
	font-size: 4rem;
	gap: var(--gap-ss);
	line-height: 4.4rem;
	margin-bottom: var(--gap-sm);
  }
  h1:after {
	background: linear-gradient(90.01deg, #e56300 28.96%, rgba(229, 99, 0, 0.5) 54.49%, rgba(229, 99, 0, 0));
	content: "";
	display: inline-block;
	height: 1px;
	width: 10rem;
  }
  h2 {
	font-size: 3.2rem;
	line-height: 3.6rem;
  }
  h5 {
	font-size: 2rem;
	line-height: 2.4rem;
	margin-bottom: var(--gap-xs);
  }
  .description {
	opacity: 0.9;
  }
  body {
	background-attachment: fixed;
	background-image: url(/images/desktop.jpg?01a43332654055b21c413961ccbca716);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--white);
	font-family: El Messiri;
	font-size: 1.6rem;
	line-height: 2.4rem;
	max-width: 100%;
	min-width: 320px;
	overflow-x: hidden;
  }
  input[type="radio"] {
	display: none;
  }
  .separator {
	background: linear-gradient(90.01deg, rgba(229, 99, 0, 0) 0.01%, rgba(229, 99, 0, 0.5) 27.61%, #e56300 51.57%, rgba(229, 99, 0, 0.5) 76.05%, rgba(229, 99, 0, 0));
	border: none;
	height: 1px;
	margin: var(--gap-ss) 0;
  }
  .sidebar {
	align-items: center;
	background-color: rgba(34, 31, 36, 0.9);
	border-right: 2px solid var(--border-color);
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
	height: 100%;
	justify-content: center;
	left: 0;
	max-height: 100vh;
	padding: var(--gap-ss);
	position: fixed;
	top: 0;
	width: clamp(30rem, 100%, 32rem);
  }
  .sidebar:after {
	content: url(/images/angle.svg?6485dd528ad21df28aae90ae87d7a3d9);
	left: 100%;
	position: absolute;
	top: 50%;
  }
  .logo {
	transition: all 0.5s;
  }
  .logo:hover {
	filter: brightness(140%);
  }
  .menu-container {
	width: 100%;
  }
  .menu {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
  }
  .menu__element {
	text-align: center;
  }
  .menu__link {
	color: var(--white);
	font-size: 2.4rem;
	line-height: 3.2rem;
	transition: all 0.35s;
  }
	
  .menu__link:hover {
	color: var(--accent);
  }
  .social__links {
	display: flex;
	gap: var(--gap-sm);
  }
  .social__link {
	align-items: center;
	background: var(--accent-gradient);
	border-radius: 50%;
	display: flex;
	height: 5.6rem;
	justify-content: center;
	transition: all 0.5s;
	width: 5.6rem;
  }
  .social__link:hover {
	background: var(--accent-gradient-hover);
  }
  .content {
	margin-left: 32rem;
	max-width: 118rem;
	padding: var(--gap-lg);
  }
  .left-side {
	position: sticky;
	top: var(--gap-md);
  }
  
  /* !Profession */
  .profession {
	align-items: start;
	display: flex;
	gap: var(--gap-md);
  }
  .profession__avatar {
	background: url(/images/img-frame.svg?2a1b036c733cc14cc06bce60a7c3306e) 50% / contain no-repeat;
	min-width: 32rem;
	padding: var(--gap-ss);
	position: sticky;
	text-align: center;
  }
  .profession__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
  }
  /* !Container Info */
  .container-info {
	background: var(--bg-color);
	border: 2px solid var(--border-color);
	overflow: hidden;
	padding: var(--gap-md);
	position: relative;
  }
  .skill__info {
	align-items: start;
	display: flex;
	gap: var(--gap-sm);
  }
  .skill__icon {
	border: 1px solid var(--border-color);
	max-width: 32px;
  }
  .skill__levels {
	display: flex;
	gap: var(--gap-xs);
  }
  .skill__level-label {
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 2.4rem;
	justify-content: center;
	transition: all 0.35s;
	width: 2.4rem;
  }
  :where(.skill__levels, .items__levels) input[type="radio"]:checked + label {
	background-color: var(--accent);
	border-color: var(--accent);
  }
  .skill__parametrs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs) var(--gap-ss);
	margin-bottom: var(--gap-sm);
	width: 100%;
  }
  :where(.buff__info, .debuff__info, .stats__info) .skill__parametrs {
	margin-bottom: 0;
  }
  .skill__parametr {
	flex: 1 1 calc(50% - var(--gap-ss) / 2);
  }
  .skill__parametr-value {
	color: var(--accent);
  }
  
  .buff__info,
  .debuff__info,
  .stats__info {
	background: rgba(47, 47, 47, 0.9);
	margin-bottom: 20px;
	padding: var(--gap-sm);
  }
  .archetypes {
	display: flex;
	justify-content: space-between;
	margin-top: var(--gap-md);
  }
  .archetypes__container .separator {
	margin-bottom: var(--gap-md);
  }
  .archetypes__container .left-side {
	margin-bottom: var(--gap-sm);
	width: 32rem;
  }
  .archetypes__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-size: 2rem;
	gap: var(--gap-xs);
	height: 16.5rem;
	justify-content: center;
	min-width: 14rem;
	position: relative;
  }
  .archetypes__label:after {
	content: url(/images/active-type.webp?545f90a7d24215dc0bb5f8e9aceb0d11);
	display: block;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: all 0.5s;
	width: 100%;
  }
  input:checked + .archetypes__label:after {
	opacity: 1;
  }
  .archetype {
	align-items: start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-md);
	left: var(--gap-md);
	opacity: 0;
	overflow: hidden;
	position: absolute;
	transition: all 0.5s;
	z-index: -1;
  }
  .archetype .profession__avatar {
	margin-bottom: var(--gap-sm);
  }
  .archetype .types {
	display: flex;
	flex: 1 1 calc(100% - 32rem - var(--gap-md));
	flex-wrap: wrap;
	gap: var(--gap-sm);
  }
  .archetype .types .type {
	align-items: center;
	color: var(--white);
	display: flex;
	flex: 0 0 calc(20% - 24px);
	flex-direction: column;
	gap: var(--gap-xs);
	min-width: 100px;
	text-align: center;
	transition: all 0.35s;
  }
  .archetype .types .type img {
	transition: all 0.35s;
	width: 64px;
	height: 64px;
	-o-object-fit: cover;
	   object-fit: cover;
  }
  .archetype .types .type:hover {
	color: var(--accent);
  }
  .archetype .types .type:hover img {
	filter: brightness(130%);
  }
  .archetype.open{
	opacity: 1;
	position: static;
	transition-delay: 0.35s;
  }
  .burger-btn,
  .menu-mobile {
	display: none;
  }
  .burger {
	align-items: center;
	background: var(--accent-gradient);
	border-radius: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 4rem;
	justify-content: center;
	left: 0;
	overflow: hidden;
	position: relative;
	top: 0;
	width: 4rem;
  }
  .burger span,
  .burger:after,
  .burger:before {
	background: var(--white);
	display: block;
	height: 2px;
	min-width: 2rem;
	position: relative;
	transition: all 0.5s;
  }
  .burger:after,
  .burger:before {
	content: "";
  }
  .burger-btn:checked + .burger {
	background: var(--accent-gradient-hover);
	gap: 0;
  }
  .burger-btn:checked + .burger span {
	opacity: 0;
  }
  .burger-btn:checked + .burger:after {
	top: -2px;
	transform: rotate(45deg);
  }
  .burger-btn:checked + .burger:before {
	top: 2px;
	transform: rotate(-45deg);
  }
  
  /* !Items */
  .items__levels {
	align-items: center;
	display: flex;
	gap: 1.2rem;
  }
  .items .skill__level-label {
	height: 3.2rem;
	width: 3.2rem;
  }
  .items .items__container {
	display: none;
  }
  
  .items .items__container.open {
	display: block;
  }
  
  .items:has(#ba:checked) .ba-items {
	display: block;
  }
  .items:has(#ex:checked) .ex-items {
	display: block;
  }
  .items:has(#el:checked) .el-items {
	display: block;
  }
  .items:has(#ma:checked) .ma-items {
	display: block;
  }
  .items:has(#gm:checked) .gm-items {
	display: block;
  }
  .item__header {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	justify-content: space-between;
  }
  .item__header .open-item rect {
	fill: rgba(229, 99, 0, 0);
  }
  .item__header .open-item {
	min-width: 3.2rem;
  }
  .item__description {
	flex: 100%;
  }
  .item__header .open-item,
  .item__header .open-item rect,
  .item__header .open-item:hover path {
	transition: all 0.35s;
  }
  .item__header .open-item:hover rect {
	fill: #775d50;
  }
  .item__header .open-item:hover path {
	stroke: var(--white);
  }
  .item__header.open .open-item {
	transform: rotate(180deg);
  }
  .item__header.open + .item__manufactory {
	display: block;
  }
  .item__container {
	background: rgba(47, 47, 47, 0.9);
	margin-bottom: var(--gap-ss);
	padding: var(--gap-sm);
  }
  .craft-item,
  .item__container .item__info {
	align-items: center;
	display: flex;
	gap: 1.2rem;
  }
  .item__info > img {
	width: 48px;
  }
  .item__manufactory {
	display: none;
	margin-left: var(--gap-md);
  }
  .item__manufactory img {
	width: 32px;
  }
  .craft-item,
  .craft-item__sub {
	margin-bottom: var(--gap-ss);
  }
  .craft-item__sub {
	border-left: 1px solid var(--accent);
	margin-left: var(--gap-ss);
	padding-left: var(--gap-lg);
  }
  .craft-item__main {
	cursor: pointer;
	position: relative;
	transition: all 0.35s;
  }
  .craft-item__main:hover {
	color: var(--accent);
  }
  .craft-item__main:after,
  .craft-item__main:before {
	background: var(--accent);
	content: "";
	display: block;
	height: 2px;
	left: -24px;
	position: absolute;
	width: 16px;
  }
  .craft-item__main:after {
	transform: scaleY(1) rotate(90deg);
  }
  .craft-item__main.open:after {
	transform: scaleY(0) rotate(90deg);
  }
  .craft-item__main + .craft-item__sub {
	display: none;
  }
  .craft-item__main.open + .craft-item__sub {
	display: block;
  }
  .craft-item:last-of-type {
	margin-bottom: 0;
  }
  .item__container h5 {
	margin: 0;
  }
  .item__container img {
	border: 1px solid #775d50;
  }
  .item__stats {
	display: flex;
	gap: var(--gap-sm);
  }
  .item__stats .value {
	color: var(--accent);
	font-weight: 700;
  }
  .items-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
  }
  .item-icon,
  .items h2 {
	text-align: center;
  }
  .item-icon {
	align-items: center;
	color: var(--white);
	display: flex;
	flex: 0 0 calc(25% - var(--gap-sm) * 3 / 4);
	flex-direction: column;
	gap: var(--gap-xs);
	transition: all 0.35s;
  }
  .item-icon:hover {
	color: var(--accent);
  }


	.jewelsContainer {
		position: relative;
		display: flex;
		gap: 16px;
		max-height: 70vh;
		overflow: auto;
	}
	
	.jewelsContainer.hide {
		display: none;
	}
		
	.jewels .hidden {
		display: none;
	}
	
	.jewelsGroup {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
		gap: 16px;
	}
	
	.jewel {
		display: flex;
		gap: 12px;
		align-items: center;
		background: rgba(47, 47, 47, 0.9);
		padding: var(--gap-xs);
		transition: all .35s;
	}
	
	.jewel:hover {
		cursor: pointer;
		background: rgba(229, 99, 0, 0.5);
	}
	
	.jewel.active {
		background: rgba(229, 99, 0, .6);
	}
	
	.jewel.inside {
		pointer-events: none;
		margin-top: 1.6rem;
		flex-grow: 1;
	}
	
	.jewel__name {
		font-size: 24px;
		font-weight: bold;
	}
	
	.jewel__img {
		width: 4.8rem;
	}
	
	.jewelCalculator {
		display: flex;
		gap: 24px
	}
	
	.statsGroup {
		display: none;
		max-height: 400px;
	}
	
	.statsGroup.active {
		display: block;
		padding: 16px;
		background: rgba(47, 47, 47, 0.9);
		overflow: auto;
	}
	
	.statItem {
		cursor: pointer;
		padding: 8px;
		background: rgba(255, 255, 255, 0.1);
		margin-bottom: 8px;
		transition: all .35s;
	}
	
	.statItem.added {
		display: none;
	}
	
	.statItem:hover {
		background: rgba(229, 99, 0, 0.5);
	}
	
	.cost {
		display: flex;
		gap: 2.4rem;
		flex-wrap: wrap;
	}
	
	.cost-item {
		display: flex;
		gap: 2.4rem 1.2rem;
		flex: 1 0 25%
	}
	
	.cost-item img {
		width: 4.8rem;
		height: 4.8rem;
	}
	
	.cost__count {
		font-weight: bold;
		color: var(--accent);
	}
	
	.selectedStats {
		flex: 1 0 auto;
	}
	
	.jewel__stats {
		display: none;
	}
	
	.jewel__stats.show {
		display: block;
	}
	
	.cta {
		display: flex;
		align-items: center;
		cursor: pointer;
		letter-spacing: .6px;
		background: rgba(229, 99, 0, .6);
		color: #fff;
		padding: 1.6rem 3.2rem;
		margin: 1.6rem 0;
		width: -moz-max-content;
		width: max-content;
		font-weight: bold;
		transition: all .35s;
	}
	
	.cta:hover {
		filter: brightness(180%);
	}
	
	.cta:active {
		filter: brightness(70%);
	}
	
	.cta.disabled {
		pointer-events: none;
		opacity: 0.3;
	}
	
	.title {
		font-size: 2.4rem;
		line-height: 3.2rem;
		margin-bottom: 16px;
	}
	
	.points__info {
		margin-left: 4rem;
	}
	
	.pointsAvalible {
		color: #50ef50;
	}
	
	.maxPoins {
		color: #efea50
	}
	
	.selectedStat {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	
	.selectedStat .separator {
		flex: 1 0 100%
	}
	
	.controllers {
		display: flex;
	}
	
	.stat__controller {
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 3.2rem;
		font-family: monospace;
		line-height: 1;
		width: 3rem;
		height: 3.2rem;
		background: rgba(255, 255, 255, 0.1);
		transition: all .35s;
	}
	
	.stat__controller:hover {
		background-color: rgba(229, 99, 0, 0.5);;
	}
	
	.stat__controller:active {
		background-color: rgba(229, 99, 0, 0.6);;
	}
	
	.stat__level {
		height: 3.2rem;
		padding: 0 4px;
		text-align: center;
		-moz-appearance: textfield;
	}
	.stat__level::-webkit-inner-spin-button,
	.stat__level::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
		display: none;
	}
	
	.stat__value {
		font-weight: bold;
		color: var(--accent)
	}
	
	.selectedJewel {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.jewel__uplevel {
		margin-bottom: 0;
	}
	
	.stat__delete {
		position: relative;
		cursor: pointer;
		padding: 0.4rem 4rem 0.4rem 1.2rem;
		height: 3.2rem;
		background-color: #ef5050;
		transition: all .35s;
	}
	
	.stat__delete::after,
	.stat__delete::before {
		position: absolute;
		top: calc(50% - 1px);
		right: 1.2rem;
		content: '';
		width: 1.6rem;
		height: 2px;
		background-color: #fff;
	}
	
	.stat__delete::after {
		transform: rotate(45deg);
	}
	
	.stat__delete::before {
		transform: rotate(-45deg);
	}
	
	.stat__delete:hover {
		filter: brightness(80%);
	}
	
	.stat__delete:active {
		filter: brightness(40%);
	}
	
	.stat__name {
			flex-basis: 50%;
	}
	
	/* !Forum */
	.forumItems {
		margin-top: var(--gap-md);
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	.forumItems .forum__item {
		padding: var(--gap-md);
		flex: 1 1 calc(100% / 3 - var(--gap-xm));
	}
	
	.forum__item-title {
		color: var(--accent);
		margin-bottom: var(--gap-xs);
	}

	.forumItems .forum__item {
		display: flex;
		gap: var(--gap-sm)
	}

	.choose-language {
		display: flex;
		gap: var(--gap-sm);
		justify-content: center;
	}

	.language {
		display: flex;
		flex-direction: column;
		gap: var(--gap-ss);
		align-items: center;
	}

	.language__icon {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
	}

	.forum__item.item__container img {
    height: 64px;
	}

  @media (max-width: 1440px) {
	.archetypes {
		transform: scale(0.8);
		transform-origin: left;
	}
  }
  @media (max-width: 1280px) {
	.content {
		padding: var(--gap-ss);
	}
	.profession {
		gap: var(--gap-ss);
	}
	.left-side {
		top: var(--gap-ss);
	}
	.container-info {
		padding: var(--gap-sm);
	}
  }
  @media (max-width: 1279px) {
	.content {
		margin-top: 10rem;
	}
	.menu-mobile {
		align-items: center;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		background: var(--bg-color);
		border-bottom: 1px solid var(--border-color);
		display: flex;
		justify-content: space-between;
		left: 0;
		padding: var(--gap-ss);
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 101;
	}
	.left-side {
		top: 11.6rem;
	}
	.content {
		margin-left: 0;
	}
	.sidebar {
		border: none;
		left: auto;
		right: -100%;
		transition: all 0.35s;
		z-index: 100;
		justify-content: flex-end;
	}
	.sidebar .logo {
		display: none;
	}
	body:has(.burger-btn:checked) .sidebar {
		right: 0;
	}
	body:has(.burger-btn:checked) {
		overflow: hidden;
	}
	.archetypes {
		transform: scale(1);
	}
  }
  @media (max-width: 992px) {
	.profession {
		flex-direction: column;
	}
	.profession .left-side {
		align-self: center;
		position: static;
	}
	.archetypes {
		margin: -1.6rem 0;
		overflow-x: auto;
	}
	.archetypes__label {
		min-width: 12rem;
		text-align: center;
		transform: scale(0.8);
	}
	.archetypes__label:after {
		transform: scale(0.8);
		transform-origin: left;
	}
  }
  @media (max-width: 767px) {
	body {
		font-size: 1.5rem;
	}
	h1 {
		font-size: 3rem;
		line-height: 3.6rem;
	}
	h2 {
		font-size: 2.6rem;
		line-height: 3rem;
	}
	h5 {
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.item__description,
	.item__stats {
		flex: 100%;
		order: 1;
	}
	.item__info {
		max-width: calc(100% - 5.6rem);
	}
  }
  @media (max-width: 576px) {
	.sidebar {
		width: 100%;
	}
	.skill__levels {
		flex-wrap: wrap;
	}
	.skill__levels p {
		flex: 1 0 100%;
	}
	.skill__parametr {
		flex-basis: 100%;
	}
	.archetype .profession__avatar,
	.archetypes__container .left-side {
		align-self: start;
		margin: 0 auto;
	}
	.archetype .types {
		justify-content: center;
	}
	.profession__avatar {
		min-width: auto;
	}
	.item__stats {
		display: block;
	}
	.items__levels {
		flex-wrap: wrap;
	}
	.items__levels p {
		flex-basis: 100%;
	}
	.item__container {
		margin: 0 -2.4rem;
	}
	.item__header.open + .item__manufactory {
		margin: 1.6rem;
	}
	.craft-item__sub {
		border-bottom: 1px solid var(--accent);
		border-left: none;
		border-top: 1px solid var(--accent);
		margin-left: 1.2rem;
		padding: 1.2rem 0;
	}
	.item-icon {
		flex: 0 0 calc(33.33333% - var(--gap-sm) * 2 / 3);
	}

  }
  @media (max-height: 720px) {
	.logo img {
		max-height: 12rem;
	}
  }
		
	@media (max-width: 767px) {
		.cost-item {
			flex: 1 0 33%;
			gap: 0.8rem
		}
	}

	@media (max-width: 480px) {
		.cost {
			gap: 1.2rem
		}
		.cost-item img {
			width: 3.2rem;
			height: 3.2rem;
		}
		.cost-item {
			flex: 100%
		}

		.cost__info {
			display: flex;
			justify-content: space-between;
			flex: 100%;
		}

		.cta.jewel__uplevel{
			flex: 100%;
			justify-content: center;
		}
		.jewel.inside {
			flex-wrap: wrap;
		}
		.points__info {
				margin-left: 6rem;
		}

		.jewelCalculator {
			flex-direction: column;
		}

		.jewelCalculator .stats {
			max-height: 20rem;
			overflow: hidden;
		}
		.container-info.jewels {
			position: inherit;
			margin-bottom: 20rem;
		}
		.selectedJewel {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 100;
		}
		.cta.jewel__uplevel {
			margin-top: 0;
		}
		.stat__delete {
			flex: 100%;
			margin-top: 1.2rem;
		}

		.container-info.items h1::after {
			display: none;
		}

		.forumItems {
			gap: 1.2rem
		}
	}