header {
    /* position: fixed; */
    display: flex;
    width: 100%;
    padding: 0.4rem 1rem 0.6rem;
    justify-content: space-between;
    background: var(--hf-bkg-color, rgba(50,50,50,0.9));
    align-items: center;
    z-index: 9;
}
nav a {
    background-color: var(--color2);
    border-radius: var(--bor-rad, 8px);
    color: var(--off-white);
    font-size: 0.9rem;
    margin-left: 10px;
    padding: 4px 10px;
    text-decoration: none;
}
.logo {
    background-color: var(--bkup-color, #764ba2);
    border-radius: var(--bor-rad, 8px);
    color: var(--off-white, #fff);
    display: flex;
    align-items: center;
    padding: 5px;
}

footer {
    background: var(--hf-bkg-color);
    color: var(--color2);
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 1rem 5rem;
    text-align: center;
    font-size: 0.9rem;
}
footer a {
    color: var(--color2, #667eea);
    margin-left: 1rem;
}