:root {
    --main-color: #212121;
    --second-color: #ffffff;
    --one-color: #000000;
    --two-color: #757575;
    --three-color: #F5F4FA;
    --main-btn-color: #2196F3;
    --main-bg-color: #2F303A;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.14;
    color: var(--main-color);
    background-color: var(--second-color);
    letter-spacing: 0.03em;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

address {
    font-style: normal;
}

button {
    cursor: pointer;
}

img {
    display: block;
}



.logo {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    line-height: 1.19;
    color: var(--main-btn-color);
}

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

.nav-link {
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.02em;
}

.nav-link:hover {
    color: var(--main-btn-color);
}


.contact-link {
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.02em;
    color: var(--two-color);
}

.contact-link:hover,
.contact-link:focus {
    color: var(--main-btn-color);
}

.adr-color {
    color: var(--second-color);
}

.current {
    color: var(--main-btn-color);
}

.hero {
    background-color: var(--main-bg-color);
}

.hero-title {
    font-weight: 900;
    font-size: 44px;
    line-height: 1.36;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--second-color);
}

.hero-button {
    font-family: 'Roboto';
    font-weight: 700;
    line-height: 2.14;
    letter-spacing: 0.06em;
    color: var(--second-color);
    border-color: var(--main-btn-color);
    padding: 10px 32px;
    background-color: var(--main-btn-color);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.hero-button:hover,
.hero-button:focus {
    color: var(--main-btn-color);
    background-color: var(--second-color);
    border-color: var(--main-btn-color);
}

.hero-button:active {
    color: var(--main-btn-color);
    background-color: var(--second-color);
    border-color: var(--main-btn-color);
}

.visually-hidden {
    visibility: hidden;
}


.work-title {
    font-size: 14px;
    text-transform: uppercase;
}

.work-text {
    line-height: 1.71;
    color: var(--two-color);
}

.section-title {
    font-size: 36px;
    line-height: 1.17;
}

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

.team-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.19;
}

.team-position {
    font-size: 16px;
    line-height: 1.19;
    color: var(--two-color);
}


.item-btn {
    font-family: 'Roboto';
    padding: 6px 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.625;
    background-color: var(--three-color);
    border-color: var(--three-color);
    border-radius: 4px;
}

.current-btn {
    color: var(--second-color);
    background-color: var(--main-btn-color);
}

.total-btn {
    padding: 6px 25px;
}


.item-btn:hover,
.item-btn:focus {
    color: var(--second-color);
    background-color: var(--main-btn-color);
    border-color: var(--main-btn-color);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.12);
}

.project-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.06em;
}

.project-type {
    font-size: 16px;
    line-height: 1.875;
    color: var(--two-color);
}

.footer {
    background-color: var(--main-bg-color);
}

.footer-link {
    font-weight: 400;
}

.logo-footer {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    line-height: 1.19;
    color: var(--main-btn-color);
}

.logo-footer>span {
    color: var(--second-color);
}