/*Mobile First*/
@font-face {
	font-family: 'acme';
	src: url('fonts/Acme-Regular-webfont.eot');
	src: url('fonts/Acme-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('fonts/Acme-Regular-webfont.woff') format('woff'),
	url('fonts/Acme-Regular-webfont.ttf') format('truetype'),
	url("fonts/Acme-Regular-webfont.svg#acmeregular") format('svg');
	font-weight: normal;
	font-style: normal;
}
html{
	padding: 0;
	margin: 0;
	background-image: url("../img/background.jpg");
}
body{
	margin: 5%;
	font-family: 'acme';
	display: flex;
	flex-direction: column;
	color: black;
	background-color: white;
	word-wrap: break-word;
	box-sizing: border-box;
	text-align:center;
	box-shadow: 6px -6px 8px black;
}
#identity_mobile, #identity_desktop{
	font-size: 45px;
}
h2, h3{
	font-size: 20px;
}
#identity_desktop{
	display: none;
}
#identity_mobile h1 span, #identity_desktop h1 span, .container i{
	color: #4FC3F7;
}
#identity_mobile h2 span, #identity_desktop h2 span{
	text-decoration: underline #4FC3F7;
}
aside{
	background-color: #212121;
	color: white;
	width: 100%;
}
.padding10{
	padding: 10%;
}
.padding20{
	padding: 20px;
}
aside img{
	box-sizing: border-box;
	object-fit: scale-down;
	max-width: 100%;
}
aside h3{
	background-color: white;
	color: #212121;
	font-size: 25px;
	padding: 15px;
}
h3 i{
	font-size: 32px;
	margin: 0 10px 0 10px;
}
address{
	padding-top: 36px;
}
#about p{
	text-align: justify;
}
p{
	padding-bottom: 18px;
	font-size: 18px;
}
#hobbies ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
#recommends li{
	display: flex;
	padding-bottom: 18px;
	justify-content: center;
}
#recommends br{
	margin-bottom: 4%;
}
#hobbies i{
	font-size: 30px;
	padding-top: 10px;

}
#hobbies li{
	width: 50px;
	height: 50px;
	border: 1px solid white;
	border-radius: 100%;
	overflow: hidden;
}
.container{
	width: 100%;
}
.container h3{
	font-size: 28px;
	font-weight: bold;
	padding-top: 5%;
}
hr{
	border-color: #4FC3F7;
	width: 95%;
	margin: 16px 0 35px 0;
}
strong{
	font-weight: bold;
	font-size: 15px;
}
td span{
	text-decoration: underline;
}
td:first-child{
	display: none;
}
tr{
	display: flex;
	flex-direction: column;
	padding: 0 3% 3% 3%;
}

/*Mobile Landscape and Tablet Portrait*/
@media screen and (min-width: 576px){
	#recommends ul{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 2%;
	}
	.container{
		text-align: left;
	}
	tr{
		flex-direction: row;
	}
	.fa-circle{
		font-size: 10px;
	}
	td:first-child{
		display: flex;
		margin: 3px 10px 0 0;
	}
	td:nth-child(2){
		flex: 0 0 30%;
	}
	td:last-child{
		flex: 0 0 65%;
	}
	td span{
		text-decoration: none;
	}
}

/*Tablet Landscape*/
@media screen and (min-width: 768px){
	body{
		margin: 10%;
	}
	#recommends ul{
		padding-right: 10%;
	}
}

/*Computer screen*/
@media screen and (min-width: 992px){
	body{
		flex-direction: row;
		margin: 5%;
	}
	address{
		text-align:left !important;
		padding: 11%;
	}
	#identity_mobile{
		display: none;
	}
	#identity_desktop{
		display: flex;
		flex-direction: column;
		padding: 20% 0 15% 0;
		font-size: 55px;
		padding: 124px 0 100px 0;
	}
	#hobbies{
		margin-top:auto;
	}
	#recommends ul{
		padding-right: 15%;
	}
	aside{
		display: flex;
		flex-direction: column;
		flex: 0 0 30%;
		justify-content: space-between;
	}
	.container{
		flex: 0 0 70%;
		padding: 0 3% 0 5%;
		box-sizing: border-box;
	}
	h2{
		font-size: 25px;
	}
	table strong{
		font-size: 20px;
	}
}

/*Large computer screen*/
@media(min-width: 1200px){
	body{
		width: 1190px;
		height: 1685px;
		margin: auto;
	}
}