/* Global styles
------------------------------------
*/
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  color: #343434;
  margin: 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

img {
  width: 300px;
}

a {
  color: #FFE66D;
}

a:hover {
  text-decoration: none;
}

h1 {
  font-size: 46px;
  line-height: 1;
  text-align: center;
}

h2 {
  font-size: 26px;
  text-align: center;
}

h1, h2 {
  font-family: Caveat, cursive;
  font-weight: 400;
  margin: 0;
}

.content-wrap {
  max-width: 800px;
  width: 85%;
  margin: 0 auto;
  padding: 20px 0;
}

h3 {
  font-size: 16px;
  margin-bottom: 1px;
}

ul {
  padding-left: 1.25em;
}

.item-details h3 + p {
  font-style: italic;
  font-size: 14px;
  padding: 1px 0;
}

.item-details h3 ~ p {
  margin: 0;
}

.divider-white > section {
  border-bottom: 1px dashed #F7FFF7;
}

.divider-black > section {
  border-bottom: 1px dashed;
}

.divider-white > section:last-of-type {
  border-bottom: none;
}

.divider-black > section:last-of-type {
  border-bottom: none;
}


/* Profile
------------------------------------
*/
header {
  background: #2F3061;
  color: #F7FFF7;
}


/* Projects
------------------------------------
*/
.projects {
  background: #F7FFF7;
}
.projects a {
  color: #2F3061;
  float: right;
}
.projects .btn {
  color: #F7FFF7;
  background: #2F3061;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
}
.projects .btn:hover {
  background: rgba(47, 48, 97, 80%);
}
.project-item {
  overflow: hidden;
}
.project-item h3 {
  margin-top: 0;
}


/* Work Experience
------------------------------------
*/
.work-experience {
  background-image: url("../images/peter-gargiulo-cGNCepznaV8-unsplash.jpg");
  background-size: cover;
  background-position: top left;
  padding-bottom: 16px;
  color: #F7FFF7;
}

/* Education
------------------------------------
*/
.education {
  background-image: url("../images/jason-dent-S53ekmu8KkE-unsplash.jpg");
  background-size: cover;
  background-position: top right;
  padding-bottom: 16px;
}

.education p {
  width: 60%;
}

/* Skills and Achievements
------------------------------------
*/
.skills {
  background-image: url("../images/josephine-bredehoft-KsAo8ouBn8A-unsplash.jpg");
  background-size: cover;
  background-position: top center;
  padding-bottom: 16px;
  color: #F7FFF7;
}

.skills li {
  width: 65%;
}

/* Interests
------------------------------------
*/
.interests {
  background-image: url("../images/alexander-grey-eMP4sYPJ9x0-unsplash.jpg");
  background-size: cover;
  background-position: top left;
  padding-bottom: 16px;
}


/* Contact Info
------------------------------------
*/
footer {
  background: #343434;
  color: #F7FFF7;
}

.contact-list {
  list-style-type: none;
  padding: 0;
}

.contact-list a {
  padding: 15px;
  display: inline-block;
}


/* Responsive
------------------------------------
*/
@media screen and (min-width:768px){
  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;
  }

  .work-experience {
    background-image: url("../images/emile-perron-unsplash-2k.jpg");
    background-size: cover;
    background-position: top left;
  }

  .education {
    background-image: url("../images/joanna-kosinska-unsplash.jpg");
    background-size: cover;
    background-position: top center;
  }

  .skills {
    background-image: url("../images/kelly-sikkema-unsplash-1k.jpg");
    background-size: cover;
    background-position: top right;
    color: black;
  }

  .interests {
    background-image: url("../images/jess-bailey-unsplash.jpg");
  }
}

@media screen and (min-width:1024px){
  .work-experience {
    background-image: url("../images/emile-perron-unsplash-2k.jpg");
    background-size: cover;
    background-position: top left;
  }
}

@media screen and (min-width:1440px){
  .work-experience {
    background-image: url("../images/emile-perron-unsplash-4k.jpg");
    background-size: cover;
    background-position: left;
  }

  .skills {
    color: black;
  } 
}