body{
	background: #FDFCFA;
	font-family: "Inter", serif;
    font-optical-sizing: auto;
    transition: 0.6s;
}
.wrapper{
	width: 700px;
	margin: auto;
}
.main-content{
	background: #fff;
	padding: 20px 40px;
	border: 1px solid #F3EFEE;
	border-radius: 20px;
	width: 350px;
	float: left;
	margin-top: 10px;
}
.image{
	text-align: left;
}
.image img{
	max-width: 100px;
	border-radius: 100px;
}
.content{
	
}
.content p{
	color: #777777;
	font-size: 16px;
	line-height: 26px;
}
.navigation{
	float: right;
	width: 250px;
}
.nav-element{
	margin: 20px 0 40px 0;
	text-align: left;
}
.nav-element a{
	background: #fff;
	border: 1px solid #F3EFEE;
	border-radius: 20px;
	padding: 10px 20px;
	font-size: 16px;
	text-decoration: none;
	color: #110E47;
    transition: 0.6s;
}
.nav-element a:hover{
	background: #D3E8FE;
	border: 1px solid #D3E8FE;
}
#active{
	background: #D3E8FE;
	border: 1px solid #D3E8FE;
}
.clear{
	clear: both;
}
.content p a{
	text-decoration: none;
	color: #110E47;
}
.content p a:hover{
	text-decoration: underline;
}
a .project{
	background: #F8F8F8;
	border-radius: 15px;
	padding: 5px 20px;
	text-decoration: none;
}
a .project:hover{
	background: #F1F1F1;
}
a{
	text-decoration: none;
}

@media screen and (max-width: 750px) {
body{
	 overflow-x: hidden !important;
}
.wrapper{
	max-width: 100% !important;
    overflow-x: hidden !important;
	margin: auto;
}
.main-content{
	float: none;
	width: 80%;
	margin: auto;
}
.navigation{
	float: none;
	width: 100%;
}
.nav-element a{
	width: 100%;
	display: block;
	padding: 10px 0px;
}
.nav-element{
	text-align: center;
	width: 100%;
	margin: 10px 0 10px 0;
}
}