:root {
    --header-height:8vh;
}

.header{
    --text-font-size:1.45em;
    --text-middle-font-size: 1.4em;

    --phone-text-name-font-size:3vw;
    --phone-text-middle-font-size: 1.4em;

    --phone-intermediate-text-name-font-size:0.76em;
    --phone-intermediate-text-middle-font-size: 5.4vw;
    
    --small-phone-text-name-font-size:0.7em;
    --small-phone-text-middle-font-size: 1em;

    --sub-div-width:20%;
    --sub-div-middle-width:45%;
    
    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;
    font-family: var(--secondary-font-family);
}
.header .sub-div:has(#middle)  {
    width:var(--sub-div-middle-width);
}

.header .sub-div .text{
    font-size: var(--text-font-size);
    width:100%;
    text-transform: capitalize;
}
.header .sub-div #left {
    text-align: left;
}


.header .sub-div #middle {
    text-align: center;
    font-size: var(--text-middle-font-size);
    color: var(--primary-color);
    font-weight: bold;
    font-family: var(--primary-font-family);
}

.header .sub-div #right {
    text-align: right;
}


@media only screen and (max-width: 755px) {
    .header .sub-div .text{
        font-size: var(--phone-text-name-font-size);
    }
    .header .sub-div #middle {
        font-size: var(--phone-text-middle-font-size);
    }
}

@media only screen and (max-width: 550px) {
    .header .sub-div .text{
        font-size: var(--phone-intermediate-text-name-font-size);
    }
    .header .sub-div #middle {
        font-size: var(--phone-intermediate-text-middle-font-size);
    }
}

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

.vertical-space#title-bottom{
    height:5vh;
}