header {
	background: var(--nc-bg-2);
	border-bottom: 1px solid var(--nc-bg-3);
	padding: 0 .5rem;
	margin:0;
	/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */

	/*margin: -2rem calc(50% - 50vw) 2rem;*/

	/* Shorthand for:

	margin-top: -2rem;
	margin-bottom: 2rem;

	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw); 

	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%); */
}

header h1,
header h2,
header h3 {
	padding-bottom: 0;
	border-bottom: 0;
}
header h1 {
	font-weight: 300;
	font-size: 2rem;
	line-height: 1.3;
}
header > *:first-child {
	margin: 4rem 0 0 0;
	padding-top: 0;
	text-align: center;
}

header > *:last-child {
	margin-bottom: -2rem;
}

.logo {
    width: 10rem;
}
.bannerBg {
    background-color: var(--menubg); /* ath nýjan lit */
}
.value, .center {
    text-align: center;
}
.value h1 {
    border-radius: 50%;
    margin: 1rem auto;
    padding: 2.3rem 1rem;
    width: 5rem;
    background-color: var(--val-bg); /* nýr litur */
}
footer {
    margin-top: 2rem;
    border-top: 1px solid var(--nc-bg-3);
    padding-top: 1rem;
}

@media screen and (min-width:48rem) {
    header > *:first-child {
        margin-top: 2rem;
        text-align: center;
    }
    header > *:last-child {
        margin: 5rem 0 -2rem 0;
    }
}
@media screen and (min-width:60rem){
    header > *:last-child {
        margin: 0 0 -3rem 0;
    }
    header h1 {
        font-size: 2.5rem;
    }
}
@media screen and (min-width:80rem){
    header > *:first-child {
        margin-top: 4rem;
    }
    header h1 {
        font-size: 3rem;
    }
}