/* Global styles
-----------------------------*/

/*The addition of the box-sizing property to the html selector is referred to as The Box Model Fix.*/
html {
  box-sizing: border-box;
}

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

body {
  color: #343434; /*Property "color" changes color of the font inside the body tag.*/
  margin: 0; /*On default the body element has a specific margin that is visible on the edge of the screen. It can be removed by setting margin to 0*/
  padding: 0; /*It is a common practice to set padding to 0 just as the margin.*/
  font-family: 'Lato', sans-serif; /*Font that has been acquired through Google Fonts.*/
  font-size: 18px;
  line-height: 1.5;
}

img {
  width: 300px;
}

a {
  color: #FFE66D;
}

a:hover { /*The :hover selector is used to select elements when you mouse over them. The :hover is an example of a pseudo-class selector.*/
  text-decoration: none; /*The text-decoration shorthand CSS property sets the appearance of decorative lines on text.*/
}

h1 { /*h1 is an example of a type selector.*/
  font-size: 75px;
  line-height: 1;
  margin: 0 0 10px 0;
}

h2 {
  font-size: 32px;
  margin: 0;
}

h1, h2 {
  font-family: 'Merriweather', serif; /*Font that has been acquired through Google Fonts.*/
  font-weight: 300;
}

.content-wrap { /*This class allows to center the text content of each section with maintaining the background color of the page through the whole width*/
  max-width: 800px;
  width: 85%;
  margin: 0 auto; /*This specific setting of the margin property centers the content*/
  padding: 60px 0;
}

h3 {
  margin-bottom: 0;
}

/*This combinator will select the first p after the h3. The us of the + sign is an example of a adjacent sibling selector.*/
.item-details h3 + p {
  font-style: italic;
}

/*This combinator will select all p after the h3. The us of the ~ sign is an example of a general sibling selector*/
.item-details h3 ~ p {
  margin: 0;
}

/*This is an example of parent-child selector.*/
.divider > section {
  border-bottom: 1px dashed #343434;
  padding: 25px 0;
}

.divider > section:last-of-type { /*In this case we use the pseudo-class last-of-type to select the last child selector of type section of the .divider parent.*/
  border-bottom: none;
}

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

header {
  background: #62B6CB; /*Property "background" changes the background color of the header tag.*/
  color: #F7FFF7;
}

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

.page-info {
  background: #85C7DE;
}

/* Projects & Programs
-----------------------------*/

.projects {
  background: #CAE9FF;
}

.projects a {
  color: #2F3061;
}

.projects .btn {
  color: #F7FFF7;
  background: #2F3061;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block; /*Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.*/
}

.projects .btn:hover {
  background: rgba(47, 48, 97, 80%);
}

.project-item {
  overflow: hidden;
}

.project-item h3 {
  margin-top: 0;
}

/* Work Experience
-----------------------------*/

.work-experience {
  background: #5FA8D3;
}

/* Education
-----------------------------*/

.education {
  background-image: url(../images/annie-spratt-unsplash.jpg);
  background-size: cover;
  background-position: top right;
  padding-bottom: 100px;
}

.education p {
  width: 60%;
}

/* Technologies
-----------------------------*/

.technologies {
  background: #CAE9FF;
}

.technologies-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  text-align: center;
}

.technologies-container > div {

}

.tech-item {
}

.tech-item img {
  width: 200px;
  margin: 0 auto;
}

/* .box {
  background: black;
  width: 50px;
  height: 50px;
  margin: 0 auto;
} */


/* Contact Info
-----------------------------*/

footer { /*footer is a type selector*/
  background: #1B4965;
  color: #F7FFF7;
}

.contact-list {
  list-style-type: none; /*changes how the list elements look like.*/
  padding: 0;
}

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

/* Responsive styles
-----------------------------*/

/* Below are declared examples of media queries. Media queries allow us to change styling based on certain requirements like screen size. */

@media screen and (min-width: 750px) {
  header, footer {
    text-align: center;
  }

  .project-item img { /*This is an example of a descendent selector. */
    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;
  }

  .technologies-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }


}