/*indexhtml стили */
:root {
  --primary-text-color: #757575;
  --title-text-color: #212121;
  --accent-color: #2196f3;
  --primary-dark-color: #000000;
  --primary-lite-color: #ffffff;
  --primary-adress-color: rgba(255, 255, 255, 0.6);
  --background-team-color: #f5f4fa;
  --background-hero-color: #2f303a;
}
/*
color studiobackground: #000000;

color text: #212121;
tel: #757575;
#F5F4FA; - background наша команда
footer tel email color: rgba(255, 255, 255, 0.6);

*/

body {
  background-color: var(--primary-lite-color);
  color: var(--primary-text-color);

  font-family: Roboto, sans-serif;
  letter-spacing: 0.03em;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
/*Text*/
.text {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.87;
  letter-spacing: 0.03em;
  color: var(--primary-text-color);
}

.page-header {
  background-color: var(--primary-lite-color);
}
/*Logo*/
.logo {
  color: var(--primary-dark-color);
  font-family: Raleway, sans-serif;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.03em;

  /* identical to box height */
}
.logo:hover {
  color: var(--primary-dark-color);
}

.logo-accent {
  color: var(--accent-color);
}

/*Adress*/
.contacts .link {
  color: var(--primary-text-color);

  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
}
.link:hover,
.link:focus {
  color: var(--accent-color);
}
/*Site nav*/

.site-nav .link {
  color: var(--title-text-color);
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
}
.link-current,
.site-nav .link:hover,
.site-nav .link:focus {
  color: var(--accent-color);
}
.site-nav-list .link-current,
.logo-accent {
  color: var(--accent-color);
}
/*hero*/

.hero {
  background-color: var(--background-hero-color);
}
.hero-title {
  color: var(--primary-lite-color);
  background-color: var(--background-hero-color);

  font-weight: 900;
  font-size: 44px;
  line-height: 1.36;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-button {
  color: var(--primary-lite-color);
  background-color: var(--accent-color);

  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.06em;

  display: flex;
  align-items: center;
  text-align: center;
}

/*section*/
.section-title {
  color: var(--title-text-color);

  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

/*advanteges*/
.section .title {
  color: var(--title-text-color);
}

/*Team*/

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

.name {
  color: var(--title-text-color);

  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

/*Footer*/
.footer-page {
  background-color: var(--background-hero-color);
  letter-spacing: 0.03em;
  font-size: 14px;
  line-height: 1.71;
}

.footer-logo {
  color: var(--primary-lite-color);

  font-family: Raleway;
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.footer-logo:hover {
  color: var(--primary-lite-color);
}

.logo-accent {
  color: var(--accent-color);
}

.footer-adress .footer-map {
  color: var(--primary-lite-color);
  font-style: normal;
}
.footer-link {
  color: var(--primary-adress-color);
  font-style: normal;
}
/*portfolio стили */

.portfolio-button {
  color: var(--title-text-color);
  background-color: var(--background-team-color);

  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.03em;

  text-align: center;
}

.portfolio-button:hover,
.portfolio-button:focus {
  color: var(--primary-lite-color);
  background-color: var(--accent-color);
}

/*.logo-accent */