body {
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(215, 215, 228);
    padding: 40px;
}

.wrapper {
    display: flex;
    flex-direction: row-reverse;
    background-color: #ffffff;
    width: 1200px;
    margin: 0 auto;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}
/* Main content */

.main-content {
    padding: 88px;
}

/* About me */
.my-proffession {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 700;
margin: 0 0 18px 0;
}
.my-name{
color: #000;
font-size: 45px;
font-style: normal;
font-weight: 700;
line-height: 55px;
margin: 0 0 28px 0;
}
.my-discr{
color: #595959;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
width: 525px;
}

.about-me-container{
    margin-bottom: 64px;
}
/* Projects */
.main-content-title{
color: #000;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 27px; 
margin: 0 0 8px 0;
}
.project-item{
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px; 
}

.project-list{
    margin: 0 0 0 14px;
    padding: 0;
}

.project-container{
    margin-bottom: 48px;
}

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

.project-item-link{
color: #005FFF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
text-decoration-line: underline; 
}
/* Work Experience */
.work-experience-container{
margin-bottom: 44px;
}
.work-experience-possition{
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
margin: 0;
}
.work-experience-place{
margin-bottom: 16px;
}
.work-experience-company{
color: #6D9BF5;
}
.work-period{
color: #A8A8A8;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 15px;
margin: 12px 0 8px 0;
}
.work-dutties{
color: #595959;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.work-dutties-list{
    padding: 0 0 0 14px;
    margin: 0;
}

/* Education */
.education-place{
color: #6D9BF5;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 12px 0 12px 0;
}

.education-profile{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 12px 0;
}

.education-period{
    color: #A8A8A8;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.text-devider{
    color: #000;
}


/* Sidebar */
.sidebar{
    width: 370px;
    background: #e0ebfe;
}
.my-photo{
    margin-top: 40px;
}
.contacts-container,
.tech-skills-container,
.soft-skills-container {margin: 48px 0 0 40px;
}

.sidebar-content{
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 80px;
}

.sidebar-title{
color: #161D2A;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 27px;
margin-bottom: 8px;
}

/* Contacts */
.contacts-type{
color: #161D2A;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
margin-right: 8px;
}

.contacts-item {
    margin: 0;
}
.contacts-number{
color: #161D2A;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.contacts-email{
color: #2979FF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
text-decoration-line: underline;
}
/* Skills */
.skill-list,
.soft-list {
    margin: 0;
    padding: 0 0 0 14px;
}
.skills-list-item{
    color: #6d98f5;
}
.skills-list--text{
color: #161D2A;
font-size: 14px;
font-style: normal;
font-weight: 400;
}

@media screen and (max-width: 1270px) {
    .wrapper{ 
        width: 100%;
    }
}
@media screen and (max-width: 995px) {
    .main-content{
        padding-left: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 40px;
    }
    .my-photo{
        width: 275px;
    }
}

@media screen and (max-width: 800px){
    .wrapper{
        flex-direction: column-reverse;}
.sidebar{
    display: flex;
    align-items: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}
.sidebar-content{
    padding-top: 0;
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
}
.skills-row{
    display: flex;
    padding-right: 20px;
}
    }
    @media screen and (max-width: 680px){
        body{
            padding: 0;
        }
        .sidebar{
            flex-direction: column;
            align-items: center;
        }
    .my-photo{
        margin-bottom: 20px;
    }
    .sidebar-content{
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }
    }
    @media screen and (max-width: 480px){
        .main-content{
            padding-left: 20px;
            padding-right: 20px;
        }
        .skills-row{
          flex-direction: column;
          padding-right: 0;  
        }
        .sidebar-content{
            align-items: flex-start;
        }
    }