header { width: 98vw; margin-left: auto; margin-right: auto; div { display: flex; min-height: 5em; align-items: center; justify-content: space-between; svg { margin-left: 0.2vw; width: auto; height: 2.5rem; filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1)); path { fill: var(--logo-color) !important; } } div { display: flex; flex-wrap: wrap; text-shadow: 0px 4px 4px var(--shadow-color); font-size: 1rem; a { margin-left: .8rem; } } } hr { } } @media (min-width: 640px) { header { max-width: 640px; div { svg { width: auto; height: 3rem; } div { font-size: 1.2rem; } } } } @media (min-width: 768px) { header { max-width: 768px; div { svg { width: auto; height: 4rem; } div { font-size: 1.4rem; } } } } @media (min-width: 1024px) { header { max-width: 1024px; div { svg { width: auto; height: 5rem; } div { font-size: 1.6rem; } } } } @media (min-width: 1280px) { header { max-width: 1280px; div { svg { width: auto; height: 6rem; } div { font-size: 1.8rem; } } } } @media (min-width: 1920px) { header { max-width: 1920px; div { svg { width: auto; height: 7rem; } div { font-size: 2rem; } } } }