/* css file of the portfolio site */

/* html elements */

body {
	background: linear-gradient(to bottom right,#031327, #2d4d0b);

}

header {
	background: #1a5863;
	width: 100%;
	border-bottom: #13554d 2px solid;
    position: fixed;
	width: 100%;
	top:0;
	margin: 0;
	z-index: 1000;
}

li {
	list-style: none;
	margin: 1%;
}

/* Labels, titles */

.top-label, .top-label:hover {
	background-color: #07490f;
	color: white;
	border-radius: 5px;
	text-decoration: none;
}
.link-label, .link-label:hover {
	background-color: #123679;
	color: white;
	border-radius: 5px;
	text-decoration: none;
}
.stack-label {
	background-color: #e1bf72;
	color: #0e3463;
	border-radius: 5px;
	text-decoration: none;
}
.date-label {
	background-color: transparent;
	color: white;
	border-radius: 5px;
}
.long-label {
	width: 1120px;
	
}

/* Stack icons, brands */

.devicon {
	color: #7cb1bb;
	font-size: 32px;
}
.vba {
	cursor: default;
}

/* Portfolio images */

.portfolio-img {
	background-color: #90c1bb;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.portfolio-img[img-url="djauth"] {
	background-image: url('img\\projects\\djauth.png');
	cursor: pointer;
}

.portfolio-img[img-url="szaktan"] {
	background-image: url('img\\projects\\szaktan.png');
	cursor: pointer;
}

.portfolio-img[img-url="tutorials"] {
	background-image: url('img\\projects\\tutorials.png');
	cursor: pointer;
}

.portfolio-img[img-url="imageanalysis"] {
	background-image: url('img\\projects\\imageanalysis.png');
}

.portfolio-img[img-url="soil"] {
	background-color: #90c1bb;
	background-image: url('img\\projects\\soil.png');
}

.portfolio-img[img-url="study"] {
	background-image: url('img\\projects\\study.png');
	cursor: pointer;
}

/* Text blocks */

.summary {
	color: #adb9c3;
	font-size: 16px;
}

.circle-profile {
    width: 160px;
    height: 160px;
    background-color: #7cb1bb;
	/* background-image: url('img\\default.png'); */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid transparent;
    border-radius: 50%;
}

#intro {
	margin-top: 6%;
	padding: 1%;
}

.intro-item {
	width: 1080px;
	height: 300px;
	border: 1px solid #90c1bb;
}

.portfolio-item {
	width: 360px;
	height: 360px;
	background: #071531;
	border: 1px solid #040a3b;
	border-radius: 12px;
}

.intro-card-item {
	width: 1080px;
	height: 360px;
	/* border: 1px solid #90c1bb; */
}

.recent-card-item {
	width: 1080px;
	height: 320px;
	/* border: 1px solid #90c1bb; */
}

/* Smaller screens */

@media screen and (max-width: 1200px) { /* xl - extra large */
	#intro {
		margin-top: 8%;
	}
	.intro-item {
		width: 820px;
		height: 380px;
	}
	.inner-elem {
		border-bottom: 1px solid #90c1bb;
	}
	.intro-card-item {
		width: 360px;
		height: 1020px;
	}
	.recent-card-item {
		width: 360px;
		height: 560px;
	}
	.long-label {
		width: 360px;
	}
	.devicon {
		font-size: 32px;
	}
}

@media screen and (max-width: 992px) { /* lg - large */
	.intro-card-item {
		width: 360px;
		height: 870px;
	}
	.recent-card-item {
		width: 360px;
		height: 520px;
	}
	.long-label {
		width: 360px;
	}
}


@media screen and (max-width: 768px) { /* md - medium */
	#intro {
		margin-top: 10%;
	}
	.intro-item {
		width: 700px;
		height: 400px;
	}
}

@media screen and (max-width: 576px) { /* sm - small */
	#intro {
		margin-top: 18%;
	}

}

@media screen and (max-width: 460px) { /* xs - extra small */
	.title {
		font-size: 24px;
	}
	#intro {
		margin-top: 25%;
	}
	.summary {
		margin: 2% 0% 2% 0%;
		font-size: 16px;
	}
	.portfolio-item {
		width: 300px;
		height: 400px;
		border: none;
	}
	.top-portfolio-item {
		border-top: none;
	}
	.intro-card-item {
		width: 300px;
		height: 950px;
	}
	.recent-card-item {
		width: 300px;
		height: 550px;
	}
	.long-label {
		width: 300px;
	}
}