:root {
  --font: "Roboto", sans-serif;
  --font-display: "Montserrat", sans-serif;
  --font-size: 16px;
  --text: #484e4d;
  --heading: #1f4a47;
  --bg: #fff;
  --teal: #00a69c;
  --teal-deep: #00a79d;
  --lime: #a4d03d;
  --lime-hover: #98c42f;
  --gray: #ebecef;
  --line: #d8dfe8;
  --container: 1170px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.42857;
  color: var(--text);
  background: var(--bg);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 600;
}

p {
  margin: 0 0 10px;
}

.container {
  width: min(var(--container), calc(100% - 30px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 30;
  background: #111;
  color: #fff;
  padding: 8px 12px;
}