@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap"); :root {
	---color-background-main: #252531;
	---color-text: #ffffff;
	---color-text-a-hove: #b1b1b1;
	---color-text-a-active: #595959;
	---color-but: #f7df34;
	---color-but-hove: #cbb724;
	---color-but-text: #000000;
}

body, input, button {
	font-family: Oswald, sans-serif;
}
a{
	color: var(---color-text);
}

body {
	background-color: rgb(0, 0, 0);
	color: var(---color-text);
}

@media all and (min-width: 1920px){
	body{
		zoom: calc((100% / 70) * 100)
	}
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

.headers_img {
	position: absolute;
	width: 99%;
	height: 66%;
	overflow-x: hidden;
	margin: 0px auto;
	top: 0px;
}

.xbox {
	width: 100%;
	height: -webkit-fill-available;
	position: absolute;
	background: url("../img/xbox.png") 0% 0% / 44% no-repeat;
	top: -41%;
	left: 56%;
}

.psd {
	width: 100%;
	height: -webkit-fill-available;
	position: absolute;
	background: url("../img/psd.png") 0% 0% / 44% no-repeat;
	top: -41%;
	left: 0%;
}

.main {
	position: relative;
	max-width: 90%;
	background-color: var(---color-background-main);
	margin: 0px auto;
	top: 0%;
}

.headers {
	height: 75px;
	max-width: 1500px;
	margin: 0 auto;
}

.headers_container {
	height: 100%;
}

.nav {
	position: relative;
	display: flex;
	height: 100%;
	padding-left: 10px;
	align-items: center;
	justify-content: space-between;
}

.menu {
	position: absolute;
	color: var(---color-text);
	width: 200px;
	background-color: rgb(15, 18, 36);
	border-radius: 2%;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.05rem;
	top: 45px;
	left: 24px;
	z-index: 999;
}

.menu hr {
	display: none;
	width: 165px;
	margin: 0;
	margin-top: 5px;
	margin-bottom: 10px;
}

.my_buys_menu {
	display: none;
}

.menu__item {
	margin-top: 5px;
	margin-bottom: 5px;
}

.link_menu:hover {
	color: rgb(130, 130, 130);
	cursor: pointer;
}

.menu_but {
	position: relative;
	height: 37px;
	background-color: rgb(247, 223, 52);
	padding-left: 46px;
	padding-right: 20px;
	border-radius: 6px;
	color: rgb(16, 11, 7);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	margin-left: 20px;
}

.menu_but span, .menu_but span::before, .menu_but span::after {
	position: absolute;
	top: 12px;
	left: 1px;
	margin-left: 17px;
	width: 18px;
	height: 2px;
	background-color: rgb(16, 11, 7);
	transition: all 0.1s ease 0s;
}

.menu_but span::before {
	top: 6px;
	left: -17px;
}

.menu_but span::after {
	top: 12px;
	left: -17px;
	width: 11px;
}

.menu_but span::before, .menu_but span::after {
	content: "";
}

.logo_a {
	margin-right: 25px;
	margin: 0 auto;
}

.logo {
	width: 100%;
	height: 100%;
}

.my_buys {
	margin-right: 35px;
	color: var(---color-but-hove);
	font-size: 1.09em;
}

.my_buys:hover {
	color: rgb(151, 137, 28);
}

.slider_header{
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.slider_show {
	display: flex;
	width: 100%;
	height: 33.48vw;
	transition: .4s;
}

.link_purchase_slider{
	flex: 0 0 100%;
	width: 100%;
}

.slider_show img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.background_slider {
	position: absolute;
	width: 100%;
	height: 33.48vw;
	top: 0;
	z-index: 2;
}

.background_slider:hover {
	background: rgba(0, 0, 0, 0.42);
}

.link_purchase_slider::after {
	content: "";
	display: block;
	width: 100%;
	height: 13.75vw;
	position: relative;
	bottom: 13.9vw;
	left: 0px;
	filter: brightness(95%);
	background: linear-gradient(to bottom, #00000000, var(---color-background-main));
	z-index: 1;
}

.slider_container {
	position: relative;
	display: flex;
	width: 100%;
	height: 0.1vw;
	margin: 0px auto;
	bottom: 4vw;
	align-items: center;
	z-index: 4;
}

.dot_item {
	display: flex;
	margin: 0px auto;
	width: 100%;
	height: 50px;
	justify-content: center;
	align-items: center;
}

.dot {
	position: relative;
	cursor: pointer;
	height: 8px;
	width: 8px;
	background-color: rgb(187, 187, 187);
	border-radius: 50%;
	transition: all 0.6s ease 0s;
	margin-left: 15px;
	z-index: 1;
}

.dot:hover, .dot.hover {
	box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;
	background-color: rgba(0, 0, 0, 0.318);
}

.dot_left, 
.dot_right {
	position: absolute;
	display: flex;
	height: 33.59vw;
	top: 0;
	align-items: center;
	justify-content: center;
	padding-left: 41px;
	padding-right: 41px;
	z-index: 3;
}

.dot_left{
	left: -1px;
}

.dot_right {
	right: 0px;
}

.dot_left span, .dot_right span {
	display: block;
	width: 20px;
	height: 20px;
	border-top: 5px solid rgb(87, 86, 86);
	border-right: 5px solid rgb(87, 86, 86);
	transform: rotate(225deg);
}

.dot_right span {
	transform: rotate(45deg);
}

.dot_right:hover, .dot_left:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.21);
	& span {
			border-top: 5px solid rgb(247, 223, 52);
			border-right: 5px solid rgb(247, 223, 52);
	}
}

.underline {
	position: relative;
	font-size: 16px;
	padding: 38px 1%;
}

.underline::after {
	content: "";
	display: block;
	width: 25%;
	height: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	filter: brightness(97%);
	background: linear-gradient(to left, #00000000, var(---color-background-main));
}

.underline::before {
	content: "";
	display: block;
	width: 25%;
	height: 100%;
	position: absolute;
	bottom: 0px;
	right: 0px;
	filter: brightness(97%);
	background: linear-gradient(to right, #00000000, var(---color-background-main));
}

.underline_mid {
	margin: 0px auto;
	height: 7px;
	max-width: 1700px;
	background: repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, rgba(0, 255, 0, 0.5) 160px, rgba(149, 0, 255, 0.5) 200px, rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, rgba(255, 0, 0, 0.5) 300px) border-box, repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px, rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px, rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 164, 0.5) 210px, rgba(255, 0, 0, 0.5) 230px), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green 200px, blue 250px, indigo 300px, violet 350px, red 370px);
	border-radius: 100%;
	box-shadow: rgb(5, 5, 5) 1px 1px 1px 0.1px inset;
}

.shop{
	max-width: 1500px;
	margin: 0 auto;
}

.shop_menu{
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	flex-wrap: wrap;
	padding: 0;
}

/* .activate{
	background-color: var(---color-but);
	color: var(---color-but-text);
} */

.shop_menu_li{
	margin: 0 20px 20px 20px;
	color: var(---color-text);
}

.shop_menu_li a{
	display: flex;
	border: 1px solid;
	width: 128px;
	height: 30px;
	border-radius: 3px;
	align-items: center;
	justify-content: center;
}

.shop_menu_li a:hover{
	background-color: var(---color-but);
	color: black;
}

.shop_menu a:active{
	color: var(---color-text-a-active);
}

.item_headers{
	width: 100%;
	/* display: flex;
	flex-wrap: wrap;
	justify-content: center; */
	display: grid;
	grid-gap: 26px;
	grid-template-columns: repeat(auto-fill, 221px);
	margin: auto;
	justify-content: center;
}

.item_body{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 205px;
	height: 387px;
	padding: 20px 10px 30px 10px;
}

.itme_img{
	position: relative;
	width: 100%;
	height: 100%;
	img{
		width: 100%;
		height: 100%;
		border-radius: 10px;
		object-fit: cover;
	}
	a{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	a:hover{
		cursor: pointer;
		background-color: #ffffff38;
		border-radius: 10px;
	}
}

.itme_text{
	margin-top: 10px;
}

.price{
	margin-top: 10px;
	a{
		display: inline-flex;
		width: 75px;
		height: 32px;
		background-color: var(---color-but);
		color: var(---color-but-text);
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		font-weight: 500;
	}
	a:hover{
		background-color: var(---color-but-hove);
	}
	a:active{
		color: var(---color-text-a-active);
	}
}

.pages_number{
	position: relative;
	display: flex;
	width: 100%;
	padding-top: 20px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	a{
		padding: 5px 20px 5px 20px;
		border: 1px solid;
		margin-left: 10px;
		margin-right: 10px;
	}
	a:hover{
		background-color: var(---color-but);
		color: var(---color-but-text);
	}
	a:active{
		color: var(---color-text-a-hove);
	}
	span{
		padding-top: 20px;
		letter-spacing: 3px;
	}
}

.hot{
		background-color: var(---color-but);
		color: var(---color-but-text);
		cursor: context-menu;
	}

footer{
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	hr{
		width: 21px;
	margin-left: 0px;
	}
	a:hover{
		color: var(---color-text-a-hove);
	}
	li{
		margin-bottom: 2px;
	}
}

.footer_logo_header{
	display: flex;
	justify-content: space-between;
	margin-left: 38px;
	margin-right: 38px;
}

.footer_logo{
	flex: 1;
}

.footer_client{
	flex: 0;
	min-width: 200px;
}

.footer_genres{
	flex: 0;
}

.social{
	display: flex;
	margin-top: 20px;
	a{
		display: block;
	width: 30px;
	height: 30px;
	background-size: contain;
	margin-right: 20px;
	}
}

.name_shop{
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-end;
	hr{
		border: none;
		width: 100%;
		height: 1px;
		/* color: #03ff20; */
		background-color: #454545;
	}
	span{
		font-size: 15px;
		color: #797979;
		margin-right: 38px;
		padding-bottom: 10px;
	}
}


@media all and (max-width: 660px){
	.footer_logo_header{
		flex-direction: column;
    align-items: center;

		ul{
			width: 200px;
			padding: 0;
			margin-top: 10px;
		}
	}
	.footer_logo{
		width: 200px;
	}

	.my_buys{
		display: none;
	}

	.logo_a{
		margin-right: 25px;
	}

	.my_buys_menu{
		display: block;
	}
	.menu hr{
		display: block;
	}

}

@media all and (max-width: 432px){
	.menu_but{
		margin-left: 0px;
		margin-right: 10px;
	}
	.menu{
		left: initial;
	}
}