*,body {
	padding: 0px;
	margin: 0px;
	color:#000;
	font-family: Verdana, Arial;
}

body {
	position:relative;
	display:block;
	width:100%;
	height:100vh;
	background: #DDE;
	color:#444;
}

h1 { font-size: 26px !important; }

#works {
	display:block;
	width:100%;
	padding: 0px calc((100% - 800px)/2);
}

#works2 {
	display:none;
	width:100%;
	padding: 0px calc((100% - 800px)/2);
}

.row {
	display:block;
	width:100%;
	height:auto;
	clear:both;
	margin-top:5px !important;
	margin-bottom:5px !important;
	overflow-y:none;
	box-sizing: border-box;
}

.t_center {
	text-align:center;
}

.t_left {
	text-align:left;
}

.flex_row {
	display:flex;
	flex-direction: row;
}

.flex_col {
	display:flex;
	flex-direction: column;
	width:45%;
}

.spaced_bet {
	justify-content: spaced-between;
}

.project_item {
	display:inline-flex;
	width:100%;
	height: auto;
	flex-direction: row;
	justify-content: flex-start;
	margin: 20px 10px;
	background-color:#fff;
	padding: 20px;
	border-radius: 10px;
	text-align:left;
	overflow:hidden;
	object-fit: cover;
}


.project_item .flex_col:first-child {
	width:60%
}

.project_item .flex_col:last-child {
	width:40%
}

.project_build {
	display:block;
	width: 100%;
	margin-bottom:20px;
	background-color:#fff;
	text-align:left;
	box-sizing: border-box;
}

.project_build_item {
	display:inline-block;
	width: auto;
	font: 11px normal Arial,Verdana;
	padding: 4px 8px;
	background-color:#DDD;
	border-radius: 4px;
	text-align:center;
	margin-right: 5px;
	margin-top: 5px;
	cursor: pointer;
	transition: 0.4s;
}

.project_build_item:hover {
	background-color: #000;
	color:#FFF;
	border-radius: 0px;
}

.project_img {
	display:block;
	width: 90%;
	height: auto;
	background: url(attr('src')) #FFF no-repeat center;
	/*background-size: auto 100%;*/
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	border: 1px solid #888;
	margin:10px 20px;
}

.project_detail {
	display:flex;
	flex-direction:column;
	font: 12px normal Arial,Verdana;
	width: 100%;
	margin-bottom:10px;
}

.project_detail p{
	text-align:justify;
}

.project_detail b {
	margin-bottom: 5px !important;
	border-bottom: 1px solid #888;
}

.project_title {
	font: 15px normal Arial,Verdana;
	font-weight:600;
	margin-bottom: 3px;
	border-bottom: 1px solid #888;
	margin-top: 10px;
}

.project_duration {
	font: 11px normal Arial,Verdana;
	font-weight:600;
}

.project_company {
	font: 11px normal Arial,Verdana;
	font-weight:600;
	margin-bottom:20px;
}

.project_company2 {
	font: 11px normal Arial,Verdana;
	font-weight:600;
	margin-top:20px;
	border-bottom: 1px solid #888;
	margin-bottom: 5px;
}

.c_center { 
	margin: 10px auto;
}

h1 {
	padding: 10px 20px;
	font: bolder 2rem Verdana,Arial;
	text-align:center;
}

.hidden { display: none; }

#footer p,#contact p, #programming p{ 
	font: normal 1rem Verdana,Arial;
	margin: 10px auto !important; 
	margin-bottom: 25px !important;
}

#avatar,#footer,#contact {
	padding: 30px 10px;
}

.avatar {
	border: 3px solid #AAA;
	border-radius: 150px;
	margin-right:10px;
}

.spawn_works { 
	display:block;
	width: 200px;
	text-align:center;
	padding: 10px 20px;
	border-radius: 15px;
	border: 1px solid #FFF;
	background-color: #000;
	color:#FFF;
	font: normal 1rem Verdana,Arial;
	margin: 25px auto;
	margin-bottom: 40px;
	cursor:pointer;
	transition: 0.5s;
}

.spawn_works span { 
	color:#FFF;
}

.spawn_works:hover { 
	background-color: #888;
	color:#000;
	border:1px solid #000;
}

.spawn_works:hover span { 
	background-color: #888;
	color:#000;
}

#contact { background-color:#FFF; }
.bg_white { background-color:#FFF; }
.black_box { background-color:#000; color:#FFF; padding: 5px; cursor: pointer; text-decoration:none; transition: 0.3s; }
.black_box:hover { background-color: #555; border-radius: 30px; }

#footer p,#contact p, #programming p, .w800 { width: 800px; border: 0px solid #000; }
.w500 { width: 500px; border: 0px solid #000; }
.pad5 { padding: 5px; padding-left:0px; }
.spb { justify-content: space-between; }
.f32 { font-size: 30px; }

@media screen and (min-width: 300px) and (max-width: 1024px){
	body,* {
		box-sizing: border-box !important;
		overflow: hidden;
		overflow-y:auto;
		scrollbar-width:thin;
	}
	
	#contact p,#programming p, .w800, .w500 , 
	.project_item, .flex_col {
		width:90%;
		text-align:justify;
	}

	#footer p {
		width:90%;
	}
	
	#avatar .flex_col {
		text-align: center; 
		padding: 0px; 
	}
	
	.project_item .flex_col:first-child {
		width:100%;
		margin-bottom: 20px;
	}

	.project_item .flex_col:last-child {
		width:100%
	}	

	.project_item, .flex_row {
		flex-direction: column;
		height: auto;
		padding: 20px 20px;
	}	

	.yellow_cl .flex_row {
		flex-direction: row;
		padding: 5px;
	}
	
	.avatar {
		width: 220px !important;
		margin: 10px auto;
		padding: 0px;
	}	
	
	.project_img {
		display:block;
		width: 100%;
		height: auto;
		margin: 20px auto;
		margin-top: 20px;
	}

	.project_item .flex_col {
		margin: 0px auto;
	}	

	.project_title {
		margin-top: 0px;
	}

}