:root {
  --primary-text-color: #212121;
  --secondary-text-color: #757575;
  --accent-color: #2196f3;
  /* #188CE8 */
  --bg-color: #F5F4FA;  
  --color-white: #ffffff;
}
/* color blue #2196f3 */
/* color master #212121 h3 h2 */
/* color slave #757575 p*/
/* color adress footer #ffffff */
/* color contact footer rgba(255, 255, 255, 0.6) */
body {
    color: var(--primary-text-color);
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-white);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.03em;
}
/* h1,
h2,
h3,
p,
a, */
button
 {
    font-family: inherit;
    cursor: pointer;
}
.main p {
    /* font-size: 14px;*/
    line-height: 1.7;
}
.main-list p {
    font-size: 16px;
    line-height: 1.88;
}
p {
    color: var(--secondary-text-color);
}
.logo-web {
  color: var(--accent-color);
  font-family: 'Raleway';
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}
.logo-studio {
  color: #000000;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}
.top-mail {
    color: var(--secondary-text-color);
}
.top-tel {
    color: var(--secondary-text-color);
}
.header-section {
    display: flex;
    width: 1600px;
    height: 80px;
    left: 0px;
    top: 0px;
}
.nav-section {
    display: flex;
}
.logo {
  padding: 4px 30px 1px 30px;
  width: 145px;
  height: 31px;
}
.nav {
    color: var(--primary-text-color);
    letter-spacing: 0.02em;
}
/* main */
.hero {
    background-color: #2F303A;
    width: 1600px;
    height: 600px;
}
.hero h1 {
    font-weight: 900;
    font-size: 44px;
    line-height: 1.36;
    text-align: center;
    color: var(--color-white);
    position: absolute;
    width: 696px;
    height: 120px;
    left: 452px;
    top: 280px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero .link {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.88; 
    color: var(--color-white);
    position: absolute;
    background-color: var(--accent-color);
    width: 216px;
    height: 50px;
    left: 692px;
    top: 430px;
    border-radius: 4px;
    border: none;
    outline: none;
}
.filter-list .link {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.63;
    border: none;
    outline: none;
}
.command p {
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
}
.main h2 {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.17;
    text-align: center;
}
.our-command {
    background-color: var(--bg-color);
}
.command li {
    background-color: var(--color-white);
}
.command h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.19;
    text-align: center;
}
.features-list h3 {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.14;
    text-transform: uppercase;
}
.main-list h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.06em; 
}
.visually-hidden { 
    position: absolute; 
    white-space: nowrap; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    border: 0; 
    padding: 0; 
    clip: rect(0 0 0 0); 
    clip-path: inset(50%); 
    margin: -1px; 
    }    
.topmenu {
   display: flex;
   list-style-type: none; 
   font-weight: 500;
   /* font-size: 14px; */
   line-height: 1.14;
}
.topcontacts {
    display: flex;
    list-style-type: none;
    font-weight: 500;
    /* font-size: 14px; */
    line-height: 1.14;
    letter-spacing: 0.02em;
}
a {
    text-decoration: none
}
.nav.current {
    color: #2196f3;
}
h1, h2, h3 {
    color: var(--primary-text-color);    
  }
.link {
    color: var(--primary-text-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    text-align: center;
} 
.hero .link {
    letter-spacing: 0.06em;
} 
/* Hover */
.hero .link:hover,
.hero .link:focus {
 background-color: #188CE8;
} 
.filter-list .link:hover,
.filter-list .link:focus {
 background-color: var(--accent-color);
 color: var(--color-white);
} 
.footer-adress:hover,
.footer-adress:focus,
.footer-contact:hover,
.footer-contact:focus,
.top-tel:hover,
.top-tel:focus,
.top-mail:hover,
.top-mail:focus,
.nav:hover,
.nav:focus
{
    color: var(--accent-color);
} 
.command,
.work-list,
.features-list,
.filter-list,
.main-list {
    display: flex;
    list-style-type: none;
}
.footer .logo-studio {
    color: var(--color-white);
}
.logo-footer {
    padding-left: 39px;
    width: 145px;
    height: 31px;
  }
.footer {
    background-color: #2f303a;
    width: 1600px;
    height: 252px;
}
.footer-list {
    list-style-type: none;
    font-style: normal;
    width: 231px;
    height: 81px;
    /* font-size: 14px; */
    line-height: 1.71;
} 
.footer-contact {
  color: rgba(255, 255, 255, 0.6);    
}
.footer-adress {
  color: var(--color-white);    
}
/* main styles */
.main-i {
    display: flex;
    flex-direction: row-reverse;
    width: 1200px;
    margin: 0 auto;
}

.main_content {
    background-color: #fff;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
    padding: 10px 90px;
}
.main_content .song-title {
    font-size: 16px;
}
/* about styles */
.about {
    margin-bottom: 40px;
}

.about_position {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-bottom: 20px;
    margin-top: 40px;
}

.about_name {
    font-style: normal;
    font-weight: bold;
    font-size: 45px;
    line-height: 55px;
    color: #000000;
    margin-bottom: 25px;
}

.about_description {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #595959;
    width: 400px;
}

/* projects styles */
.projects {
    margin-bottom: 50px;
}

/* li {
    background-color: yellow;
}
h3 {
    color: blueviolet;
}
div {
    background-color: rgb(184, 179, 179);
} */

.title {
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 27px;
    color: #000000;
    margin-bottom: 10px;
}

.projects_list {
    padding: 0;
    margin-left: 16px;
}

.projects_item {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
}

.project {}

.project_link {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #595959;
}

.project_link {
    margin-left: 10px;
}

/* .project_bracket {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
} */
/* work styles */
.work {
    margin-bottom: 45px;
}

.work_position {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    margin-bottom: 10px;
}

.organization {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #fd6d3a;
}

.period {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: #a8a8a8;
    margin-bottom: 10px;
}

.line {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: #000;
}

.work_list {
    padding: 0;
    margin-left: 16px;
}

.work_list_item {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #595959;
}

/* Education styles */
.education {}

.university {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #fb6d3a;
    margin-bottom: 10px;
}

.departament {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-bottom: 10px;
}

/* sidebar styles */
.sidebar {
    background-color: #1e2939;
    padding-top: 48px;
    width: 370px;
}

.photo {
    width: 370px;
    margin-bottom: 50px;
}

.contacts,
.tech_skills,
.soft_skills {
    margin-left: 40px;
}

.contacts {
    margin-bottom: 50px;
}

.tech_skills {
    margin-bottom: 45px;
}

.sidebar_title {
    color: #ffffff;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 10px;
}

.contact_type {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    margin-right: 10px;
}

.contact_type1 {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    margin-right: 27px;
}

.contact_link {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #565e6a;
}

.tech_skills_list {
    color: #fff;
    padding: 0;
    margin-left: 16px;
}

.soft_skills_list {
    color: #fff;
    padding: 0;
    margin-left: 16px;
}

.tech_skills_item {
    color: #fb6d3a;
}

.tech_skills_text {
    color: #fff;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}

.soft_skills_item {
    color: #fb6d3a;
}

.soft_skills_text {
    color: #fff;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}