:root {
	--main_c: #302928;
	--main_hc: #8C8B83;
	--bg_c: #141111;
	--tbg_c: rgba(0, 0, 0, 0.2);
	--header_h: 50px;
	--header_padding: 15px;
}

* {
	padding: 0;
	margin: 0;
	font-family: Arimo;
	font-size: 20px;
	transition: 0.25s;
	color: white;
	scroll-behavior: smooth;
}

a {
	text-decoration: none
}

img {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

::selection {
	background: var(--main_hc);
	color: black;
}

.body {
	background: var(--bg_c);
}

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	background: url(img/bg.png);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}


.header {
	position: fixed;
	width: calc(100% - (2 * var(--header_padding)));
	height: var(--header_h);;
	display: flex;
	align-items: center;
	gap: 30px;
	padding: var(--header_padding);
	background: linear-gradient(135deg, var(--main_c), transparent);
	box-shadow: rgb(0, 0, 0, 0.4) 0px 0px 25px;
	z-index: 10;
}
	.header .logo {
		display: flex;
		align-items: center;
	}
		.header .logo .icon {
			height: 50px;
		}
		.header .logo .text {
			margin-left: 10px;
			font-family: Jost;
			max-width: 130px;
			line-height: 22px;
		}

.main {
	margin-top: calc(2 * var(--header_padding) + var(--header_h));
	padding: 0 100px;
}

.mb {
	display: none;
}


.title {
	font-family: Jost;
	font-style: italic;
	font-size: 60px;
	line-height: 60px;
}
.small_text {
	margin: 20px 0 0 40px;
}

#about, #projects, #artwork {
    position: relative;
    top: calc(-2 * var(--header_h));
    height: 0;
    visibility: hidden;
}

.about {
	height: calc(100vh - (2 * var(--header_padding) + var(--header_h)));
	display: flex;
	justify-content: center;
	align-items: center;
}
	.about .avatar {
	    border-radius: 50px;
	    height: 350px;
	}
	.about .texts {
		margin-left: 40px;
		max-width: 720px;
	}

.projects {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
}
.project {
	display: flex;
	gap: 20px;
	background: var(--tbg_c);
	padding: 20px;
	border-radius: 20px;
	max-width: calc(40% - 30px)
}
	.project .icon {
		border-radius: 10px;
		height: 120px;
	}
	.project .title {
		font-size: 25px;
		line-height: 25px;
	}
	.project .texts {
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: column;
    	gap: 10px;
    }
	.project .desc {
		font-size: 16px;
	}
	.project .links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

.artworks {
	margin: 30px 0;
	border-radius: 30px;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
	.artworks .title {
		font-size: 35px;
		line-height: 35px;
		text-align: center;
	}
.artwork {
	background: var(--tbg_c);
	padding: 20px;
	border-radius: 20px;
	max-width: calc(40% - 30px);
	display: flex;
	flex-direction: column;
	align-items: center;
}
	.artwork:hover {
		background: rgba(0, 0, 0, 0.5);
		cursor: pointer;
	}
	.artwork .img {
		height: 300px;
	}
	.artwork .title {
		font-size: 20px;
	}



.link {
	padding: 10px 15px;
	border-radius: 15px;
	background: var(--main_c);
	display: flex;
	align-items: center;
	gap: 5px;
}
	.link .icon {
		border-radius: 0;
		height: 16px;
	}
	.link .text {
		font-size: 16px;
	}
	.link:hover {
		background: var(--bg_c);
	}
.link.cf {
	background: #eb622b;
}
	.link.cf:hover {
		background: #B74D22;
	}
.link.mr {
	background: #1BD96A;
}
	.link.mr:hover {
		background: #15A54F;
	}


#gallery {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.75);
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
}
	#gallery.opened {
		opacity: 1;
		visibility: visible;
	}
	#gallery_img {
        max-width: 95%;
        max-height: 95%;
        transform: scale(0.9);
    }
    #gallery.opened #gallery_img {
        transform: scale(1);
    }


.footer {
	background: linear-gradient(45deg, transparent, var(--main_c));
	padding: 10px;
	display: flex;
	justify-content: center;
	box-shadow: rgb(0, 0, 0, 0.4) 0px 0px 25px;
}
	.footer .group {
		display: flex;
		align-items: center;
		flex-direction: column;
	}



@media (max-width: 720px) {
	:root {
		--header_h: 40px;
	}

	* {
		font-size: 15px;
	}

	.header {
		gap: 10px;
		justify-content: space-evenly;
	}

	.main {
		padding: 0 20px;
	}

	.title {
		font-size: 30px;
		line-height: 30px;
	}

	.about {
		flex-direction: column;
	}
		.about .avatar {
		    border-radius: 40px;
			height: 250px;
		}
		.about .texts {
			margin: 20px 0 0 0;
		}

	.small_text {
		margin: 15px 0 0 0;
		font-size: 18px;
	}

	.project {
		max-width: 1000px;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}
		.project .links {
			justify-content: center;
		}

	.artwork {
		max-width: 1000px;
		width: 100%;
	}

	.link {
		padding: 8px 12px;
	}

}