@import url("https://use.typekit.net/udj7oaw.css");

:root {
  --container-width: 1100px;
  --background-color: #ffffff;
  --accent-color: #124633; /* green */
  --button-background-color: #007a5c;
  --button-hover-color: #09281d;
  --button-text-color: #ffffff;
  --button-txt-hover-color: #ffffff;
  --form-alt-input-placeholder: #797b7e;
  --form-main-border: #cecece;
  --tab-border-color: #cfcfcf;
  --pros-cons-border: #d9d9d9;
  --link-color: #007a5c;
}

body {
 background:var(--background-color);
 font-family: benton-sans, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, span {
 font-family: benton-sans, sans-serif;
}

a{
  color: var(--accent-color);
  text-decoration: underline;
  -webkit-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
a:hover{
  filter: brightness(150%);
}

/***CONTAINER WIDTH***/
/* .header-block {

} */

.header-block,
.hero .content,
#main > *:not(.hero),
#colophon,
.footer-ad,
.header-ad {
  max-width: var(--container-width);
}

/***Container Padding***/
@media(max-width:1100px) {
  .header-block,
  .hero .content,
  #main > *:not(.hero),
  #colophon {
    padding:0px 20px;
  }

  .footer-nav {
    left:20px;
  }

  .main-navigation,
  #colophon p {
    right:20px;
  }
}