.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
:root{
  --main-ff: "Roboto", san-serif;
  --logo-ff: "Raleway", san-serif;

  --main-color: #212121;
  --context-color: #757575;

  --dark-acsent: #000000;
  --white-acsent: #FFFFFF;
  --white-border:  #EEEEEE;
  --white-border-icon:#AFB1B8;
  --white-сontext: rgba(255, 255, 255, 0.6);
 
  --white-background: #F5F4FA;
  --dark-background: #2F303A;
  --shadow-color:rgba(0, 0, 0, 0.15);

  --chromatic-usual: #2196F3;
  --chromatic-hover: #188CE8;  
}


body {
  font-family: "Roboto", san-serif;
  font-size: 14px;
  color: var(--main-color);
  background-color: var(--white-acsent);
  letter-spacing: 0.03em;
}
.link,
.logo {
  text-decoration: none;
  /* font-weight: 500; */
}

/* ---- Хедер -----*/
.header {

}
.header__pagination {
  
}
.nav__link,
.contakt__link {
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: var(--main-color);
}
.contakt__link {
  color: var(--context-color);
}

.logo {
  font-family: var(--logo-ff);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.19;
  color: var(--dark-acsent);
}
.accent {
  color: var(--chromatic-usual);
}
.header__items {

}
.items,
.filters__items,
.filters__galery {
  list-style: none;
}
/* при натисканні  */
.link:active
{
  color: var(--chromatic-usual);
}
.nav__link:hover,
.contakt__link:hover {
  color: var(--chromatic-usual);
}
/* активна сторінка */
.active .nav__link{
  color: var(--chromatic-usual);
}
/* ------------ Main ---------- */

/* ------------ hero -----------*/
.hero {
  background-color: var(--dark-background);
}
.hero__title {   
  font-weight: 900;
  font-size: 44px;
  line-height: 1.36;

  /* text-align: center; */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-acsent);
  
}
.button {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.87;
  letter-spacing: 0.06em;
  color: var(--white-acsent);
  background-color: var(--chromatic-usual);
}

/* -------- features ---------------- */
.feature__title {
  /* font-weight: 700; */
  /* font-size:з таблиці стилів користувача h3 не перебилось наслідуванням з body */
  font-size: 14px;
  line-height: 1.14;
  text-transform: uppercase;
}

.feature__text {
  line-height: 1.71;
  color: var(--context-color);
}

.activity__title,
.team__title {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.17;

}
 /* ---- team -------- */
 .team__subtitle {
  font-weight: 500;
  font-size: 16px;  
  line-height: 1.19;
 }
 .team__text {
  font-size: 16px;
  line-height: 1.19;
  color: var(--context-color);
 }

 /* ------- footer -------- */
 .footer {
  background-color: var(--dark-background);

 }
 .logo-white {
  color: var(--white-acsent);
 }
 .footer__address {
  font-style: normal;
 }
 .address {
  line-height: 1.71;
  color: var(--white-acsent);

 }
.footer__link {
  line-height: 1.71;
  color: var(--white-сontext);
}  

/* ===================================== */

/* --------------- PORTFOLIO --------------- */
.filters__button {
  font-family: "Roboto", san-serif; 
  font-size: 16px; 
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.63;
  color: var(--main-color);
}
.filters__button:hover,
.filters__button:active {
  color: var(--white-acsent);
  background-color: var(--chromatic-hover);
  cursor: pointer;
}
/* ----------- galery ------------ */
.filters__card-title {
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--main-color);
}
.filters__card-content {
  font-size: 16px;
  line-height: 1.88;
  color: var(--context-color);
}




.header__item:hover,
.header__item:active {
  color: var(--chromatic-hover);
}