/* колір основного тексту  #212121 */
/* колір другорядного тексту #757575 */
/* додатковий колір rgba(255, 255, 255, 0.6) */
/* чорний #000000 */
/* білий #ffffff */
/* акцент #2196F3 */
/* основний колір фону #F5F4FA */

:root {
    --primary-text-color: #757575;
    --title-text-color: #212121;
    --accent-color: #2196F3;
    --additional-color: rgba(255, 255, 255, 0.6);
    --additional-bg-color: #F5F4FA;
}

.list {
    list-style: none;
}

a {
    text-decoration: none;
}

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

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

/* Site nav */

.logo {
    color: #000000;

    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.19;
}

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

.site-nav, .contacts-nav {
    letter-spacing: 0.02em;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.14;
}

.site-nav .link {
    color: var(--title-text-color);
}

.contacts-nav .link {
    color: var(--primary-text-color);
}

.site-nav .link:hover, 
.site-nav .link:focus,
.contacts-nav .link:hover, 
.contacts-nav .link:focus {
    color: var(--accent-color);
}

/* Section */

.section-title {
    color: var(--title-text-color);
    font-size: 36px;
    line-height: 1.7;
    text-align: center;
}

/* Hero */

.hero {
    background-color: #2F303A;
}

.hero-title {
    color: #ffffff;

    font-weight: 900;
    font-size: 44px;
    line-height: 1.36;
    letter-spacing: 0.06em;

    text-align: center;
    text-transform: uppercase;
}

/* Наші особливості */

.features .title {
    color: var(--title-text-color);
    font-size: 14px;
    line-height: 1.14;
    text-transform: uppercase;
}

.features .text {
    font-size: 14px;
    line-height: 1.7;
}

/* Чим ми займаємось */

/* Наша команда */

.team .title {
    color: var(--title-text-color);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.19;
}

.team .text {
    font-size: 16px;
    line-height: 1.9;
}

/* Футер */

.footer {
    background-color: #2F303A;
}

.footer .logo {
    color: #ffffff;
}

.address .map {
    color: #ffffff;
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
}

.address .link {
    color: var(--additional-color);
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
}

.address .map:hover,
.address .link:hover,
.address .map:focus,
.address .link:focus {
    color: var(--accent-color);
}

/* Портфоліо */
.portfolio a {
    color: inherit;
}

.portfolio .title {
    color: var(--title-text-color);
    font-size: 18px;
    line-height: 2.0;
    letter-spacing: 0.06em;
}

.portfolio .text {
    font-size: 16px;
    line-height: 1.87;
}

/* Buttons */

.button.primary {
    color: #ffffff;
    background-color: var(--accent-color);

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

.button {  
    background-color: var(--additional-bg-color);
    cursor: pointer;

    color: var(--title-text-color);
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.62;
    letter-spacing: 0.03em;
}

.button:hover,
.button:focus{
    color: #ffffff;
    background-color: var(--accent-color);
}