/* Header Styling */

/*
 * RGB(255, 165, 0) is the default orange color
 * '5' is how much percent of the header gradient will be colored
 E.g. 2 will make the header show color on the left 50%
 */
.site-header {
    text-align: center;
/*    line-height: 1.7em;*/
    background-color: var(--header-background-color);
    position: relative;
    margin-bottom: 20px;
}

.site-header .wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 90%;
    max-width: var(--header-content-width);
}

.site-header a {
    text-decoration: none;
}

.site-header p {
    margin: 0;
}

.site-header .site-name {
    color: var(--theme-color);
/*    line-height: 1.2em;*/
}

.site-header .site-name:hover {
    color: var(--theme-color-adjusted);
}

.site-header .site-description {
    display: none;
    color: #ddd;
}

.site-header nav {
    margin-top: 10px;
}

.site-header nav li {
    display: inline-block;
    margin: 0 4px 16px 4px;
}

.site-header nav li a {
    color: var(--header-background-color);
    border-radius: 8px;
    padding: 8px 16px;
    /*    line-height: 34px;*/
}

.site-header nav li i {
    margin-right: 3px;
}

.site-header nav li.selected a {
    font-weight: bold;
}

.clear {
    clear: both;
}

@media (min-width: 655px) {
    .site-header {
        text-align: left;
    }
    
    .site-header .text-container {
        float: left;
        max-width: 40%;
        margin-top: 20px;
    }
    
    .site-header nav {
        float: right;
        max-width: 50%;
        margin-top: 20px;
    }
    
    .site-header .site-description {
        display: block;
    }
}