:root {
  --primary-color: #6D6D6D;
  --primary-color--hover: #343434;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1.3px;
    color: var(--primary-color);
    position: relative;
}
.container{
  max-width: 680px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #575757;
  ;
}
h1{
  font-weight: 400;
}
img{
  max-height: 100%;
  max-width: 100%;
  padding-right: 20px;
}
header{
  height: 300px;
  background-color: #575757;
}
section#main-content{
  padding: 20px 50px;
}
section#main-content > *{
  padding: 15px 10px;
}
a{
  color: var(--primary-color);
  text-decoration: none;
}
a:hover{
  color: var(--primary-color--hover);
}
@media (max-width: 768px){
  header{
    height: 180px;
    text-align: right;
  }
  section#main-content{
    padding: 20px 0;
  }
  img{
    padding-right: 0;
  }
}