@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
/* font-family: 'Comfortaa', cursive; Для заговоков
   font-family: 'Nunito', sans-serif; Для обычного текста
*/
* {
	margin: 0;
}

a {
	text-decoration: none;
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
}

body {
	/*width: 100%;
	max-width: 1920px;
	max-height: 1080px;*/
	box-sizing: border-box;
	font-family: 'Nunito', sans-serif;
	transition: background-color 0.3s, color 0.3s;
}

.wrapper {
	display: flex;
	justify-content: space-between;
}

.title {
	position: relative;
	/*margin: 30px 0 0 50px;*/
	padding: 100px/*30px 0 125px 20px*/;
	top: -20px;
}
.wrapper::before {
	content: "";
	width: 397px;
    height: 318px;
    top: 55px;
    left: 30px;
    z-index: -1;
    position: absolute;
    background: url(../svg/title_shape.svg) no-repeat;
    background-size: 370px auto;
	transition: 0.3s;
}

.title h1 {
	margin: 0;
	font-family: 'Comfortaa', cursive;
	font-size: 20pt;
	font-weight: 300;
	cursor: default;
}
.title h2 {
	margin: 0;
	font-family: 'Comfortaa', cursive;
	font-size: 13pt;
	font-weight: 500;
	cursor: default;
}
hr {
	height: 10px;
	width: 300px;
	border: 0;
}

.skills {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	width: 300px;
	height: 50px;
	margin: auto;
	cursor: default;
}
.skills div {
	height: 30px;
	width: 30px;
	background: orange;
	border-radius: 50%;
	margin: auto;
	transition: 0.3s;
}
.skills div img {
	width: 30px;
	filter: grayscale(1);

}
.skills div:hover img {
	filter: grayscale(0);
}

/*     ФОН     */
.canvas {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}
.square {
	position: relative;
	width: 178px;
	height: 178px;
	background-color: #99FF45;
	z-index: -2;
	transition: 0.3s;
}
.triangle {
	position: relative;
	width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 150px solid #3FE890;
	transition: 0.3s;
}
/*    ---     */

.projects {
	margin: 50px 50px 0 50px;
}
.projects h2 {
	font-family: 'Comfortaa', cursive;
	font-weight: 600;
	margin-bottom: 50px;
	cursor: default;
}

.itembox {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
}

.item {
	min-height: 200px;
	max-width: 500px;
	width: 30%;
	text-align: center;
	margin: 20px;
	cursor: pointer;
}

.image {
	position: relative;
	overflow: hidden;
	max-width: 500px;
	max-height: 200px;
	min-height: 150px;
	width: 100%;
	height: 70%;
	background-color: #1a1329;
	margin-bottom: 10px;
}
.image img {/*
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);*/
	width: 100%;
	object-fit:cover;
	transition: opacity 0.3s, transform 0.6s;
}
.image img:hover {
	opacity: 0.8;
	transform: scale(1.1, 1.1);
}

.hide {
	display: none;
}