:root {
    --color-primary: #212121;
    --color-brand: #2196F3;
    --color-secondary: #757575;
    --color-light:#FFF;
    --color-bg-dark: #2F303A;
    --color-logo:#000;
    --color-button: #F5F4FA;


}


body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
}

ul{
list-style-type: none;
}

a {
    text-decoration: none;
 }



 


.header-logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.17px;
    color: var(--color-logo);
}
.header-logo .accent {
    color: var(--color-brand);
}
.header-link {
    font-weight: 500;
    line-height: 1.17;
    color: var(--color-primary);

}

.header-link:hover {
    color: var(--color-brand);
}
.contacts-link {
    font-weight: 500;
    line-height: 1.17;
    color: var(--color-secondary);
    
}
.contacts-link:hover {
    color: var(--color-brand);
   

}
 /*hero section*/
.hero-section {
    background-color:var(--color-bg-dark) ;
}
.hero-title {
    font-weight: 900;
    font-size: 44px;
    line-height: 1.36;
    color: var(--color-light);
    text-align: center;
    text-transform: uppercase;

}
.hero-button {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.875;
    color: var(--color-light);
    border: none;
    background-color:var(--color-brand);
    
}


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

/*benefits section*/
.benefit-title {
    font-weight: 700;

}

.benefits-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-secondary);

}
/*team section*/
.person-name {
font-weight: 500;
font-size: 16px;
line-height: 1.17;
}


.person-job {
    font-size: 16px;
    line-height: 1.17;
    color:var(--color-secondary);

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

}



.footer-logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.17px;
    color: var(--color-light);
}

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

.adress-link {
 color: var(--color-light);
}

.footer-link {
    color: #FFF9;


}







.logo-portfolio {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 26px;
    line-height: 1.17px; ;
    color: var(--color-logo);
}
.logo-portfolio .accent {
    color: var(--color-brand);
}
.header-link-portfolio {
    font-weight: 500;
    line-height: 1.17;
    color: var(--color-primary);

}

.header-link-portfolio:focus {
    color: var(--color-brand);
}


.header-link-portfolio:hover {
    color:var(--color-brand);

}

.contacts-link-portfolio {
    font-weight: 500;
    line-height: 1.17;
    color: var(--color-secondary); 
}

.contacts-link-portfolio:hover {
    color: var(--color-brand); 
}
.hero-section-portfolio {
    background-color:#FFF;
}
.hero-title-portfolio {
    font-weight:900 ;
    font-size: 44;
    line-height:1.36 ;
    color: var(--color-light);
    text-align: center;
    text-transform: uppercase;
}
.hero-button-portfolio {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.62;
    color:var(--color-logo);
    background-color:var(--color-button);
    border:none; 
    border-radius: 4px;
    cursor: pointer;

}
.hero-button-portfolio:hover,
.hero-button:focus {
    color:var(--color-light);
    background-color:#188ce8
}
.title-name {
    font-family: roboto;
    font-weight: 700;
    font-size: 18px;
    line: height 36px; ;
    color: var(--color-logo);

}
.veb-site {
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: var(--color-secondary);
}

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

.footer-logo-portfolio {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 20px;
    line-height: 1.17px;
    color: var(--color-light);
}
.footer-logo-portfolio .accent {
    color: var(--color-brand);
}
.footer-link-portfolio {
    font-weight: 500;
    line-height: 1.17;
    color: var(--color-primary);

}

.footer-link-portfolio:hover {
    color: var(--color-brand);
}
.adress-link-portfolio {
    color: var(--color-light);
   }
   
   .footer-link-portfolio {
       color: #FFF9;
   }