.headerContainer {
    position: fixed;
    display: flex;
    flex-direction: row;
    z-index: 10;
    width: 96%;
    height: 10vh;
    background-color: var(--RTN-SETTING_css-backgroundColor);
    border: solid 0.5vmin black;
    outline: solid 4vw transparent;
    padding: 1%;
    align-items: center;
    justify-content: center;
}

.headerTitle { /* The main title "Rapid Tree Notetaker" */
    width: 50%; 
    height: 100%;
    display: inline;
    align-items: center;
    justify-content: left;
    vertical-align: middle;
    color: var(--RTN-SETTING_css-textColor);
    font-size: 4vw;
}

.headerElement { /* The buttons and image in the header bar */
    width: 10%;
    height: 100%;
    display: inline;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    border: none;
    background-color: var(--RTN-SETTING_css-backgroundColor);
    box-shadow: none;
    color: var(--RTN-SETTING_css-textColor);
    padding: 0.25vmin;
}

.headerElement * {
    width: 100%;
    height: 100%;
    display: inline;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    background-color: var(--RTN-SETTING_css-backgroundColor);
    font-size: 2.5vmin;
    white-space: nowrap;
    color: var(--RTN-SETTING_css-textColor);
    
}

.headerElement button { /* Only add a border if it is a button, DO NOT add it for the image */
    border: solid 0.5vmin black;
    cursor: pointer;
}
.headerElement button:hover { /* Only add a border if it is a button, DO NOT add it for the image */
    border: solid 0.5vmin grey;
    cursor: pointer;
}

.headerSpacer {
    height: 17vh;
}