$header-width: 1400px; $main-width: 720px; body { min-height: 100vh; margin: 0; background: url(/body-bg.svg) top center no-repeat #d22d40; background-size:100% auto; color: #fff; font-size: 1.3em; a { text-decoration: none; } } header { display: flex; justify-content: space-between; align-items: center; max-width: $header-width; margin: 0 auto; padding: 2em 1em; font-size: 1.35em; img { width: 250px; } h1 { font-size: inherit; } #menu { width: 250px; text-align: right; } } main { max-width: $main-width; padding: 1em; margin: 0 auto; h2 { font-size: 3em; } } main#index { max-width: $header-width; display: flex; align-items: center; justify-content: space-between; background: url(/index-bg.png) center center no-repeat; background-size: contain; padding: 2em 1em; section, aside { max-width: 35%; } aside { display: flex; flex-direction: column; align-items: stretch; a { text-align: center; border: 2px solid #fff; border-radius: .8em; margin-bottom: 1.5em; padding: .6em 1.5em; color: #fff; &:hover { background: #fff; color: #b52637; } } } }