/*
 COLOR PALETTE
https://coolors.co
 #C19AB7 Lilac
 #9C95DC Tropical Indigo ( light purple)
 #228CDB Tufts Blue
 #0B7189 Cerulean
 #170A1C Dark purple
 #606F91 Glaucus
 #ADD9F4 Uranian Blue
 #A9FFF7 Ice blue
 #7C90DB Vista Blue
 */


/*Global styles
 ----------------------------------------------*/
 html {
	box-sizing: border-box;
 }
 *, *:before, *:after {
	box-sizing: inherit;
 }
 
 body {
  color: #170A1C;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 1.5;
 }
 
img {
width: 300px;
}

a {
  color: #A9FFF7;
}
a:hover {
   text-decoration: none;
}
h1 {
	font-size: 100px;
	line-height:1;
}

h2 {
	font-size: 45px;
}

h1, h2 {
	font-family: 'Poiret One', sans-serif;
	font-weight: 400;
	margin: 0;
}

.content-wrap {
	max-width: 800px;
	width: 85%;
	margin: 0 auto;
	padding: 60px 0;
}
h3 {
	margin-bottom: 0;
}
.item-details h3 + p {
	font-style:italic;
}
.item-details h3 ~ p {
	margin: 0;
}
.divider > section {
	border-bottom: 1px dashed #bebebe;
	padding: 25px 0;
}
.divider > section:last-of-type {
	border-bottom: none;
}


/*Profile 
 ----------------------------------------------*/

header {
	background: #228CDB;
	color: #F7FFF7;
}


/*Work experience
 ----------------------------------------------*/
.work-experience {
 background: #ADD9F4;
}
.work-experience a {
	color: 	#ef7674;
}
.work-experience:hover {
   text-decoration: none;
}

/*Education
 ----------------------------------------------*/
.education {
	background:  #A9FFF7;
}
.education p{
	width: 60%;
}

/*Awards
 ----------------------------------------------*/
 .awards {
	background: #C19AB7;
}

/*Projects
 ----------------------------------------------*/
.projects {
	background: #9C95DC;
}
.project-item {
	overflow: hidden;
}
.project-item h3 {
	margin-top: 0;
}

/*Contact
 ----------------------------------------------*/
footer {
background: #606F91;
color: #F7FFF7;
}
.contact-list {
	list-style-type: none;
	padding: 0;
}
.contact-list a{
	padding: 15px;
	display: inline-block;
}

/* Responsive
--------------------------------------------------*/
@media screen and (min-width:750px){
	header, footer {
      text-align: center;
	}
	.project-item img {
	  float: left;
	  margin-right: 20px;
	}
	
	.job-item {
	 display: grid;
	 grid-template-columns: 1fr 2fr;
	 column-gap: 20px;
	}
	.contact-list {
	  display: flex;
	  justify-content: center;
	}
}

@media screen and (max-width:749px){
	h1 {
	 font-size: 75px;
	 line-height: 0.9;
	 margin-bottom: 20px;
	 }
	h2 {
	  line-height: 1;
	 }
	.contact-list a{
	  padding: 5px;
	}
}