:root {
    --accent-color: rgb(0, 85, 197);
    --muted-text-color: #666;
    --border-color: #ddd;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    background: #eee;
}

.photo img {
    height: 200px;
    width: auto;
    border-radius: 50%;
    border-bottom-left-radius: 0;
    display: block;
}

.page {
    display: flex;
    width: 21cm;
    height: 29.7cm;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    color: #444;
}

.page_endless {
    height: unset;  
}

@media screen {
    .page {
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.05);
        margin: 40px auto;
        border-radius: 2px;
    }
}

.column {
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.column-left {
    width: 40%;
}

.column-right {
    width: 60%;
}

.first-name {
    color: gray;
    font-size: 1.2rem;
    margin-top: 20px;
    text-transform: uppercase;
}

.last-name {
    color: #333;
    font-size: 2rem;
    text-transform: uppercase;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1;
}

.position {
    color: var(--accent-color);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem
}

h3 {
    font-weight: normal;
    line-height: 1;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 0;
    font-family: 'Times New Roman', Times, serif;
}

.employment {
    margin-bottom: 40px;
}

.employment-stage+.employment-stage {
    margin-top: 20px;
}

.employment-stage__header {
    display: flex;
}

.employment-stage__header__company {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.2;
}

.employment-stage__header__dates {
    margin-left: auto;
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.2;
}

.employment-stage__position {
    color: var(--muted-text-color);
}

.employment-stage__description {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: justify;
    line-height: 1.4;
}

.employment-stage__skills {
    color: var(--muted-text-color);
    font-style: italic;
    margin: 0;
}

.education-stage+.education-stage {
    margin-top: 40px;
}

.education-stage__header {
    display: flex;
}

.education-stage__header__name {
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
}

.education-stage__subheader {
    color: var(--muted-text-color);
    margin-bottom: 10px;
}

.education-stage__header__dates {
    margin-left: auto;
    text-transform: uppercase;
    color: var(--accent-color);
    line-height: 1.2;
}

.education-stage__description {
    text-align: justify;
    margin-top: 10px;
    line-height: 1.4;
}

.education-stage__projects {
    margin-left: 15px;
}

.education-stage__projects-title {}

.education-stage__projects__item {
    margin-top: 5px;
    /* margin-left: 20px; */
}

.education-stage__projects__item:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: -12px;
    margin-right: 0px;
    color: #ccc;
    border: 6px solid transparent;
    border-left-color: var(--accent-color);
}

.profile p {
    /* text-align: center; */
    margin-top: 0;
    line-height: 1.4;
}

.profile h3,
.skills h3,
.contacts h3,
.details h3 {
    margin-top: 20px;
    margin-bottom: 5px;
}

.skills ul {
    margin-top: 0;
    padding-left: 0;
}

@media screen {
    .skills ul li {
        list-style-type: none;
    }
    .skills ul li::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        padding: 0;
        margin-right: 8px;
        margin-bottom: 0.15rem;
        background-color: var(--accent-color);
        border-radius: 50%;
    }
}

.contacts__phone {
    margin-bottom: 5px;
}

.contacts__email {
    font-weight: bold;
    margin-bottom: 5px;
}

.contacts a {
    color: inherit;
    text-decoration: none;
}

.contacts__address {
    font-style: normal;
}

.contacts__github {
    margin-bottom: 5px;
}

.contacts__github>a {
    color: inherit;
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

@media screen {
    .contacts__github a:before {
        content: "";
        display: inline-block;
        height: 1rem;
        width: 1rem;
        margin-right: 5px;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY4OCA0MTguMTI1IDM1MC4xNTYgNDg1LjgxMiAyNS41OTQgNC42ODggMzQuOTM4LTExLjEyNSAzNC45MzgtMjQuNjI1IDAtMTIuMTg4LTAuNDY5LTUyLjU2Mi0wLjcxOS05NS4zMTJDMjQyIDkwOC44MTIgMjExLjkwNiA4MTcuNSAyMTEuOTA2IDgxNy41Yy0yMy4zMTItNTkuMTI1LTU2Ljg0NC03NC44NzUtNTYuODQ0LTc0Ljg3NS00Ni41MzEtMzEuNzUgMy41My0zMS4xMjUgMy41My0zMS4xMjUgNTEuNDA2IDMuNTYyIDc4LjQ3IDUyLjc1IDc4LjQ3IDUyLjc1IDQ1LjY4OCA3OC4yNSAxMTkuODc1IDU1LjYyNSAxNDkgNDIuNSA0LjY1NC0zMyAxNy45MDQtNTUuNjI1IDMyLjUtNjguMzc1QzMwNC45MDYgNzI1LjQzOCAxODUuMzQ0IDY4MS41IDE4NS4zNDQgNDg1LjMxMmMwLTU1LjkzOCAxOS45NjktMTAxLjU2MiA1Mi42NTYtMTM3LjQwNi01LjIxOS0xMy0yMi44NDQtNjUuMDk0IDUuMDYyLTEzNS41NjIgMCAwIDQyLjkzOC0xMy43NSAxNDAuODEyIDUyLjUgNDAuODEyLTExLjQwNiA4NC41OTQtMTcuMDMxIDEyOC4xMjUtMTcuMjE5IDQzLjUgMC4xODggODcuMzEyIDUuODc1IDEyOC4xODggMTcuMjgxIDk3LjY4OC02Ni4zMTIgMTQwLjY4OC01Mi41IDE0MC42ODgtNTIuNSAyOCA3MC41MzEgMTAuMzc1IDEyMi41NjIgNS4xMjUgMTM1LjUgMzIuODEyIDM1Ljg0NCA1Mi42MjUgODEuNDY5IDUyLjYyNSAxMzcuNDA2IDAgMTk2LjY4OC0xMTkuNzUgMjQwLTIzMy44MTIgMjUyLjY4OCAxOC40MzggMTUuODc1IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDM4LTAuNjg4IDEyMy42MjUtMC42ODggMTQwLjUgMCAxMy42MjUgOS4zMTIgMjkuNTYyIDM1LjI1IDI0LjU2MkM4NzcuNDM4IDkzMCAxMDI0IDczOC4xMjUgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+);
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media print {
    .contacts__github a:after {
        content: attr(href);
        display: block;
        flex: 100%;
    }
}

.project+.project {
    margin-top: 60px;
}

.project__name {
    font-weight: bold;
    font-size: 1.5rem;
}

.project__type {
    color: var(--muted-text-color);
}

.project__tags {
    color: var(--muted-text-color);
    font-style: italic;
}

.project__description p {
    margin: 10px 0;
}

.project__responsibilities {
    margin-left: 20px;
    margin-bottom: 20px;
}

.project__responsibilities__item {
    margin-top: 5px;
}

.project__responsibilities__item:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: -12px;
    margin-right: 0px;
    color: #ccc;
    border: 6px solid transparent;
    border-left-color: var(--accent-color);
}

@media screen and (max-width: 21cm) and (min-width: 600px) {
    .page {
        width: unset;
        height: unset;
        margin: 0;
        box-shadow: none;
    }
    .column {
        height: unset;
    }
    .column-left {
        border-right: none;
    }
    .column-right {}
    .visit-card {
        margin-bottom: 20px;
    }
    .general-info {}
    .profile h3,
    .skills h3,
    .contacts h3 {
        margin-top: 0;
    }
    .name {
        text-align: left;
    }
    .position {
        letter-spacing: 0;
        line-height: 1;
    }
    .photo img {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 600px) {
    .photo img {
        width: 100%;
        height: auto;
    }
    body {
        font-size: 14px;
    }
    .page {
        width: unset;
        height: unset;
        flex-direction: column;
        margin: 0;
        box-shadow: none;
    }
    .column {
        height: unset;
    }
    .column-left {
        width: 100%;
        border-right: none;
    }
    .column-right {
        width: 100%;
    }
    .photo img {
        height: auto;
        width: 60%;
    }
    .employment-stage__header {
        flex-direction: column;
    }
    .employment-stage__header__dates {
        margin-left: 0;
    }
}