.title-space .horizontal-center {
    width:100%;
    height:100%;
}

:root {
    --title-height:70vh;
}
.title-block {
    height: var(--title-height);
    width:100%;
    --text-font-size:4vw;
    --text-middle-font-size:4.1em;
    --text-name-font-size:2.5em;

    --phone-text-middle-font-size: 10vw;
    --phone-text-name-font-size:6vw;

    --small-phone-text-middle-font-size: 9.8vw;
    --small-phone-text-name-font-size:6vw;
    
}
.title-block .horizontal-center {
    width: 100%;
    height:100%;
}
.title-block .horizontal-center .vertical-space-evenly {
    
    height: 100%;
}
/*
.header{
    --text-font-size:2.5vw;
    --text-middle-font-size:3em;
    --sub-div-width:20%;
    --sub-div-middle-width:45%;
    --text-spacer-size: calc(calc(var(--header-height) - var(--text-font-size)) / 2);
    --text-middle-spacer-size: calc(calc(var(--header-height) - var(--text-middle-font-size)) / 2);
    width:100%;
    height:var(--header-height);
    background-color: var(--background-color);
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    display:flex;
    justify-content: space-evenly;
    font-family: var(--primary-font-family);
    
}
    */
.header a {
    text-decoration: none;
    color:black;
    line-height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.header .sub-div {
    display:inline-flex;
    justify-content: space-evenly;
    flex-direction: column;
    width:var(--sub-div-width);
    height: inherit;
    margin:0;
    background-color: transparent;

}
.header .sub-div:has(#middle)  {
    width:var(--sub-div-middle-width);
}
.header .spacer {
    height:var(--text-spacer-size);
    width:100%;
}
.title-block .text{
    font-size: var(--text-font-size);
    width:100%;
    text-transform: capitalize;
    text-align: center;
}



.title-block #portfolio {
    font-size: var(--text-middle-font-size);
    color: var(--primary-color);
    font-weight: bold;
}
.title-block #name {
    font-size: var(--text-name-font-size);
    color: black;
}

@media only screen and (max-width: 640px) {
    .title-block #portfolio {
        font-size: var(--phone-text-middle-font-size);
    }
    .title-block #name {
        font-size: var(--phone-text-name-font-size);
    }
}

@media only screen and (max-width: 390px) {
    .title-block #portfolio {
        font-size: var(--small-phone-text-middle-font-size);
    }
    .title-block #name {
        font-size: var(--small-phone-text-name-font-size);
    }
}