body {
	background-color: #FDF1ED;
	background-image: url("images/background.jpeg");
	color: #8A88C1;
	font-family: 'Tajawal', sans-serif;
	font-size: 18px;
}

h1, h2, h3 {
	font-family: 'Roboto Slab', serif;
} 

h1 {
	color: #7DDBD3;
	font-size: 40px;
	font-weight: bolder;
}

h2{
	color: #FF9C9F;
	font-size: 24px;
	font-weight: normal;
}

a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: #7DDBD3;
	font-weight: 600;
	font-size: 16px;
}

a:hover {
	color: #8A88C1;
}

#pic {
  border-radius: 50%;
  width: 200px;
}

.container{
	width: 700px;
	margin: 40px auto;
}

.box-design{
	background: #FDF1ED;
	padding: 60px;
	margin: 30px;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	text-align: center;
}

.list-inline {
	list-style: none;
	padding-left: 0px;
}

.list-inline li {
	display: inline;
	padding: 10px;
}

.list-inline i {
	font-size: 70px;
}

@media (max-width: 960px) {
	.container {
		width: 700px;
	}
}

@media (max-width: 720px) {
	.container {
		width: 500px;
	}
}
@media (max-width: 540px) {
	.container {
		width: 300px;
	}
}