/* html */
html {

      margin: auto;
      width: 1280px;
      min-width: 1280px;
      max-width: 1280px;
      padding: 0;
      min-height:1399px;
      max-height:1399px;
      height:1399px;

    }

/* Загальне для списків OL та UL на даній сторінці */
OL,UL {

  margin-bottom: 0;
  margin-top: 0;

}

/* body */  
body {

    background-color: #F6F6FA;
    padding: 40px;
    box-sizing: border-box;
    font-family: Montserrat;
    margin: 0 auto;

    min-width:1280px;
    width:1280px;
    max-width:1280px;

    height: 1399px;
    min-height: 1399px;
    max-height: 1399px;

}

/* My_photo */
.My_photo {

  border-radius: 60px;
  box-shadow: 0px 0px 20px 4px;
  border-bottom: 5px solid #d9d9d9;
  border-top: 5px solid #d9d9d9;
  box-sizing: border-box;

}

/* wrapper  */
.wrapper {

  background: #fff;
  display:flex;
  flex-direction: row-reverse;
  /* justify-content:flex-end; */

  box-shadow: 0px 10px 20px 5px blueviolet;
  border-radius: 60px;
  box-sizing: border-box;
  
  width:1200px;
  min-width:1200px; 
  max-width:1200px;

  min-height:1319px;
  max-height:1319px;
  height:1319px;
  margin:0 auto;
}


/*Main-Content*/
.Main-Content {

  box-shadow: 0px 0px 20px 5px blueviolet;
  border-radius: 60px;
  box-sizing: border-box;
  padding:80px 40px 80px 88px;
  background: #e0ebfe;
 
}

/* Projects */
.Projects {

  text-align: left;
  margin-bottom: 40px;

}


/* SIDEBAR */

#sidebar {

  padding: 40px 0;
  background: #e0ebfe;
  box-sizing:border-box;

  border-radius: 60px;

  width: 370px;
  min-width:370px;
  max-width:370px;

  min-height: 1319px;
  height: 1319px;
  max-height: 1319px;

  box-shadow: 0 4px 20px 5px;

}

/* sidebar-content */

#sidebar-content {

 padding:40px 40px 0;
 box-sizing: border-box;

}


/* Contacts*/
/* contacts-title */
.contacts-title {

      font-weight: 700;
      font-size: 22px;
      color: #161d2a;
      text-align: left;
      line-height: normal;
      margin-top:0;
      margin-bottom: 8px;

}

/* contacts-type */
#contacts-type {

  font-size: 14px;
  font-weight: 700;
  line-height: 24px; 
  letter-spacing: 0;
  margin-right: 8px;

}

/* Contacts-link,  ContactsLink */
#ContactsLink {

  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  color: #2979ff;
  text-decoration: underline;
  text-decoration-skip-ink:none;
}

/* ContactcsItems, Contacts-items */
#ContactcsItems {

   margin-top: 0;
   margin-bottom: 4px;

}

section.contacts-container {

  width:204px;
  height: 83px;

  max-width:204px;
  max-height: 83px;

  min-width:204px;
  min-height:83px;
 
  box-sizing: border-box;
 
  margin-bottom: 40px;

}

/* skills-container */
#skills-container {

  margin-bottom: 40px;

}


/* Soft_Skills,.Tech_Skills */
.Soft_Skills,.Tech_Skills {

  margin-bottom: inherit;

}

#skill-title {

  font-weight: 700;
  font-size: 22px;
  color: #161d2a;
  line-height:auto;
  letter-spacing:0;
  margin-bottom: 8px;
  margin-top: 0;

}

#skils-list {

/*Цей селектор використовується для стилізації списків двох контейнерів <div> (перший з яких має клас Tech_Skills*/
/* а другий - Tech_Skills) а також їх елементів зарахунок успадкування. */
/* Адже елементи даних списків завжди є їх доньковими об'єктами. А будь який доньковий об'єт завжди успадкову є*/
/*в загальному випадку ти чи  аргументи свого батька і ти чи інші властивості CSS. І хоча не завжди і не всі  */
/*всі дані властивості успадковуються і все працює корректно і відповідає макету - перевірено візуально (і, до речі,*/
/* це дозволило не створбвати окремі класи для елементів обох даних списків і завдання все одно було вирішено */

  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  color: #161d2a;
  padding-left: 16px;

}


#DutyList, #fromme, #TextForLinkMyTechnology {

/* Згідно з макетом в даному блоці Work Experience є три списка, які і елементи яких можна спокійно стілузувати саме */ 
/* даним селектором саме з даним ідетифікатором DutyList так як вони її елементи мають однакове */
/* оформлення і їх елементи як їх донькові об'єкти спокійно успадковують від них всі дані властвості  */
/* При цьому дані списк володіють даним ідентифікатором #DutyList. */
/* Також в блоці "Про мене", що йде над блоком "Prjects" є ще абзац, який реалізується як об'єкт <p> */
/* з даним ідентифікатором fromme який теж має такеж саме оформлення.*/
/* Також всі дані параметри  повністю підходять і для підписив посилань в списку проектів які я оформив */
/* у вигляді контейнерів <span>, мають даний ідентифікатор TextForLinkMyTechnology для яких властивості margin-top і */
/* margin-bottom які тут є згідно з правилами CSS і HTML не діють і тому це не спотворює їх положення */
/* Саме тому даний селектор був створений і, відповідно застосовується і для даних об'єетів з усіма даними */
/* ідентифікаторами. */
/* При цьому додатково за допомогою окремого селектора CSS для даних списків з даним ідентифікатором */
/* DutyList потрібно зробити відступ для відображеня згідно з макетом в середину на 16px */

  margin-bottom: 12px;
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  color: #595959;
  margin-top:0;

}

#DutyList {

/* Додатково для даних списків з даним ідентифікатором DutyList потрібно зробити відступ */
/* для відображеня згідно з макетом в середину на 16px */
/* Списки з даним ідентифікатором містять список моїх конкретних обов'язків, які явиконував на конкретній роботі */

  padding-left:16px;

}

#PeriodOfWork {

/* Згідно з макетом в даному блоці Work Experience є три абзаца, які і елементи яких можна спокійно стілузувати саме */ 
/* даним селектором саме з даним ідетифікатором PeriodOfWork так як вони мають однакове оформлення. 
/* При цьому цей ідентфікатор просто надається даним абзацам */

  font-weight: 400;
  font-size: 12px;
  line-height: 125%;
  color: #a8a8a8;
  margin-top:0;
  margin-bottom: 8px;
  
}


#separator {

  /* В середині трьох вище згаданих абзаців є три знаки | які виділяються даним кольором і для яких можна споквійно */
  /*задати оформлення саме саме даним селектором саме з даним ідентифікатором так як вони поміщені контейнери span  */
  /* з даним ідентифікатором separator */

  color:black;

}

#vacancy {

/* Згідно з макетом в даному блоці Work Experience є три заголовка h4, які і елементи яких можна спокійно стілузувати */ 
/* саме даним селектором саме з даним ідетифікатором vacancy так як вони мають однакове оформлення. */
/* При цьому цей ідентфікатор просто надається даним заголовкам */

  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: #000;
  margin-bottom: 12px;
  margin-top: 0;

}

span#CompanyName {

/*В цих трьох заголовках h4 даного блок Wor kExperience є певні елементи, для яких повинен бути застован саме */
/* саме даний колір, задаваємий саме даним селектором саме з даним ідентифікатором CompanyName. */
/* Для цього, в свою чергу, вони поміщені у відповідні контейнери <span> з даним ідентифікатором */

  color:#6d9bf5;

}

#Work-Experience-Title, #My-Projects-Title, #Front-End-Developer {

/* Згідно з макетом в даному блоці Work Experience є два заголовка h3, які і елементи яких можна спокійно стілузувати */ 
/* саме даним селектором так як вони мають однакове оформлення. Перший з них має ідентифікатор Work-Experience-Title а */
/* а другий - My-Projects-Title. Обидва дані заголовки мають повністю однакове оформлення  яке і задається властивостями */
/* саме даного селектора. Тому їх ідентифікатори і вказані в його назві і тому він для них і застосовується. */
/* Там також є і заголовок h4 який також має практично тиж самі властивості CSS окрім двох - font-size і line-height */

  font-weight: 700;
  font-size: 22px;
  line-height: 123%; 
  color: #000;
  margin-top: 0;
  margin-bottom: 8px;

}

 #Front-End-Developer {

/* Цей селектор також застосовується для вищезгаданого заголовка h4 даного блоку Work Experience і перевизначає */
/* собою дві даних властивості - font-size і line-height так як це потрібно згідно з макетом */
/* оскільки має вищу спеціфічність і більший пріорітет для даного заголовка h4 */

  font-size: 14px;
  line-height: 121%;

 }

 /* Список моїх проектів */
.project_list {

  font-weight: 700;
  font-size: 14px;
  line-height: 171%;
  color: #000;
  padding-left: 15px;
  margin-top:0;
  margin-bottom: 0px;

}

#link-project_item {
  
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: #005fff

}
/* H1 з класом .myname */
.myname {

    font-weight: 700;
    font-size: 45px;
    line-height: 122%;
    color: #000;
    margin:0;
    margin-bottom: 12px;

}

/* My_Info і WorkExperience, .Education*/
.My_Info, .Work_Experience, .Education{

  margin-bottom: 40px;

}

.Education {

    margin-top: 0;
    font-weight: 700;
    font-size: 22px;
    color: #000;

}

/* Education-Title */
.Education-Title {

  margin-top: 0;
  margin-bottom:8px;
  padding:0;

}

/* EducationUniversity */
#EducationUniversity {

  font-size: 16px;
  color: #6d9bf5;
  padding:0 0;
  margin-top:0;
  margin-bottom:8px;

}

/* specialty */
#specialty {

  margin:0;
  font-size: 14px;
  margin-bottom: 8px;
  padding:0 0;

}

/* EducationPeriod */

#EducationPeriod {

  font-weight: 400;
  font-size: 12px;
  color: #a8a8a8;

  
}