header { margin: -25px -25px 0px -25px; background: $background_accent_1; padding: 20px 30px; box-shadow: 5px 5px 5px 10px $background_accent_1; h1 a, h1 a:hover, h1 a:link, h1 a:visited { font-family: $headline_font, sans-serif; color: $font_accent_1; margin: 0; font-weight: bold; font-size: $font_size_h1; text-decoration: none; } nav ul { font-size: $font_size_default; list-style: none; margin: 0; padding: 0; a, a:link, a:visited { color: $font_accent_2; text-decoration: none; background: $shadow_accent_1; padding: 8px 24px; border-radius: 5px; text-transform: $menu_text_transform; } a:hover, a:active { color: $font_accent_2_hover; box-shadow: 0px 0px 1px 1px $shadow_accent_1; } li { display: inline; margin: 0 8px 0 0; padding: 0; } } } @media (min-width: $large_view) { header { max-width: $large_min_width; margin: auto; box-shadow: 0px -10000px 0px 10000px $background_accent_1; h1 a, h1 a:hover, h1 a:link { font-size: $font_size_h1_large; } nav ul { font-size: $font_size_default_large; } } } @media (max-width: $mobile_view) { header { h1 a, h1 a:hover, h1 a:link { font-size: $font_size_h1_mobile; } nav ul { font-size: $font_size_default_mobile; a, a:link, a:visited { display: block; padding: 5px 8px; margin: -6px 0px; } } } } @media (max-width: $tiny_view) { header { h1 a, h1 a:hover, h1 a:link { font-size: $font_size_h1_tiny; } nav ul { font-size: $font_size_default_tiny; } } } @media (max-width: $pico_view) { header { h1 a, h1 a:hover, h1 a:link { font-size: $font_size_h1_pico; } } }