:root {
  --main-color: #212121;
  --accient-color: #2196f3;
  --text-color: #757575;
  --logo-color: #000;
  --title-color: #fff;
  --footer-color: rgba(255, 255, 255, 0.6);
  --background-color:#2F303A;
  --team-background-color: #f5f4fa;
}
body {  
  font-family: "Roboto", sans-serif;
}
.header {
    background-color: var(--title-color);
}
.header-logo {
  color: var(--logo-color);
  font-family: "Raleway", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: 0.78px;
}
.header-span {
  color: var(--accient-color);
}
.header-link {
  color: var(--main-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.28px;
}
.header-contact {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.28px;
}
.hero {
  background-color: var(--background-color);
}
.hero-title {
  flex-shrink: 0;
  color: var(--title-color);
  text-align: center;
  font-size: 44px;
  font-style: normal;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 2.64px;
  text-transform: uppercase;
}
.hero-button {
  border: none;
  border-radius: 4px;
  background-color: #2196f3;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  color: var(--title-color);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.96px;
}
.advantages {
    background-color: var(--title-color);
}

.advantages-subtitle {
  color: var(--main-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}
.advantages-text {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.42px;
}
.work {
    background-color: var(--title-color);
}
.work-title {
  color: var(--main-color);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 1.08px;
}
.team {
    background-color: var(--team-background-color);
}
.team-title {
  color: var(--main-color);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 1.08px;
}
.team-name {
  color: var(--main-color);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.48px;
}
.team-role {
  color: var(--text-color);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.48px;
}
.footer {
    background-color: var(--background-color);
}
.footer-logo {
  color: var(--title-color);
  font-family: "Raleway", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: 0.78px;
}
.footer-span {
  color: var(--accient-color);
}
.footer-address {
  color: var(--footer-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.42px;
}
.footer-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.42px;
}
.filter-btn {
  border: none;
  border-radius: 4px;
  background: #f5f4fa;
  color: var(--main-color);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.48px;
}
.portfolio-name {
  color: var(--main-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 1.08px;
}
.portfolio-type {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
}