@media (max-width: 63.5rem) {
    :root {
	--logo-size: var(--space-7);
	--nav--justify-content: flex-end;
	--nav-toggler--display: inline;
	--nav-item-list--display: none;
	--nav-item-list--position: absolute;
	--nav-item-list--list-style-type: none;
	--nav-item-list--background-color: var(--color-neutral-lightest);
	--nav-item-list--li--color: black;
	--nav-item-list--li--display: block;
	--nav-item-list--li--margin: 0;
	--nav-item-list--li--padding: var(--space-2) var(--space-4);
	--nav-item-list--li--hover--background-color: var(--color-neutral-darkish);
	--nav-item-list--li--font-size: var(--font-size-7);
	--nav-item-list--li--width: 100vw;
    }
}

@media (min-width: 63.5rem) {
    :root {
	--logo-size: var(--space-7);
	--nav--justify-content: space-around;
	--nav-toggler--display: none;
	--nav-item-list--display: block;
	--nav-item-list--position: static;
	--nav-item-list--list-style-type: initial;
	--nav-item-list--background-color: none;
	--nav-item-list--li--color: var(--color-4);
	--nav-item-list--li--display: inline;
	--nav-item-list--li--margin: 0;
	--nav-item-list--li--padding: 0 var(--space-1);
	--nav-item-list--li--hover--background-color: none;
	--nav-item-list--li--font-size: var(--font-size-3);
	--nav-item-list--li--width: auto;
    }
}

header {
    display: flex;
    flex-direction: row;
    background-color: var(--color-neutral-dark);
    height: var(--logo-size);
    padding: 0;
    margin: 0;
}

.branding {
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0 var(--space-1) 0 0;
}

.branding-column {
    display: flex;
    flex-direction: column;
}

.branding-main-text {
    font-size: var(--font-size-3);
    font-family: 'Fjalla One', sans-serif;
    color: var(--color-2);
}

.branding-sub-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.branding-sub-text-section {
    font-size: var(--font-size-1);
    font-family: 'Open Sans', sans-serif;
    color: var(--color-4);
    padding: 0 var(--space-1) 0 0;
}

.branding svg {
    height: var(--logo-size);
    width: var(--logo-size);
    padding: var(--space-1);
}

a.branding {
    text-decoration: none;
}

nav {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: var(--nav--justify-content);
    align-items: center;
    flex-grow: 1;
}

.nav-toggler {
    display: var(--nav-toggler--display);
    margin: 0;
    background-color: var(--color-neutral-light);
    height: 100%;
    width: 11rem;
    border-style: none;
    box-shadow: none;
}

.nav-toggler:hover {
    cursor: pointer;
    background-color: var(--color-neutral-lightest);
}

.nav-toggler img {
    width: 100%;
    height: 100%;
}

.nav-item-list {
    display: var(--nav-item-list--display);
    position: var(--nav-item-list--position);
    top: 100%;
    right: 0;
    margin: 0;
    padding: 0;
    list-style-type: var(--nav-item-list--list-style-type);
    background-color: var(--nav-item-list--background-color);
}

.nav-item-list {
    z-index: 2;
}

.nav-item-list.visible {
    display: block;
}

.nav-item-list li {
    display: var(--nav-item-list--li--display);
    width: var(--nav-item-list--li--width);
    font-family: 'Open Sans', sans-serif;
    font-size: var(--nav-item-list--li--font-size);
    color: var(--nav-item-list--li--color);
    margin: var(--nav-item-list--li--margin);
    padding: var(--nav-item-list--li--padding);
}

.nav-item-list li.active {
    color: var(--color-2);
}

.nav-item-list li:hover {
    color: var(--color-1);
    background-color: var(--nav-item-list--li--hover--background-color);
}

a.nav-item-link {
    text-decoration: none;
}