body{
    margin: 0;
    font-family: Roboto, sans-serif;
    color: #434455;
    background-color: #FFFFFF;
}

.header{
    margin: 0 auto;
}

.logo{
    text-decoration: none;
    font-family: Raleway, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 117%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4D5AE5;

}


.logo-studio{
    color: #2E2F42;
}

.nav-list{
    list-style-type: none;
    margin: 0;
}

.nav-item{
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #2E2F42;
}

.nav-item:hover{
    color: #404bbf;
}

.nav-item:focus{
    color: #404bbf;
}

.contacts{
    font-style: normal;
}

.contacts-list{
    list-style-type: none;
    margin: 0;
}

.contacts-item{
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #434455;
}

.contacts-item:hover{
    color: #404bbf;
}

.contacts-item:focus{
    color: #404bbf;
}

.main-intro{
    background-color: #2E2F42;
}

.main-intro-title{
    font-weight: 700;
    font-size: 56px;
    line-height: 107%;
    letter-spacing: 0.02em;
    text-align: center;
    color: #FFFFFF;
    margin: 0 0 48px;
}

.main-intro--button{
    background: #4D5AE5;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

.main-intro--button:hover{
    background-color: #404BBF
}

.main-intro--button:focus{
    background-color: #404BBF
}

.main-values{
    margin: 0 auto;
}

.values-list{
    list-style-type: none;
    margin: 0;
}

.values-title{
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    color: #2e2f42;
}

.values-descr{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    margin: 0;
}

.main-employees{
    background-color: #F4F4FD;
    margin: 0 auto;
}

.employees-title{
    font-weight: 700;
    font-size: 36px;
    line-height: 111%;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0 0 72px;
    color: #2e2f42;
    text-transform: capitalize;
}

.employees-name{
    font-weight: 500;
    font-size: 20px; 
    line-height: 120%;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 32px 0 8px;
    color: #2e2f42;
}

.employees-role{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0;
}

.employees-list{
    list-style-type: none;
    margin: 0;
}

.employees-item{
    text-align: center;
    background: #FFFFFF;
}


.portfolio-title{
    font-weight: 700;
    font-size: 36px;
    line-height: 111%;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0 0 72px;
    text-transform: capitalize;
    color: #2E2F42;
}

.portfolio-list{
    list-style-type: none;
    margin: 0;
}

.portfolio-name{
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    margin: 32px 0 8px;
    color: #2e2f42;;
}

.portfolio-category{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
}

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

.footer-descr{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #f4f4fd;
    margin: 16px 0 0;
}

.logo-studio-footer{
    color: #f4f4fd;
}