:root {
  --accent-color: #2196f3;
  --headers-color: #212121;
  --text-color: #757575;
  --background-color: #2f303a;
  --background-our-team-color: #f5f4fa;
  --info-footer-color: rgba(255, 255, 255, 0.6);
  --color-white: #fff;
  --color-black: #000;
  --portfolio-button-color: #f5f4fa;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  font-family: 'Roboto', sans-serif;
}
/* ЯКИЙ ОСНОВНИЙ КОЛІР? */
/* Шапка */
.header .logo,
.footer .logo {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.03em;
}
.accent {
  color: var(--accent-color);
}
.studio-black {
  color: var(--color-black);
}
.site-nav a {
  color: var(--headers-color);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.site-nav a:hover,
.site-nav a:focus {
  color: var(--accent-color);
}
.header .info a {
  color: var(--text-color);
}
.info a:hover,
.info a:focus {
  color: var(--accent-color);
}
/* Банер */
.banner,
.footer {
  background-color: var(--background-color);
}
.banner .title {
  color: var(--color-white);
  font-weight: 900;
  font-size: 44px;
  line-height: 136%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.banner .button {
  color: var(--color-white);
  background-color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  line-height: 187%;
  letter-spacing: 0.06em;
  text-align: center;
}
/* Заголовки і тексти */
h3 {
  color: var(--headers-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
p {
  color: var(--text-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  letter-spacing: 0.03em;
}
.what-we-do .title,
.our-team .title {
  color: var(--headers-color);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.03em;
  text-align: center;
}
.our-team {
  background-color: var(--background-our-team-color);
}
.our-team h3 {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-align: center;
}
.our-team p {
  font-size: 16px;
  letter-spacing: 0.03em;
  text-align: center;
}
/* ЯК ПО ЦЕНТРУ КАРТИНКИ? */
/* Футер */
.studio-white {
  color: var(--color-white);
}
.address {
  color: var(--color-white);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  letter-spacing: 0.03em;
}
.footer-info a {
  color: var(--info-footer-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  letter-spacing: 0.03em;
}
/* сторінка портфоліо */
.cards h2 {
  color: var(--headers-color);
  font-weight: 700;
  font-size: 18px;
  line-height: 200%;
  letter-spacing: 0.06em;
}
.cards p {
  font-weight: 400;
  font-size: 16px;
  line-height: 187%;
  letter-spacing: 0.03em;
}
.main .button {
  background-color: var(--portfolio-button-color);
  color: var(--headers-color);
  border: 1px solid var(--portfolio-button-color);
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  line-height: 162%;
  letter-spacing: 0.03em;
  text-align: center;
}
.main .button:hover,
.main .button:focus {
  background-color: var(--accent-color);
  color: var(--color-white);
  cursor: pointer;
}