@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500);html {
  box-sizing: border-box; }

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

body {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("/public/background.jpg");
  background-color: black;
  color: black;
  background-size: cover;
  height: 100%; }
  body .hero, body .main-text, body .skills-text, body .footer {
    font-family: "Roboto", thin, sans-serif;
    color: #ffffff; }
    body .hero h1, body .main-text h1, body .skills-text h1, body .footer h1 {
      font-weight: 100;
      font-size: 28px; }
      body .hero h1 .social, body .main-text h1 .social, body .skills-text h1 .social, body .footer h1 .social {
        display: inline-block;
        float: right;
        background-color: #000; }
        body .hero h1 .social img, body .main-text h1 .social img, body .skills-text h1 .social img, body .footer h1 .social img {
          opacity: 0.3;
          padding-left: 10px; }
          body .hero h1 .social img:hover, body .main-text h1 .social img:hover, body .skills-text h1 .social img:hover, body .footer h1 .social img:hover {
            opacity: 1; }
  body .main-text h1 {
    font-weight: 300;
    font-size: 48px; }
  body .main-text h1.bolder {
    font-weight: 400; }
  body .skills-text {
    color: #7a7a7e; }
    body .skills-text h1 {
      font-weight: 500;
      font-size: 24px; }
    body .skills-text p {
      font-weight: 300;
      font-size: 18px;
      margin: 10px 0; }
      body .skills-text p span {
        font-weight: 500; }
      body .skills-text p a {
        text-decoration: none;
        color: #7a7a7e; }
  body .footer {
    color: #7a7a7e; }
    body .footer p {
      font-weight: 300;
      font-size: 13px; }
      body .footer p span {
        font-weight: 400; }

.container, .footer-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px; }

.row, .row-skills {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 5px; }

.col-xs-12 {
  grid-column: span 12; }

.col-xs-8 {
  grid-column: span 8; }

.row-skills {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 50px; }

.footer-container {
  display: grid;
  grid-template-rows: 1fr auto; }
  .footer-container .footer {
    grid-row-start: 4;
    grid-row-end: 5; }