/* root  */
:root {
    --brand-color: #2196F3;
    --brand-black: #212121;
    --brand-grey: #757575;
    --main-font-weight: 700;
    --dark-background: #2F303A;
} 
/* задаем шрифт , цвет и размер всему тексту */
.all-body {
    font-family: Roboto, Arial, Helvetica, sans-serif ;
    font-weight: var(--main-font-weight);
    color: var(--brand-black);
}

.all-body ul {
    list-style-type: none;
}

/* убираем декорацию при посещении */
.all-body a:visited {
text-decoration: none;
color: none;
}

/* убираем декорацию для всех ссылок */
.all-body a { 
text-decoration: none;
}

/* Задаём размер заголовка "чем мы занимаемся" */
.all-body h2 {
font-size: 36px ;
text-align: center;    
}

/* задаем размер заголовков "наши приемущества"  */
.all-body h3 {
font-size: 14px ;

}

/* Логотип  */
/* задает логотипу шрифт и размер */
.main-logo {
font-family: Raleway, Arial, Helvetica, sans-serif ;
font-weight: var(--main-font-weight);
font-size: 26px ;
color:var(--brand-color) ;
}
/* Цвет "WEB" */
.logo {
color: #2196F3;
}
/* цвет "STUDIO" вверху */
.studio-up{
    color:var(--brand-black);
}

/* цвет "STUDIO" внизу */
.studio-down {
    color:white;
}


/* Стили header */

/* задаёт стиль текста в навигации */
.heder-navigation {
font-size: 14px ;
font-weight: 500; 
color: var(--brand-black);
}

/* Стиль ссылок  в навигации */
.navigation-link a {
color:var(--brand-black);
text-decoration: none;
}

.navigation-link a:hover {
color:var(--brand-color);
}
.navigation-link a:focus {
color:var(--brand-color);
}

/* стиль контактов в навигации */
.navigation-contacts a {
color: var(--brand-grey);
text-decoration: none;
}
.navigation-contacts a:hover {
color: var(--brand-color);
}
.navigation-contacts a:focus {
color: var(--brand-color);
}




/*  стиль кнопки "заказать услугу" */
.order-button {
background-color:var(--brand-color);
font-size: 16px;
font-weight: 900;
color: white;
margin: 0 auto;
display: block;
cursor: pointer;
}

/* Титульный текст */
.page-title {
font-size: 44px ;
font-weight: 900;
text-align: center;
color:white;    
}

/* задаёт фон титульному тексту */
.main-title {
    background-color: var(--dark-background);
}


/* стиль основного  текста  */
.our-advantage-text p {
font-size: 14px ;
font-weight: 400;
color: #757575;    
} 

/* отключает точки в списках */
.what-we-do-img , .our-team-list , .filter-button-list , .navigation-link , .navigation-contacts , .our-project-list , .our-advantage-text {
    list-style: none;
}


/* Фон секции "наша команда" */
.our-team {
background-color: #F5F4FA;
}

/* размер текста "наша команда" */
.our-team-title {
font-size: 36px ;

}

/* Задаёт стиль именам людей и именам проектов */
.worker-name , .project-name {
font-size: 16px ;
font-weight: 500;
text-align: center;
}

/* задаёт стиль специализациям работников и специализациям проектов  */
.worker-specialization , .project-specialization  {
font-size: 16px ;
font-weight: 400;
color: var(--brand-grey);
text-align: center;
}

/* Стили footer */

/* задаёт стиль адресу в футере */
.footer-address {
font-size: 14px ;
font-weight: 400;
font-style: normal;
color: white;    
}

/* задаёт стиль контактам в футере */
.footer-contacts {
text-decoration: none;
color: var(--brand-grey);
}


.footer-contacts:hover {
color:var(--brand-color) ;
}


.footer-contacts:focus {
color:var(--brand-color) ;
}

/* задаёт фон в футере */
footer {
    background-color: var(--dark-background);
}



/* исключительно для портфолио  */
 
/* стиль фильтр-кнопок Портфолио */
.filter-button {
font-family: Roboto, Arial, Helvetica, sans-serif ;
background-color: white;
font-size: 16px;
font-weight: 500;
color:var(--brand-black);  
}

.filter-button:hover {
    color: white;
    background-color:var(--brand-color);
    cursor: pointer;
}
.filter-button:active {
    color: white;
    background-color:var(--brand-color);
    cursor: pointer;
}