.site-header {
    /* position */
    height: 14rem;
    /*grid-row: 1 ;
    grid-column: 1 / -1;*/
  width: 100%;  
  padding: 0rem calc((100vw - 70rem) / 2);

    /* decor */
    background: linear-gradient(
        rgba(49, 23, 66, 0.613), 
        rgba(93, 31, 131, 0.894)
	), url('/images/navbar.JPG');
  background-size: cover;
  background-position: 0 75%;
  /*align-items: center;*/
    border-bottom: 0.75rem solid #1c1a20;

}

.site-header h1 {
    /* position */;
    grid-row: 1;
    padding-top: 1rem;

    /* decor */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #9d9d9d;
    text-decoration: underline;
    text-decoration-color: #676767;

    /* font */
    font-size: 4.5rem;
    font-family: "Noto Serif", serif;
}

.site-header a {
  color: #8f80b6;
}

.site-header nav {
    /* position */
    grid-column: 2 / 3;
    grid-row: 2;
    margin-top: 1rem;
}

.site-header nav ul {
    /* position */
    display: flex;
    grid-column: 2 / 2;
    border-radius: 1rem;
    overflow: hidden;
    border-bottom: .2rem inset #373342;

/* decor */
    list-style: none;    
    background: transparent;
    border-bottom: .2rem inset #373342;
    border-right: .125rem inset #383443;
}

.site-header nav li {
    flex-grow: 1;
    text-align: center;
    text-decoration: none;
    padding: .75rem .75rem;
    text-decoration: none;
    border-right: .125rem inset #383443;
    background: #413c52; /* Slightly different background for buttons */
    transition: background-color 0.3s;
}

.site-header nav li:hover { /* Hover effect */
    background-color: #565264;
}