:root {
    --font-color: #212121;
    --font-color-light-grey-semitransparent:rgba(255, 255, 255, 0.6);
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-background: #F5F5F5;
    --color-background-brand: #F5F4FA;
    --color-brand: #2196F3;
    --color-background-gray: #2F303A;
    --color-active-button: #188CE8;
    --font-color-light-grey: #757575;
}

ul {
    list-style: none;
}

body {
    color: var(--font-color);
    background-color: var(- --color-white);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.71;
}

.link-current {
    font-weight: 500;
    line-height: 1.17;
    text-decoration: none;
    color: var(--color-brand);
    } 

p {
    color: var(--font-color-light-grey);
}

.image:active {
    border: solid;
    border-color: var(--color-brand);
    border-width: thin;
}

.header-logo {
    color: var(--color-brand);
    text-decoration: none;
    font-family: Raleway;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.19;   
}

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

.header-link {
    font-family: Roboto;
    color: var(--font-color);
    font-weight: 500;
    line-height: 1.17;
    text-decoration: none;
}

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

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

.header-contacts {
    color: var(--font-color-light-grey);
    font-weight: 500;
    line-height: 1.17;
    text-decoration: none;
}

.header-phone:hover {
    color: var(--color-brand);
}

.header-phone:focus {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.main-section {
    background-color: var(--color-background-gray);
    color:  var(--color-white);
}

.main-section-title {
    font-weight: 900;
    font-size: 44px;
    line-height: 1.36; 
    text-transform: uppercase;
}

.main-section-button {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.875;
    background-color: var(--color-brand);
    color:  var(--color-white);
    cursor: pointer;
}

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

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

.post-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.17;
    text-transform: uppercase;
}

.section-brand {
    background-color: var(--color-background-brand); 
}

.team-member {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.17;
}

.position {
    font-size: 16px;
    line-height: 1.17;
}

footer {
    background-color: var(--color-background-gray);
    color:  var(--color-white);
}

.footer-logo {
    color: var(--color-brand); 
    font-family: Raleway;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.38;
    text-decoration: none;
}

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

.footer-link {
    font-family: Roboto;
    font-style: normal;
    color: var(--color-white);
    text-decoration: none;
}

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

.footer-contacts {
    color: var(--font-color-light-grey-semitransparent);
    text-decoration: none;
    font-style: normal;
}

.footer-contacts:hover {
    color: var(--color-brand);
}
/* portfolio-page*/


.button {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
    background-color: var(--color-background-brand);
    cursor: pointer;
}

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

.image-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 2.0;
}
    
.product-kind {
    font-size: 16px;
    line-height: 1.17;
}