$header-width: 1560px; $main-width: 1024px; .visible { display: initial; } body { margin: 0; color: #fff; font-size: 1.3em; height: 100vh; background: url(/body-bg.svg) #d22d40; background-position: top center; background-size: cover; background-repeat: no-repeat; a { text-decoration: none; } } nav { display: 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; color: #fff; } #menu { width: 250px; text-align: right; } } main { max-width: $main-width; padding: 1em; margin: 0 auto; h2 { font-size: 3em; } } body.index { background-image: url(/index-bg.png), url(/body-index-bg.svg); background-position: center center, top center; background-size: 30em auto, cover; main { max-width: $header-width; display: flex; align-items: center; justify-content: space-between; padding: 2em 1em; section, aside { max-width: 35%; } section{ text-shadow: 0px 3px 8px rgba(0, 0, 0, .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; } } } } }