/*border: 1px solid var(--clr-dark);
border: 1px dashed var(--clr-dark);*/

.header {
    top: 0;
    padding-top: 3em;
    padding-bottom: 3em;
    height: 30px;
        
    font-size: var(--fs_head);
}
.logo {
    text-decoration: none;
    color: black;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 400;
} 



/* desktop */
.index_wrapper {
    display: flex;
    height: calc(100vh - 24em);
    min-height: 732px;
    margin-bottom: 3em;
}
.index_text {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    justify-content: space-between;
    align-content: space-between;
    width: 20%;
    min-width: 320px;
    padding-right: 3em;
}
.index_text_1 {
}
.index_text_1_head {
    font-weight: 400;
    font-size: var(--fs_head);
    line-height: var(--lh_head);
    font-family: 'Atkinson Hyperlegible', sans-serif;
}
.index_text_1_showcase {
    margin-top: 0.5em;
    
    font-family: 'Roboto Mono', sans-serif;
    color: #aaa;
}
.index_text_1_body {
    max-width: 460px;
    margin-top: 2em;    
    
    line-height: var(--lh_body);
}
.index_text_2 {
    grid-row: 3;
}
.index_text_2_hero {
    margin-top: 1em;
    margin-bottom: 0.5em;
    
    font-family: 'Roboto Mono', sans-serif;
    font-size: var(--fs_hero);
    font-weight: 200;
}
.index_text_2_hero > a > span {
    font-variation-settings: 'wght' 100;
}
.index_text_2_hero > a {
    text-decoration: none;
    color: black;
}
.index_text_2_desc {
    font-family: 'Roboto Mono', sans-serif;
    color: #aaa;
}
.index_text_2_desc > a {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: var(--fs_head);
    line-height: var(--lh_head);
    color: black;
}
.index_text_3 {
    grid-row: 4;

    line-height: var(--lh_body);
}
.index_text_3_skill {
    margin-top: 2em;
}



.index_hero {
    display: block;
    justify-content: center;
    align-items: center;
    width: 80%;
    max-width: 100%;
    max-height: 100%;
}
.index_hero > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    
    background: white;
}



.footer_wrapper {
    padding-bottom: 3em;
    
    font-family: 'Roboto Mono', sans-serif;
}
.footer_chat > a, .footer_cv > a, .footer_portfolio > a {
    color: black;
    text-decoration: none;
}
.footer_chat {
    float: left;
}
.footer_cv, .footer_portfolio {
    float: right;
    padding-left: 3vw;
}



/* phone */
@media (max-width: 1200px) {
    .header {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }

    
    
    .index_wrapper {
        margin-bottom: 50px;
    }
    .index_text {
        padding-right: 0em;
    }
    .index_hero {
        display: none;
    }
    
    
    
    .footer_wrapper {
        padding-bottom: 3em;
    }
    .footer_chat, .footer_cv, .footer_portfolio  {
        float: none;
        padding-left: 0vw;
        padding-bottom: 0.1em;
    }
}