body{
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
.container {
	width: 90%;
	margin: auto;
}

.icon{
	margin:10px;
	width: 2rem;
}
.icon:hover{
	transform: scale(1.25);
}

p{
	font-family: 'Courier New', Courier, monospace;
	font-size: 1.9rem;
}

img{
	width:40%;
	max-height: 30rem;
	border-radius: 10px;
}

.heading-main{
	font-size: 3.5rem;
}

a{
	color:black;
	text-decoration: none;
	margin-bottom: 10px;
}

a:hover{
	font-weight: bold;
}

.star{
	color: yellow;
	width: 1.5rem;
	margin-top:10px;
}

.links{
	padding:5px;
	border:1px solid black;
	width: 90%;
	font-weight: bold;
	border-radius: 50px;
	text-align: center;
}

.links:hover{
	transform: scale(1.01);
	background-color: #525252;
	color:#fff;
}

/* global */

/* header */

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5rem;
	animation: movedown 1s;
}
header h1{
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-decoration: underline;
	font-style: italic;
}
header ul{
	display: flex;
	list-style: none;
	justify-content: space-between;
}
header ul li{
	margin-right: 10px;
}

/* main */

main{
	display: flex;
	flex-direction: column;
}

/* intro */

.flex{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding: 10px;
	animation: moveleft 1s;
}
.flex > div{
	width:50%;
}
.flex > div > div{
	animation: moveright 4s;
}

/* what i do */

/* proficiency */

.pb-border{
	width: 100%;
	border-radius: 5px;
	background-color: aqua;
	height: 25px;
	animation: moveleft 3s;
}
.pb-fill{
	background-color: greenyellow;
	height: 25px;
	border-radius: 5px;
	animation: moveleft 3s;
}

/* education */

.education{
	display: flex;
	flex-direction: column;
	font-size: 1.75rem;
}

.education > div{
	display: flex;
	align-items: center;
}

.education > div > div {
	margin-left: 100px;
}

.education > div > div > h3{
	font-size: 1.75rem;
	font-style: normal;
}
.education > div > div > h4{
	font-size: 1.50rem;
	font-style: normal;
}
.education > div > div h5{
	font-size: 1rem;
}

.education > div > img{
	width: 200px;
}

#line{
	width: 70%;
	height: 1px;
	background-color: black;
}

/* experience */
.experience{
	display: flex;
	flex-direction: column;
}
.heading{
	color:#fff;
	background-color: rgb(130, 168, 194);
	width: 100%;
	height: 100px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	text-align: center;
	vertical-align: middle;
}
.heading > h3{
	font-size: 1.5rem;
}
.experiences{
	display: flex;
	flex-direction: row;
}
.experiences > div{
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border: 1px solid black;
	border-radius: 20px;
}
.experiences > div img{
	width: 130px;
	margin-top: -40px;
}
.experiences > div h3{
	margin-bottom: 90px;
}
.experiences > div > p{
	margin-top:-50px;
	text-align: center;
	font-size: 1.2rem;
}

/* projects */
.projects{
	margin-top:50px;
}

.projects > div{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding: 10px;
	padding-bottom: 20px;
	height: 100%;
}

.project{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 25%;
	border: 1px solid black;
	margin-right: 20px;
	padding: 0 20px;
	border-radius: 30px;
	height: 25rem;
}

.project > h3{
	font-size: 1.75rem;
}

.project > p{
	font-size: 1.25rem;
	margin-top: 0;
}

/* end */

.end > div{
	margin-left: 10px;
}

.end h3{
	color:grey;
}

/* footer */

footer{
	text-align: center;
	height: 30px;
	background:linear-gradient(grey,black);
	color:#fff;
	padding: 20px;
	align-items: center;
	margin: 0;
	font-size: 1.25rem;
}

footer span{
	color:rgb(199, 186, 69);
	font-size: 1.6rem;
}

@media(max-width:768px){

	.links{
		width: 70%;
	}

	.menu{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.menu > label{
		display: block;
		cursor: pointer;
		background: url("./images/icons/bars-solid.svg") no-repeat left center;
		padding: 15px;
	}

	.menu > input{
		display: none;
	}

	.menu > ul {
		max-height: 0;
		overflow: hidden;
	}

	.menu > input:checked ~ label{
		background-image: url('./images/icons/xmark-solid.svg');
		animation: movedown 1s;
	}

	.menu > input:checked ~ ul{
		max-height: 100%;
	}

	.heading-main{
		font-size: 2.75rem;
	}
	img{
		width: 100%;
	}
	header{
		flex-direction: column;
		margin-bottom: 1rem;
	}
	header ul{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 30px;
		width: 100%;
	}
	header a {
		text-align: center;
		padding:10px;
		border:1px solid grey;
		margin:5px 0px;
		border-radius: 10px;
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 0.5rem;
		font-weight: bold;
		font-size: 1.25rem;
	}
	header a:hover{
		background-color: grey;
		color: white;
	}
	header h1{
		font-size: 2.5rem;
	}
	header,.flex{
		flex-direction: column;
		width: 100%;
	}
	.flex > div{
		width:100%;
		order:2;
	}
	.flex > div > p{
		font-size: 1.7rem;
	}
	#tech > img{
		display: none;
	}
	#prof img{
		display: none;
	}
	.education > h1{
		margin-bottom: 3rem;
	}
	.education > div{
		margin-bottom: 2rem;
	}
	.education > div {
		flex-direction: column;
	}
	.education > div > div {
		width: 100%;
		margin-left: 0;
	}
	.experiences{
		flex-direction: column;
	}
	.experiences > div{
		width: 80%;
		margin:10px auto;
		text-align: center;
	}
	.projects > div{
		flex-direction: column;
	}
	.project{
		width: 100%;
		margin: 10px auto;
		padding: 10px;
		text-align: center;
	}
}

/* animations */

@keyframes movedown{
	0%{
		margin-top:-20px;
	}
	100%{
		margin-top:0px;
	}
}

@keyframes moveleft{
	0%{
		margin-left:-100px;
	}
	100%{
		margin-left: 0;
	}
}

@keyframes moveright{
	0%{
		margin-right: -100px;
	}100%{
		margin-right: 0px;
	}
}

/*Icons made by https://www.flaticon.com/authors/cole-bemis from www.flaticon.com/ */