index.scss

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300,400italic|Merriweather:400,700,400italic);
@import "normalize.scss";

// Variables

$text-color: #00112C;
$background-color: #FAFAFA;
$primary-color: #07579E;
$light-grey: #7B7F87;

// Basic styles

$text-color: #00112C;
$background-color: #FAFAFA;
$primary-color: #07579E;

html {
  color: $text-color;
  background-color: $background-color;
  border-top: 3px solid $primary-color;
}

.header, .about, .work, .education, .contact, .thanks, .footer {
  margin: auto;
  display: block;
  max-width: 600px;
  min-width: 300px;
}

@media only screen and (max-width: 610px) {
    body {
      width: auto;
      padding-left: 15px;
      padding-right: 15px;
    }
}

h1, h2, h3, h4, h5, h6 {
  font-family: lato;
}

p, label, input, li {
  font-family: merriweather;
}

a {
 font-family: merriweather;
 color: $primary-color;
 text-decoration: none;
}

input, textarea {
  display: block;
}

// header

.header {
  padding-top: 30px;
}

.header--image {
  display: inline-block;
  border-radius: 50%;
  margin-left: 20px;
  margin-right: 20px;
}

.header--text {
  display: inline-block;
  float:left;
}

// contact

.text-input {
  margin-top: 7px;
  margin-bottom: 7px;
  height: 30px;
  width: 70%;
}

.text-input--tall {
  @extend .text-input;
  height: 150px;
}

.button {
  color: $background-color;
  background-color: $primary-color;
  border-radius: 3px;
  border: 1px solid $primary-color;
  height: 2.2em;
  width: 40%;
  margin-bottom: 45px;
}

// footer

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid $light-grey;
  margin: 1em 0;
  padding: 0;
}

.footer-list {
  padding-left: 0px;
}

.footer-item {
  color: $light-grey;
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  list-style-type: none;
  vertical-align: middle;
}