@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');


html {
 background: url("background.jpg") no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 font-family: 'Share Tech', sans-serif;
 overflow: auto;
}

header {
	position: relative;
	text-align: center;
	font-size: 25px;
}

header a {
	text-decoration: none;
	color: black;
}

footer {
	text-align: center;
	font-size: 15px;
	margin-bottom: 5px;
}

footer a {
	text-decoration: none;
	color: inherit;
}

.main {
	display: flex;
	justify-content: flex-end;
}

.personal {
	width: 100%;
	display: flex;
}

.contact {
	width: 25%;
	position: fixed;
	top: 0;
	left: 0;
}

.information {
	position: absolute;
	top: 20%;
	left: 30%;
	right: 30%;
}

.information h2 {
	border-bottom: 1px solid gray;
}

.profile_photo {
	width: 25%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
}
#education img {
	width: 20px;
}

#experience img {
	width: 20px;
}

#programming img {
	width: 15px;
}

#programming ul {
	columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
}

#programming li {
	list-style-type: none;
}

#languages img {
	width: 15px;
}

#languages ul {
	columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
}

#languages li {
	list-style-type: none;
}

.header-link {
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: black;
	padding: 14px 10px;
	border-bottom: 2px solid transparent;
	transition-duration: 0.6s;
}

.header-link:hover {
	border-bottom: 2px solid #ff5805;
}

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

#experience b {
	text-decoration: underline;
}

.contact h2 {
	position: relative;
	text-align: center;
}

.contact li {
	padding: 5px 5px;
	list-style-type: none;
}

.contact a {
	color: black;
	text-decoration: none;
}

.contact img {
	position: relative;
	top: 10px;
	width: 40px;
}

@media only screen and (max-width: 1000px){
	header {
		position: static;
	}

	.main {
		flex-direction: column;
	}

	.contact {
		width: 50%;
		position: static;
	}

	.contact a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		white-space: nowrap;
	}

	.information {
		position: static;
	}

	.profile_photo {
		width: 50%;
		position: static;
	}

	.profile_photo img {
		width: 100%;
	}
}