:root {
    --content-font-size: 22px;
    --mobile-content-font-size: 18px;
    --page-title-font-size: 40px;
    --block-title-font-size: 30px;
    --block-subtitle-font-size: 26px;
    --paginator-font-size: var(--content-font-size);
    --note-font-size: 16px;
  }
  
html {
    font-family: 'Source Code Pro', monospace;
}
body {
    height: 100%;
    left: 0;
    right: 0;
    margin: 0px;
    padding: 0px;
}
a {
    text-decoration: none;
    color: black;
}
hr {
    padding: 0;
    margin: 50px 0;
}

.debugRed {
    background-color: rgba(255, 0, 0, 0.13);
}
.debugPurple {
    background-color: rgba(204, 0, 255, 0.13);
}
.debugBlue {
    background-color: rgba(68, 0, 255, 0.13);
}
.header, .footer  {
    height: 70px;
    left: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.header {
    top: 0;
}
.footer {
    bottom: 0;
}

.main {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}
.block {
    height: 100%;
    width: 50%;
}

.main-content {
    float: left;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.biography, .experience, .blog, .mentor, .settings {
    width: 1200px;
    max-width: 70%;
    min-width: 50%;
    padding: 5px 0;
    margin: 0 auto;
    text-align: center;
    transition: 300ms;
    transition-timing-function: ease-in;
    flex: 1 1 auto;
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}



.spacer {
    flex: 1 1 auto; /* занимает всё оставшееся пространство */
}
.biography .title, .experience .title, .blog .title, .cooperation .title, .mentor .title, .settings .title {
    text-align: center;
    font-size: var(--block-title-font-size);
    margin: 15px 0;
}
.biographyContentLeft, .biographyContentRight, .experienceItem {
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: 3px dashed black;
}
.blogChapter, .blogChapterTelegramInvitation {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 3px dashed black;
    margin: 5px 0;
    padding: 10px;
}

.blogTimestamp {
    font-size: var(--content-font-size);
    font-weight: bold;
    text-align: right;

}
.blogContentItem, .blogTelegramInvitation {
    text-align: left;
    font-size: var(--content-font-size);
    text-align: justify;
    text-indent: 50px;
    margin: 15px 0;
}
.blogTelegramInvitation {
    text-indent: 0;
    font-size: var(--note-font-size);
    margin: 5px 0;
    padding: 0;
}
.blogChapterTelegramInvitation {
    min-height: 0;
    border: 0;
    font-style: italic;
    margin: 5px;
}

.pages {
    height: auto;
    left: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: auto;
    font-size: var(--paginator-font-size);
    margin: auto;
}
.pageButton, .pageButtonActive, .ellipses {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-items: center;
    transition: 300ms;
    transition-timing-function: ease-out;
    height: 1vmax; 
}

.pageButton:hover {
    cursor: pointer;
    transition: 300ms;
    transition-timing-function: ease-in;
    background-color: lightgray;
}
.pageButtonActive {
    /* background-color: gray; */
    /* color: white; */
    font-weight: bold;
    /* text-decoration: underline; */
    border-bottom: black 3px solid;
}

.experienceItem {
    min-height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    align-items: center;
    border: 3px dashed black;
    padding: 10px;
}
.biographyContentLeft {
    text-align: left;
    flex: left;
}
.experienceResponsibility {
    text-align: right;
    flex: right;
}
.biographyTitle, .experienceTitle, .experiencePosition, .experienceResponsibilityTitle {
    display: inline-block;
    font-size: var(--block-title-font-size);
    width: auto;
    top: 0;
    text-align: center;
}
.experienceResponsibilityTitle {
    font-size: var(--block-subtitle-font-size);
    margin: 15px auto;
}

.experiencePeriod {
    font-size: var(--note-font-size);
    font-style: italic;
    margin: 2px auto;
}
.experienceStack, .experienceStackChapter {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin: 0;
    justify-content: center;
    align-items: center;
    border: 3px dashed black;
    
}
.experienceStackChapter {
    border: 0;
}
.experienceItem .experienceStack        {
    border: 0;
}
.experienceStackItem {
    display: flex;
    text-align: center;
    background-color: rgb(229, 229, 229);
    color: black;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border: 3px solid black;
    /* background: transparent; */
    font-size: var(--note-font-size);
    border-radius: 15px;
    width: auto;
    margin: 5px;
    height: 30px;
    padding: 0 15px;
}
.biographyChapter, .experienceResponsibility {
    flex: left;
    flex-direction: column;
    height: auto;
    width: auto;
    display: flex;
    justify-content: center;
    margin: 20px;
}
.experienceResponsibility {
    width: 100%;
    padding: 1px;
    margin: auto 1px;
}
.biographyImage {
    flex: right;
    position: relative;
    min-width: 30%;
    aspect-ratio: 1 / 1; /* делает блок квадратным */
    background-size: cover;
    background-repeat: no-repeat;
    margin: 20px;
}
.biographyItem, .experienceResponsibilityItem {
    text-align: left;
    font-size: var(--content-font-size);
    text-align: justify;
    margin: 10px;
}
.experienceResponsibilityItem {
    margin: 5px;
}
.extra-content {
    top: 0;
    height: 100%;
    float: right;
}

.introContent, .cooperation{
    height: calc(100vh - 142px);
    padding: 0 30px;
    display: flex;
    box-sizing: border-box;
    margin: auto 0px;
    width: 70%;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    overflow-y: auto;
}

.avatar, .mobile_avatar {
    position: absolute;
    object-fit: cover;
    float: right;
    width: 50%;
    height: 100vh;
    top: 0;
    margin: 0;
    padding: 0;
}
.mobile_avatar {
    display: none;
}
.test {
    background-color: red;
    background-image: "media/monitor.png";
    top: 10vmax;
    z-index: 1;
}

.buttonqwe, .langSwitch, .langSwitchSpace {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-items: center;
    transition: 300ms;
    transition-timing-function: ease-out;
    /* height: 2vmax; */
    width: auto;    
    font-size: var(--content-font-size);
    margin: 5px 15px;
}
@media (hover: hover) and (pointer: fine) {
    .buttonqwe:hover{
        background-color: rgb(202, 202, 202);
        display: flex;
        justify-content: center;
        align-items: stretch;
        align-items: center;
        transition: 300ms;
        transition-timing-function: ease-in;
    }
}
.collapse {
    position: absolute;
    visibility: collapse;
}


.active {
    border-bottom: 1px solid black;
}
.title {
    font-size: var(--page-title-font-size);
}

.smallTalk, .cooperation .contacts {
    font-size: var(--content-font-size);
    line-height: 1.5; 
    padding: 0;
    
}
.nickname, .outro {
    text-align: center;
    font-size: var(--content-font-size);
    width: 30%;
    
}

.social {
    position: relative;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    transition: 300ms;
    transition-timing-function: ease-out;
    border: solid 3px transparent;
    border-radius: 40px;
    background-color: transparent;
}

.social:hover{
    border: solid 3px black;
    transition: 300ms;
    transition-timing-function: ease-in;
}

.hidden {
    display: none;
    transition: 300ms;
    transition-timing-function: ease-out;
}

@media (orientation: landscape) {
    .biography .title, .cooperation .title {
        margin: 25px 0;
    }
}
@media (orientation: portrait) {
    .introContent {
        height: auto;
    }
    .biographyItem, .experienceResponsibilityItem {
        font-size: var(--content-font-size);
        padding: 5px 0;
    }
    .intro, .cooperation {
        height: auto;
        padding-top: 5%;
    }
    .biographyImage {
        display: none;
    }
    .biographyChapter {
        width: auto;    
    }
    .experienceStackItem {
        font-size: var(--content-font-size);
        height: 30px;
        border-radius: 15px;       
    }
    .nickname, .outro {
        font-size: var(--mobile-content-font-size);
        width: 30vmin;
    }
    .title {
        padding: 5px;
        font-size: var(--page-title-font-size) !important;
    }
    .smallTalk {
        padding: 5px;
        font-size: var(--content-font-size);
    }
    .buttonqwe, .langSwitch, .langSwitchSpace {
        padding: auto;
        margin: auto;
        font-size: 35px;
    }
    .langSwitchSpace {
        display: none;
    }
    .mobile_avatar {
        display: flex !important;
        position: relative;
        width: 100%;
        max-height: 60vmax;
        float: auto;
        margin: 1vmax 0;
    }
    .avatar {
        display: none;
    }

    .experienceTitle, .experiencePosition, .contacts {
        font-size: 40px !important;
    }
    .experienceResponsibilityTitle {
        font-size: 30px;
    }
    .experiencePeriod {
        font-size: 25px;
    }

    .biographyContentLeft, .biographyContentRight, .experienceItem {
        margin: 0 !important;
    }
    .main {
        flex-direction: column;
    }
    .header, .footer {
        margin: 0;
        left: none;
        width: 100%;
        height: auto;
    }
    .cooperation {
        flex: 1 0 auto;
        margin: auto;
    }
    .footer {
        bottom: 0px;
        flex-shrink: 0;
    }
    .block {
        height: auto;
        width: 100%;
    }
    .biography, .experience, .blog {
        width: 100%;
        max-width: 100%;
        margin: 0;

        padding: 0;
    }

    .blogChapter {
        height: auto;
        width: 100%;
    }
    .extra-content {
        height: auto;
    }
    .blogContentItem {
        font-size: var(--content-font-size);
    }
    .blogTelegramInvitation {
        font-size: var(--note-font-size);
    }
    .cooperation .title {
        margin-top: 0;
    }
}

/* @media (max-width: 1000px), (orientation: portrait) {
    .nickname, .outro {
        width: 10vmax;
    }
    .buttonqwe, .langSwitch {
        padding:     1vmax !important;
        margin: auto;
        font-size: 2.5vmax;
    }
    .buttonqwe:hover {
        font-size: 2vmax;
    }
    .intro, .cooperation {
        height: auto;
        padding-top: 5%;
    }
    .nickname, .outro {
        font-size: 2vmax;
        width: 35vmin;
    }
    .blogContentItem, .blogChapterTelegramInvitation, .blogTelegramInvitation {
        font-size: 2vmax;
    }
} */

.navigationTree {
    width: 100%;
    /* border: 3px dashed red; */
    margin: 0px auto;
}
.navigationTreeProject {
    /* border: 1px solid black */
}
.navigationTreeProjectTitle {
    font-size: 28px;
    text-align: left;
    margin: 10px 0 0 0;
    /* text-decoration: underline; */
    font-weight: 900;
}
.navigationTreeModuleTitle {
    font-size: 24px;
    text-align: left !important;
    /* margin: 10px 0 0 50px; */
    margin: 10px 0 0 5%;
    font-weight: 800;
}
.navigationTreeProjectDescriptionButton {
    display: none;
    font-size: 18px;
    text-align: left !important;
    /* margin: 10px 0 0 50px; */
    margin: 10px 0 0 7%;
    font-weight: 800;
    font-style: italic;
}
.navigationTreeStepTitle {
    font-size: 18px;
    text-align: left;
    margin: 10px 0 0 10%;
    font-weight: 700;
}

.mentorDescriptionRow {
    text-align: left;
    font-size: var(--content-font-size);
    text-align: justify;
    text-indent: 50px;
    margin: 0 0 10px 0;
}
.navigationTreeProjectDescription {
    display: none;
    text-align: left;
    font-size: 14px;
    margin: 10px 0 0 7%;
}
.modulesList, .stepsList {
    display: none;
    margin-left: 20px;
}
.stepDescription {
    font-size: 12px;
    font-style: italic;
    /* margin: 0 0 0 13.5%; */
    margin: 0 0 0 10%;
    text-align: left;
}
.navigationTreeProjectTitle:hover, .navigationTreeStepTitle:hover, .navigationTreeModuleTitle:hover, .navigationTreeProjectDescriptionButton:hover {
    cursor: pointer;
    background-color: lightgray;
    transition: 300ms;
    transition-timing-function: ease-in;
}
.stepNumber {
    display: inline-block;
    min-width: 2em; /* или больше, если номеров много */
    text-align: right;
    margin-right: 0.5em;
}
.mentor {
    flex: 1 1 auto;
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

.markdown {
    text-align: left;;
}


.resultTable {
    width: 100%;
    border: none;
    border-collapse: collapse;
}

.failedCheckTitle, .skippedCheckTitle, .passedCheckTitle {
    height: 30px;
    width: 80%;
    text-align: left;
}
.failedCheck, .skippedCheck, .passedCheck {
    height: 30px;
    width: 20%;
    font-weight: bold;
}
.passedCheckTitle, .passedCheck {
    background-color: rgba(0, 255, 0, 0.4);
}

.skippedCheckTitle, .skippedCheck {
    background-color: rgba(232, 232, 232, 0.4);
}

.failedCheckTitle, .failedCheck {
    background-color: rgba(255, 0, 0, 0.4);
}

.autocheckHelpMessage {
    font-size: 12px;
    text-align: left;
    font-style: italic;
    padding: 0;
}
.autocheckHelpMessage p {
    margin: 0 0 0 2.5%;
}

.autocheckLaunch {
    height: 30px;
    width: 200px;
    border-radius: 25px;
    padding: 2px;
    background-color: transparent;
    border: 3px green solid;
    font-weight: bold;
    margin: 5px 0;
    transition: 300ms;
    transition-timing-function: ease-in;
}

.autocheckLaunch:hover {
    background-color: rgba(0, 255, 0, 0.4);
    cursor: pointer;
    transition: 300ms;
    transition-timing-function: ease-in;
}

.autocheckURLLabel {
    width: 30%;
}
.autocheckURLInput {
    width: 70%;
}

.form-group {
    margin: 0 0 10px 0;
}

.taskPassed {
    font-weight: bold;
    color: green;
}


.stepNavigation {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    
}

.stepNavigationButton {
    padding: 5px 20px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    transition: 300ms;
    transition-timing-function: ease-in;
    /* height: 30px;
    width: 200px; */
}
.stepNavigationButton:hover {
    cursor: pointer;
    background-color: lightgray;
    transition: 300ms;
    transition-timing-function: ease-in;
}

.authTitle {
    font-size: 30px;
    text-align: center;
}
.authDisclaimer {
    font-size: 14px;
    text-align: center;
    font-style: italic;
    width: 800px;
    margin: 0 auto;
}

.authForm {
    /* border: dashed 1px red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 800px;
    margin: 30px auto 0 auto;
    padding: 0;
}

.authFormRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
}
.authFormRow img {
    height: 30px;
}
.authFormRow label {
    width: 30%;
    text-align: left;
    font-weight: bold;
    font-size: 18px;
}
.authFormRow input {
    width: 70%;
    height: 30px;
    border: 1px solid black;
    font-size: 18px;
    text-align: center;
}

.authButton, .logoutButton {
    width: 300px;
    /* height: 30px; */
    background-color: transparent;
    transition: 300ms;
    transition-timing-function: ease-in;
    border: 2px solid transparent;
    border-radius: 15px;
    margin: 30px auto 0 auto;
    padding: 5px;
    
    

}
.logoutButton {
    margin-top: 30px;
    font-size: 14px;
}
.authButton {
    border: 2px solid black;
    font-weight: bold;
    font-size: 18px;
}
.authButton:hover, .verifyContactButton:hover {
    cursor: pointer;
    background-color: lightgray;
    transition: 300ms;
    transition-timing-function: ease-in;
}
.authButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.error {
    color: red;
    text-decoration: underline;
}

.settingsPlaceholder {
    text-align: left;
}
.settingsPlaceholder:placeholder-shown {
    border: none;
    background-color: none;
    text-align: left;
    color: black;
}

.settingsPlaceholder:not(:placeholder-shown) {
    border: 1px solid black;
    background-color: lightgray;
    text-align: left;
}

.settings input::placeholder {
    opacity: 1; /* Прозрачность от 0 (полностью прозрачный) до 1 (непрозрачный) */
    color: black;  /* Дополнительно можно изменить цвет */
}

.settings input:hover {
    cursor: pointer;
}

.verifyContactButton, .verifiedContact {
    height: 30px;
    border: none;
    background-color: transparent;
    font-weight: bold;
    font-size: 18px;
    transition: 300ms;
    transition-timing-function: ease-in;
    /* border-bottom: 3px solid red; */
    
}
.verifyContactButton a {
    color: red;
}
.verifiedContact {
    border: none;
    color: green;
}
.settings .settingsPlaceholder {
    width: 50%;
}
.settings .contactVerificationPlaceholder {
    width: 300px;
}
.settings .contactVerificationLabel {
    text-align: right;
    font-weight: none;
}
.settings .authFormRow {
    justify-content: left;
}