/* font */

@font-face {
    font-family: "Exo2";
    src: url('fonts/exo-2/Exo2-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

* {
    margin: 0;
    line-height: 24px;
    padding: 0;
    font-family: "Exo2", sans-serif;  /* sans-serif - это шрифт по умолчанию, если Exo2 не загрузился.
    Браузер использует свой шрифт по умолчанию*/
}
@page {
    /*@page — это директива, которая задает параметры для оформления страницы при печати документа*/
    /* В отличие от @media print, @page влияет на физическое оформление страницы, а не на содержание. */
    size: A4;
}
/*для менюшки перед cv*/
@media print {
    /* @media print - медиа-запрос, который применяется к стилям страницы только при печати.
    Используется для изменения элементов на странице (например, скрытие рекламных блоков,
    изменение шрифта, изменение цветов и т. д.)*/
    .no-print {
        display: none !important;
    }
    /* disable href in <a> tag */
    a {
        text-decoration: none;
        color: inherit;
    }
}
.menu-translate-section {
    display: flex;
    margin-right: 30px;
}
#id-menu-button-pdf {
    border: none;
    background-color: inherit;
}
#id-menu-button-pdf:hover {
    cursor: pointer;
}

#id-img-pdf {
    width: auto;
    height: 87%;
    display: block;
}

.menu {
    display: flex;
    padding-bottom: 5px;
    margin: 5px;
    height: 70px
}
.menu-lang-button {
    background-color: hsl(240 100% 93%);
    color: hsl(0 0% 0%);
    border: 1px solid hsl(242 60% 47%);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
}

.menu-lang-button:hover {
    background-color: hsl(240 100% 81%)
}

.black-divider {
    display: block;
    background-color: black;
    height: 2px;
}

.page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    background: white;
}

ul {
    list-style: none;
}

li {
    display: flex;
    align-items: flex-start;
    gap: 6px; /* The indentation between the marker and the text */
    margin-top: 6px;
    margin-bottom: 12px;
}
li::before {
    content: "•";
    font-size: 1.4em; /* marker size */
}

.highlightBar {
    width: 10mm;
}
.highlightMaker {
    /*width: 100%;*/
    height: 20mm;
    background-color: hsl(192, 50%, 51%);
    /*box-sizing: border-box;*/
    /*border: 1px solid black;*/
}

/* content style*/
.content {
    width: auto
}
.cv-header-content-first {
    display: grid;
    grid-template-columns: auto 105mm;
}
.cv-header-content-first-left {
    display: flex;
    flex-direction: column;
    padding-right: 5px;
}
.cv-header-fio {
    padding-left: 1px;
    padding-bottom: 12px;
    font-weight: 600
}
.cv-header-current-position {
    padding-left: 1px;
    font-weight: normal;
}

.cv-header-content-first-right {
    display: flex;
    flex-direction: column;
}
.link-to-connect {
    text-align: right;
    padding-right: 5px;
    margin: 1px;
}
.img-to-connect {
    width: 5mm;
    height: 5mm;
    margin: 3px;
}
.way-to-connect-item {
    display: grid;
    grid-template-columns: auto 7mm; /* .img-to-connect.width and .way-to-connect-item.grid-template-columns must to equal */
}

.about-yourself-letter {
    padding-top: 18px;
    padding-left: 1px;
    white-space: pre-line;  /* save working of /n (new line) */
}



.section-layout {
    display: grid;
    grid-template-columns: 12mm auto;    /* .page.grid-template-columns и .highlightBar.width должны быть одинаковыми*/
}


/* для каждой секции*/
.cv-header-section {
    width: 100%;
    height: 73mm;  /* todo предположительно*/
}
.education-projects-languages-section {
    width: 100%;
    height: 62mm;  /* todo предположительно*/
}
.education-projects-languages-content {
    padding: 5px;
    display: grid;
    grid-template-columns: 55mm auto 54mm;
    margin-top: 15px;
}
.cv-header-education {
}

.cv-header-education-title {
    margin-bottom: 10px;
}

.cv-header-education-content {

}

.education-university-name {
    margin-bottom: 9px;
}

.education-university-specialization-name {


}


.cv-header-projects {

}
.cv-header-projects-title {
    display: grid;
    grid-template-columns: 52mm auto;
    margin-bottom: 10px;
}
.cv-header-projects-title-right {
    text-align: center;
}

.cv-header-project-name {
    width: 58mm;
    line-height: 20px;

}

.cv-header-project-rpc {
    width: 10mm;
    text-align: center;
}
.cv-header-languages {

}
.cv-header-languages-title {
    margin-bottom: 10px;
}


.professional-activity-header-section {
    width: 100%;
    height: 20mm; /*todo*/
}

.professional-activity-section {
    width: 100%;
    height: 87mm;  /* todo предположительно*/
}

.professional-activity-content {
    display: flex;
    flex-direction: column;
}
#id-professional-activity-title {
    margin-bottom: 15px;
}
.professional-activity-item {
    margin: 1px;
}
.professional-activity-tech-item {
    display: flex;
    margin-top: 5px;
}
.professional-activity-tech-item h3 {
    margin-right: 10px;
}
.job-item {
    margin-bottom: 10px;

}
.job-item-content {
    display: grid;
    grid-template-columns: auto 90mm;
    margin-bottom: 25px;
}

.job-item-content-left {

}
.job-item-company-name {
    margin: 3px;
}
.job-item-work-period {
    color: hsl(192, 50%, 51%);
    margin: 3px;
}
.job-item-tasks-and-achievements {
    color: hsl(192, 50%, 51%);
    margin: 3px;
}
.job-item-company-task {
    margin: 7px;
    line-height: 22px;
    width: 95mm

}

li.job-item-company-task::before {
    color: hsl(192, 50%, 51%);
}

.job-item-content-right {
    display: flex;
    flex-direction: column;
}

.job-item-description-and-role-content {
    margin-bottom: 10mm; /*todo*/
    display: flex;
    flex-direction: column;
}

.job-item-description-and-role-title {
    margin-bottom: 5px;
}
.job-item-description-and-role-text {
    line-height: 25px
}

.description-and-role-tech-title {
    margin-bottom: 5px;
}