:root{
	--BG:#4D6F5A;
	--BG_block:#3d3c40c7;
	--BG_content:#3d3c40c7;
	--BTN_color:#71A9F7;
	--BTN_HoverColor:#607466;
	--BTN_HoverColorblack:#405C48;
	--TEXT_color:#EBF1FF;
	--oneTEXT_color:#EBF1FF;
	--TEXT_color_dark:#3254A2;
	--BG_content_non_activ:#607466;
	--TEXT_content_non_activ:#405C48;
}

i{
	color:#71A9F7;
}
html{
	background: var(--BG);
}
body{
	margin: 0px;
	color: var(--oneTEXT_color);
	overflow-x: hidden;
	cursor: default;
	font-size: 20px;
}

body::-webkit-scrollbar {
	width: 7px;               /* ширина scrollbar */
	z-index: 0;
}
body::-webkit-scrollbar-thumb {
	z-index: 0;
	background-color: #F7DEFF44;    /* цвет плашки */
	border-radius: 20px;       /* закругления плашки */
}
a{text-decoration: none;color: inherit;}
h1{
	margin: 4px 0px;
	text-align: center;
}
h3{
	margin: 4px 0px;
	text-align: center;
}
hr{
	margin: 4px 0px;
	text-align: center;
}
#skelet{
	display: grid;
	grid-template-rows:175px auto 60px;
	width: 800px;
	margin: auto;
	min-height: 100vh;
}
#header{
	background:var(--BG_block);
	border-radius: 100px;
	margin-top: 15px;
	display: grid;
	grid-template-rows: 120px 40px;
	grid-template-columns: 160px auto;
	align-items: center
}
#header img{
	width: 150px;
	margin: 10px;
	grid-row: 1/3;
}
#header span{
	font-size: 40px;
	padding-left: 10px;
}
#MainMenu{
	text-align: center;
	list-style: none;
}
#MainMenu>li{
	display: inline-block;
	background-color: var(--BTN_color);
	border-radius: 5px;
	border: 2px solid var(--TEXT_color);
	color: var(--TEXT_color);
	padding: 2px 5px;
	font-size: 25px;
	height: 25px;
	cursor: pointer;
	vertical-align: middle;
}
#MainMenu ul{
	list-style: none;
	position: absolute;
	border-radius: 10px;
	padding: 2px 0px 0px 0px ;
}
#MainMenu li:hover ul {
	display: block;
}
#MainMenu li ul {
	display: none;
	z-index: 2;
}
#MainMenu li ul li {
	background-color: var(--BTN_color);
	border-radius: 5px;
	border: 2px solid var(--TEXT_color);
	color: var(--TEXT_color);
	padding: 3px;
	font-size: 25px;
	margin: 5px 0px 5px 0px;
	height: 25px;
}
#MainMenu li ul li:hover,#MainMenu li:hover {
	background-color: var(--BTN_HoverColor);
}
#MainMenu a{
	display: block;
	width: 100%;
}
#content{
	margin-top:10px;
	padding: 10px;
	border-radius: 10px;
	background:var(--BG_content);
	min-height:calc(100vh - (205px + 60px)) ;
}
.resume_block{
	font-size: 23px;
}
.work{
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
	list-style: none;
	margin: 5px 0px;
}
.work ul{
	list-style: none;
}
.work>ul{
	display: none;
}
.work:hover>ul{
	display: block;
}
.work_act{background-color: #A1E8AF; color: black;}
.work_dis{background-color: #D289B6;}
#footer{
	padding:0px 50px;
	background-color: var(--BG_block);
	border-radius: 100px 100px 0px 0px;
	margin-top: 10px;
}
tabs {
	color: var(--TEXT_color);
	font-size: 30px;
	top: 10px;
	vertical-align: center;
	text-align: center;
	position: relative;
	display: block;
	background-color: var(--BTN_color);
	z-index: 1;
	border-radius: 20px;
}
tab{
	cursor: pointer;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	padding: 0px 10px;
	height: 40px;
	background-color: var(--BTN_color);
}
.dis_tab{
	background-color: var(--BTN_color);
}
.act_tab{
	background-color: var(--BTN_HoverColor);
	border: 2px solid;
}
.tab_page{
	color:var(--TEXT_color);
	border-radius: 10px;
	top: -40px;
	position: relative;
	padding: 60px 0px 0px 0px;
	background-color: var(--BTN_HoverColor);
	width: 750px;
	margin: auto;
}
.miniature{
	width: 150px;
	border-radius: 10px;
	margin: 0 10px;
	cursor: pointer;
	
}
.block{
	display: grid;
	grid-template-columns: 170px auto;
	align-items: center;

}
.block>a{grid-row:1/5;}

.roller #roller_name{
	display: block;
	position: relative;
	font-size: 30px;
	background-color: #4C4C4C;
	padding: 3px;
	padding-left: 30px;
	z-index: 2;
	border-radius: 10px;
	margin-top: 30px;
	margin-bottom: 15px;
	background:linear-gradient( #686868 0px, #404040 50%);
}
.roller{
	user-select: none;
	position: relative;
}
.roller[state="close"]{
	cursor: zoom-in;
}
.roller[state="open"]{
	cursor: zoom-out;
}
.roller::before{
	z-index: 3;
	position: absolute;
	left: 15px;
	top: 20px;
	display: flex;
	font-size: 70px;
	width: 1px; 
	height: 1px;
	content: '\2022';
	justify-content: center;
	align-items: center;
	color: #57EA57;
}
.roller[data-activ="none"]::before{
	color: #D31B1B;
}

.roller #roller_swich{
	z-index: 3;
	position: absolute;
	left: 710px;
	top: -10px;
	display: flex;
	width: 50px; 
	height:60px;
	justify-content: center;
	align-items: center;
	background:linear-gradient( #828282 0px, #4F4F4F 90%);
	border-radius: 5px;
	font-size: 40px;
}
.roller[state="close"] #roller_swich{
	background:linear-gradient( #4F4F4F 0px,#828282  50%);
}
.roller[state="close"] #roller_swich{
	color: red;
	transform: rotate(180deg);
	transition: 0.5s;
}
.roller[state="open"] #roller_swich{
	transition: 0.5s;
	color: green;
}
.roller #roller_content {
	display: none;
	position: relative;
	top: -23px;
	width: 750px;
	padding: 5px 0px 5px 0px;
	margin: auto;
	color: black;
	background-color: #ECDD95;
	background:
	linear-gradient(135deg, transparent 0px, #ECDD95 0)top left,
	linear-gradient(225deg, transparent 0px, #ECDD95 0)top right,
	linear-gradient(-45deg, transparent 30px, #ECDD95 0)bottom right,
	linear-gradient(45deg, transparent 0px, #ECDD95 0)bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
}
#MW_skills_back{
	width: 100vw;
	height: 100vh;
	background-color: #000000aa;
	position: fixed;
	z-index:4;
	display: none;
	align-items: center;
	justify-content: center;
}
#MW_skills{
	width: 75vw;
	min-width:800px ;
	height: 70vh;
	min-height: 500px;
	background-color: var(--BG_block);
	border-radius: 10px;
	display: grid;
	grid-template-rows: 40px auto;
	grid-template-columns: 225px auto 50px;
}
#MW_skills_header {
	background-color: var(--BG);
	padding: 10px;
	grid-column: 1/3;
	color: var(--TEXT_color_dark);
}
#MW_skills_header div i {
	display: none;
}
#MW_skills_close_btn{
	display: flex;
	user-select: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color: var(--BTN_color);
}
#MW_skills_close_btn:hover{
	background-color: #E26E6E;
}
#MW_skills_list{
	background-color: #F7DEFF44;
}
.MW_skills_shower{
	grid-column: 2/4;
	display: none;
	overflow-y: auto;
}
.MW_skills_shower::-webkit-scrollbar {
	width: 7px;               /* ширина scrollbar */
}
.MW_skills_shower::-webkit-scrollbar-thumb {
	background-color: #F7DEFF44;    /* цвет плашки */
	border-radius: 20px;       /* закругления плашки */
}
.MW_skills_item:hover{
	background-color: #F7DEFF44;
}
.MW_skills_item{
	padding: 0px 20px 0px 5px;
	text-align: center;
	position: relative; 
	height: 50px;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: center;
}
.MW_skills_item_arrow{
	position: absolute;
	display: inline-block;
	right: 1px;

}
.fa-angle-double-right{color: white;}
.MW_skills_object{
	margin: 10px;
	width: 110px;
	height: 130px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: #F7DEFF44;
	padding: 5px;
	border-radius: 10px;
}

.MW_skills_object img{
	width: 90px;
	background-color: #F7DEFF44;
	height: 90px;
	/*background-color: lightgray;*/
	border-radius: 10px;
	padding: 5px;
}
.MW_skills_object2{
	margin: 10px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background-color: #F7DEFF44;
	padding: 10px;
	border-radius: 10px;
}
#page1{
	flex-wrap: wrap;
	align-content: flex-start;
    justify-content: space-evenly;
}
#page4{
	flex-wrap: wrap;
	align-content: flex-start;
    justify-content: space-evenly;
}
#page4 .MW_skills_object{
	width: 255px;
	height: 275px;
}
#page4 .MW_skills_object img{
	width: 245px;
	height: 245px;
}
@media screen and (max-width:980px) {
		html, body {
			overflow-x: hidden;
		}
		#particles-js{
			display: none;
		}
		#skelet{
			display: block;
			width: 100vw;
		}
		#header{
			display: block;
			text-align: center;
			border-radius: none;
			margin: 0px;
			border-radius: 0px;
			height: auto;
		}
		#header img{
			width: 50vw;
			display: block;
			margin: auto;
		}
		#MainMenu{
			display: block;
			padding: 0px;
		}
		#MainMenu li{
			display: block;
			background-color: var(--BG_block);
			border: none;
			font-size: 80px;
			height: auto;
			}
		#MainMenu li ul li{
			position: static;
			}
		#MainMenu li ul{
			position: static;
			}
		#MainMenu li ul li{
			display: block;
			background-color: #405C48;
			border: none;
			margin: 0px;
			border-top: 1px white solid;
			border-bottom: 1px white solid;
			font-size: 80px;
			height: auto;
			}
	}