:root {
    --main-background-color: #F5F4FA;
    --background-color: #2F303A;
    --brand-color: #2196F3;
    --white: #FFFFFF;
    --black: #000000;
    --h-text: #212121;
    --p-text: #757575;
    --line: #ECECEC;
    --white: #FFFFFF;
    --white-transparent: rgba(255, 255, 255, 0.6)
}

body {
    font-family: 'Roboto', sans-serif;

}

a {
    text-decoration: none;
}

header {
    background-color: var(--white);
}

.logo-link {
    font-family: 'Raleway', sans-serif;
    color: var(--brand-color);
    font-size: 26px;
    font-weight: 700;
}

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

.nav,
h2,
h3 {
    color: var(--h-text);
    background-color: var(--main-background-color);
    font-size: 14px;
    font-weight: medium;
    background-color: var(--white);
}

.contacts,
p {
    color: var(--p-text);
    font-size: 14px;
    font-weight: medium;
}

h1 {
    font-size: 44px;
    font-weight: 900;
    text-align: center;
}

.hero,
footer {
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    color: var(--white);
    justify-content: center;
}

.hero-button {
    padding: 10px 31px;
    margin: 0 auto;
    width: 216px;
    height: 50px;
    background-color: var(--brand-color);
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.features-title {
    font-size: 14px;
    font-weight: 700;
}

.features-text {
    font-size: 14px;
    font-weight: 400;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}

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

.am-rolete {
    font-size: 16px;
    font-weight: 400;
}

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

.footer-item {
    font-size: 14px;
    font-weight: 400;
    color: var(--white-transparent);
}

.footer-contacts .footer-item:first-of-type {
    color: var(--white);
}