#mybody {       
    font-family: "Montserrat", serif;  
    background: #F6F6FA;           
    background-image: URL(../img/rain-7616961_640.webp); 
    background-repeat: repeat;
    background-attachment: fixed;
    padding:40px 40px 40px 40px; 
    text-align: left;
   /*Тут задані параметри оформлення підложки сторінки.  */
    /* Даний ідентифікатор був створений для тегу body. */
  /* Шпаргалка.
    Властивість padding:40px 40px 40px 40px; виконує тіж самі функції, що 
    і перераховані нижче властивості 
    padding-left: 40px; 
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    justify-content: space-between;*/
}

#wrapper {                       /* Тут задаються стилі оформлення для для всього */
 background: #fff; /*основного контейнеру WRAPPER який є, в свою чергу, */ 
 display: flex;            /* обгорткою для всіх об'єктів даної WEB-сторінки */
 flex-direction: row-reverse;  /* включно разом  з її SIDEBARом */
 background-image: URL(../img/rain-7616961_640.webp); 
 background-repeat: repeat;
}

#main-conteiner {
    background: #fff;
    padding:88px 80px 40px 80px;
    background-image: URL(../img/rain-7616961_640.webp); 
    background-repeat: repeat-y; 
    background-position:right; 
    background-attachment: scroll;
    box-sizing: border-box;
}

h1 {
    font-weight: 700;
    font-size: 45px;
    line-height: 122%;
    color: #000;
    /*text-align: center;*/
    text-decoration: underline;
    
}

h2 {
    font-weight: 700;
    font-size: 14px;
    line-height: 121%;
    text-decoration: underline;
    color: #000;
}

.mylistproect,.mycontacts {          /* Тут задається стиль оформлення списків моїх проектів */
         list-style-type: decimal;   /* та моїх контактів */
         list-style-position: outside;
      }

ul.mylistaboutme {       /* Тут задається стиль оформлення списку пунктів */
    list-style-type: disc;     /* з інформацією про мене та списку моїх робіт */
    list-style-position: outside;
    text-decoration: underline;
    padding-left: 0;
    margin-left: 20px;
 }     

h3 {    /* Даний стиль забеспечує базові параметри*/ 
         /* візуального оформлення для всіх заголовків H3.*/
    font-weight: 700;
    font-size: 22px;
    line-height: 123%;
    color: #000;
    text-decoration: underline;
}

 h3#h3aligncenter { /* Даний стиль забеспечує виравнювання */
    text-align:center;   /*по центру для таких заголовків H3 які */
}                         /* цього дійсно потребують. */
                      /* А саме для таких заголовків як  */
                      /* 1. Work Experience - Мій досвід роботи. */
                      /* 2. Мої проєкти (My projects)*/
                      /* Тут перераховані всі ті проекти в яких я приймав участь */
                      /* 3.  Моя освіта (My Education). */
                        /*  Житомирський Інженерно Технологічний Інстітут */
                        /*  Zhytomyr Engineering and Technology Institute */

h4.header4left {        /* Тут задається стиль візуального оформлення заголовків H4 */
    font-weight: 700; /* які треба розташувати по по лівому краю */
    font-size: 16px;
    line-height: 125%;
    color: #000;
    text-align: left;
    text-decoration: underline;
}
#mylisteducationandskills{            /* Тут задається стиль оформлення списків пунктів */    
      list-style-type: square;         /* з інформацією про мою освіту*/
      text-decoration: underline;      /* з інформацією про мої технічні навачки */
      list-style-position: outside; 
      padding-left:0;   
      margin-left: 20px;
}

div#contacts-container {   /* Тут задається стиль оформлення списку контактів */
    width:100%;
    margin-bottom: 40px;
     }
#skills-container {            /* Тут задається стиль оформлення списку */
    margin-bottom:40px;        /* моїх техничніх і моїх програмних скилів  */
    padding-left: 0;/*margin-right:209px;*/ /* а саме правий відступ зовні*/
    text-align: left;
}

#mysoftskills {           /* Тут задається стиль оформлення списку */
    margin-left:40px;      /*     пунктів з інформацією про навачки в */
    margin-top:40px;      /*   розробці програмного забеспечення */
    margin-bottom:372px;     
    margin-right:217px;
}

#mylisteducationandskillssoft{ 
    /*text-align:center;*/            
    list-style-type: square;      /* Тут також задається стиль оформлення списку */
    text-decoration: underline;    /*     пунктів з інформацією про навачки в */
    list-style-position: outside; /*   розробці програмного забеспечення */  
    font-weight: 400;              
    font-size: 14px;
    line-height: 171%;
    color: #161d2a; 
    }     
#mylistcontacts{ 
        text-align:left;            /* Тут задається стиль оформлення списку */
        list-style-type: square;     /* контактів, не враховуючи посилань на них */  
        list-style-position: outside;  
        font-weight: 700;
        font-size: 14px;
        line-height: 171%;
        color: #161d2a; 
        } 
A#contactslink {       /*Тут задан стиль оформлення стиль посилань на контакти */
        font-weight: 400;
        font-size: 14px;
        line-height: 171%;
        color: #2979ff; 
        text-decoration: underline;
        
    }   
img { 
        align-items: center;
    }    

ol.olstylevacancy {
    list-style-type: lower-alpha;
}

   .sidebar-content {            /* Тут задається стиль оформлення списку моїх контактів */
    width: 100%;
    padding-left: 40px;      /*  При цьому властивості даного стилю за винятком властивості */
    padding-top:40px;        /* margin-right:139px; використовуються і для задання оформлення */
    padding-right:40px;     /*списку пунктів з інформацією про мої навачки як технічного фахівця */
    padding-bottom:40px;     
    box-sizing: border-box;  
  }
   
  
h3#contacts-and-soft-title  {      /* Тут задається стиль оформлення  */
    font-weight: 700;   /* заголовків третього рівня Контакти, TECH SKILLS та SOFT-SKILLS */                 
    font-size: 22px;
    line-height: normal;
    color: #161d2a;
   /* margin-left:0;*/
    margin-top: 0;
    margin-bottom:8px;
    text-align:left ;
    text-decoration: underline; 
    box-sizing: border-box;
} 

span.contacts-type { /* Тут задається стиль оформлення моїх контактів Contacts */
    font-weight: 700;
    font-size: 14px;
    line-height: 171%;
    color: #161d2a;
    margin-right: 8px;
    margin-top:0;
    margin-bottom: 0;
}
P.contacts-item {  /* Тут задаються параметри визуального оформлення. */
     margin-top:0; /* абзацу моїх контактів. А саме - зовнішні відступи. */
     margin-bottom: 4px; /* При цьому,можливо, ці параметри вже десь дублюються */
}
div#skillsalign {
    text-align:left;
    margin-bottom: -40px;
}
#skills-list {
    margin-left: 0; 
    padding-left: 0;
    list-style-type: square;      
    text-decoration: underline;    
    list-style-position: inside; 
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: #161d2a;   
}

li.skills-list-item {          /* Тут задаються параметри фоматування елементів */
    font-weight: 400;           /*  списку моїх технічних */         
    font-size: 14px;            /* та програмних скилів */
    line-height: 171%;      /* Дані параметри можуть десь дублюватися */
    color: #161d2a;                 
}
                  /* Стилі оформлення Main Content */

h2#my-proffessional {         /* Тут задається стиль оформлення заголовку H2*/
    font-weight: 700;     /* Розробник Fron-End. Front-End Developer.*/
    font-size: 14px;
    line-height: 121%;
    color: #000;
    margin-top:0;
    margin-bottom: 8px;
    
}

h1#my-name {    /* Тут задається стиль оформлення заголовку H1*/
    font-weight: 700;  /* Олексій Смірнов */
    font-size: 45px;
    line-height: 122%;
    color: #000;
    margin-top:0;
    margin-bottom: 12px;
}

P.myinfo {                   /* Тут задається стиль оформлення абзацу про мене */
    margin-left:88px; 
    margin-top:0;
    margin-right:40px;
    margin-bottom:40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: #595959;
}
 .my-info {        /*Тут задається загальний стиль оформлення всього контейнеру */
  margin-bottom:40px; /*типу div, що моє клас class="my-info" і що містить всю */
                      /*інформацію про мене і що діє на весь даний контейнер */
    
}

.myproject {                /* Тут задається стиль оформлення абзацу проектів */                                                  
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: #000;      
    text-decoration: underline;
    font-style: italic; 
}

.project-item {
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    text-decoration: underline; 
    color:#000;
   } 

   /* My projects title */

.my-project-item {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 171%;
    text-decoration: underline; 
    color:#000;
   } 

   
  ol#olstyle {   /* даний стиль задає параметри візуального оформлення */
    /* всіх необхідних мені нумерованих списсків */
   list-style-type: upper-roman;
} 
    /* Список моїх проектів My projects  */
ol.my-list-projects {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 171%;
    color: #000;
    list-style-type: lower-alpha;
    padding-left: 16px;
}
A.my-project-item-link {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #005fff;
}
span.my-project-item-tech  {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: #595959;
}
div.my-projects-container {
    margin-top:40px;/*margin-left:88px;*/
}

/* Work Expiriens */
.work-expiriens-title { /* Параметри оформлення заголовку Мої проекти (My projects)*/
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 22px;
    line-height: 123%;
    color: #000;
    margin-top:0;
    text-align:left;
    text-decoration: underline;
    margin-top:0;
    margin-bottom: 8px;
  }

  h4.header4 {        /* Тут задається стиль візуального оформлення заголовків H4 */
    font-weight: 700; /* які треба розташувати по центру*/
    font-size: 16px;
    line-height: 125%;
    color: #000;
    text-align: left;
    text-decoration: underline;
}
span.manadger-vacancy {
    color: #6d9bf5;
  }
#education-org-title {
  font-weight: 700;
  font-size: 16px;
  color: #6d9bf5;
  text-align:left;
}
h3 {    /* Даний стиль забеспечує базові параметри*/ 
    /* візуального оформлення для всіх заголовків H3.*/
font-weight: 700;
font-size: 22px;
line-height: 123%;
color: #000;
text-decoration: underline;
}
#techskills
  {
    margin-left:40px;
  }
.sidebar {                   /* Тут задається стиль оформлення SIDEBARу */
        background: #e0ebfe;
        width: 370px;
        padding-top: 40px;
        padding-bottom: 40px;
        box-sizing: border-box;
      }

      /* TECH SKILLS  AND SOFT SKILLS */

p#techandsoftskills { 
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: #161d2a;
}

div.work-expiriens-container {  /* Задаємо відступ проміж досвідом роботи та освітою */
    margin-bottom:40px;
}

/* Мої особисті хоббі та якості   */
/* My personal hobbies and qualities */

p#myhobbiesandqualitues { 
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: #161d2a;
}
@media screen and (max-width:900px) {
    #wrapper {
        flex-direction:column-reverse;
        /*width:100%;*/
        box-sizing:border-box;
    } 
    .my-info {        /*.my-info Container for mobile*/
        margin-left:0;
        margin-top:20px;   
      }

    ul.mylistaboutme { /* UL list item ..mylistaboutme for mobile */
        margin-bottom:0;
    }
.work-place{
    margin-left:0;
    margin-right:0;
    margin-top:20px;
}
h1#my-name{ /* aboute me mobile */
    display:flex; 
    flex-direction:column;
    align-items:center;
}
#skills-container {            /* my skills mobile */
    display:flex;
    flex-direction:column;
    align-items:center;
    order:2;
}
}