html {
  --pale-blue: #5e91a8;
  --pale-red: #e9554e;
  --pale-gray: #e8e8e8;
  --text: #222222;
  --text-2: #3c3c3c;
  --icon: #666666;
  --container-background: rgba(245, 245, 245, 0.9);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

body {
  background: var(--pale-gray);
  background-image: url(../assets/images/header.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-x: 33%;
}

main {
  margin: 0px 16px;
}

@media only screen and (min-width: 768px) {
  main {
    margin: 0px auto;
    width: 736px;
  }
}

@media only screen and (min-width: 1024px) {
  main {
    width: 988px;
  }
}