.site-header {
    background:linear-gradient(
            135deg,
            #111 0%,
            #1b1b1b 50%,
            #111 100%
        );
    border-bottom: 4px solid #d62828;
    border-radius: 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1400px;
    margin: auto;
    padding: 10px 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo {
    display: flex;
    align-items: center;
    gap: 15px;

    text-decoration: none;
}

#logo img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #d62828;
    object-fit: cover;
}

.band-name {
    display: block;

    font-family: 'Righteous', cursive;
    font-size: 2rem;

    color: #f5e6c8;
    letter-spacing: 2px;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #d62828,
        0 0 20px #d62828;
}

.tagline {
    display: block;

    font-family: 'Oswald', sans-serif;
    color: #c0c0c0;
    font-size: .85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
#menu ul {
    display: flex;
    gap: 30px;
    list-style: none;
}

#menu a {
    color: #f5e6c8;

    text-decoration: none;

    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;

    position: relative;

    transition: .3s;
}

#menu a::after {
    content: '';

    position: absolute;
    bottom: -8px;
    left: 0;

    width: 0;
    height: 2px;

    background: #d62828;

    transition: .3s;
}

#menu a:hover {
    color: #d62828;
}

#menu a:hover::after {
    width: 100%;
}
.band-name {
    color: #f5e6c8;

    text-shadow:
        0 0 5px #fff,
        0 0 10px #d62828,
        0 0 20px #d62828;
}
.site-header {
    box-shadow:
        0 4px 20px rgba(214,40,40,.3);
}