:root {
  --main-text-color: #212121;
  --accent-color: #2196f3;
  --main-bg-color: #ffffff;
  --secondary-text-color: #757575;
  --main-light-color: #f5f4fa;
  --secondary-light-color: #eeeeee;
  --tertiary-light-color: #ececec;
  --tertiary-text-color: #2f303a;
}

body {
  font-family: Roboto, Helvetica;
  color: var(--main-text-color);
}

.logo {
  text-decoration: none;
  color: var(--accent-color);
  font-family: 'Raleway';
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.78px;
}

.logo-span {
  color: #000000;
}

.nav-link {
  list-style: none;
}

.nav-link a {
  text-decoration: none;
  color: inherit;
}

.nav-link li {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28px;
}

.nav-link li:hover,
.nav-link li:focus {
  color: var(--accent-color);
}

.contact-list {
  list-style: none;
}

.contact-list a {
  text-decoration: none;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28px;
}

.contact-list a:hover,
.contact-list a:focus {
  color: var(--accent-color);
}

.hero {
  background-color: #2f303a;
}

.hero-title {
  color: var(--main-bg-color);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 2.64px;
  line-height: 1.36;
  text-transform: uppercase;
  text-align: center;
}

.hero-btn {
  background-color: var(--accent-color);
  color: var(--main-bg-color);

  align-items: center;

  font-size: 16px;
  font-weight: 700;

  letter-spacing: 0.96px;
  line-height: 1.87;

  text-align: center;

  cursor: pointer;
}

.advantages-list {
  list-style: none;
}
.advantages-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.42px;
}
.advantages-text {
  color: var(--secondary-text-color);
  font-size: 14px;
  letter-spacing: 0.42px;
}

.features-list {
  list-style: none;
}

.team-section {
  background-color: var(--main-light-color);
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-align: center;
}

.team-list {
  list-style: none;
}

.team-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.48px;
}
.team-position {
  color: var(--secondary-text-color);
  font-size: 16px;
 
  letter-spacing: 0.48px;
}

.button-list {
  list-style: none;
}

.button-list button {
  background-color: var(--main-light-color);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.48px;
  line-height: 1.62;
  cursor: pointer;
}

.portfolio-list {
  list-style: none;
}

.portfolio-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.08px;
  line-height: 2;
}
.portfolio-text {
  font-size: 16px;
    letter-spacing: 0.48px;
  line-height: 1.88;
}

.footer {
  background-color: var(--tertiary-text-color);
}

.footer-logo-span {
  color: var(--main-bg-color);
}

.address {
  color: var(--main-bg-color);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.42px;
  line-height: 1.71;
  font-style: normal;
}

.footer-contact-list {
  list-style: none;
}

.footer-contact-list a {
  text-decoration: none;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.42px;
  line-height: 1.71;
}

.footer-contact-list a:hover,
.footer-contact-list a:focus,
.address:hover,
.address:focus {
  color: var(--accent-color);
}