/* Variables */

:root {
  --color-cream: #FAF3EA;
  --color-cream-light: #FAF5EE;

  --color-gray-dark: #2D2D2D;
  --color-gray-medium: #5F5F5F;
  --color-gray-light: #949594;

  --color-shadow: rgba(197, 197, 197, .5);
  --box-shadow: 0 0 3px 1px var(--color-shadow);

  --grid-width: 960px;
  --grid-width-small: 720px;
}

/* Base */

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  background-color: var(--color-cream);
  color: var(--color-gray-dark);
}

main {
  flex: 1 0 auto;
  background-color: var(--color-cream);
}

a {
  color: var(--color-gray-dark);
}

p {
  line-height: 24px;
  margin-bottom: 20px;
}

.grid {
  max-width: var(--grid-width);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;

  @media only screen and (max-device-width: 375px) {
    padding-left: 30px;
    padding-right: 30px;
  }
}

h1 {
  font-size: 24px;
  font-weight: 700;
}

.estimate-in-words {
  font-size: 14px;
  font-style: italic;
  color: var(--color-gray-medium);
  margin: 0;
}

main {
  padding-top: 60px;

  @media only screen and (max-device-width: 736px) {
    padding-top: 40px;
  }

  @media only screen and (max-device-width: 375px) {
    padding-top: 30px;
  }
}