MCS101-008-Portfolio.css

body {
  /* min-width: 940px; */
  font-family: "HelveticaNeue-Light", Arial, sans-serif;
}

h1, h3 { font-size: 24px; }
h2 { font-size: 34px; }

p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
}

#about header,
#about article,
#portfolio header {
  margin: 0 auto;
}

#about,
#portfolio,
#contacts {
  border-top: 1px solid lightgrey;
}

#about header,
#portfolio header {
  padding: 70px 0;
}



/* About Section */

#about {
  padding-bottom: 100px;
}

#about h3 {
  margin-top: 84px;
}

#promo {
}

#clock {
  width: 340px;
}



/* Contacts Section */

#contacts {
  padding: 100px 0;
  text-align: center;
}

#contacts a {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 100%;
}

#facebook {
  background-image: url(../images/portfolio/social-facebook.png);
}

#instagram {
  background-image: url(../images/portfolio/social-instagram.png);
}

#vk {
  background-image: url(../images/portfolio/social-vk.png);
}



/* Desktop Version */

@media all and (min-width: 401px) {

  #about header,
  #about article,
  #portfolio header {
    width: 900px;
  }

  #about h3:first-of-type {
    margin-top: 0;
  }

  #promo {
    float: right;
  }

  #clock {
    float: left;
    margin: 80px 100px 0 -60px;
  }

}


/* Mobile Version */

@media all and (max-width: 400px) {

  #about header,
  #about article,
  #portfolio header {
    width: 360px;
  }

  #promo {
    width: 380px;
  }

  #clock {
    margin: 80px auto 0;
  }

}