* { box-sizing: border-box; } html { font-family: "Coelacanth", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; font-size: x-large; } a { text-decoration: none; } a.exposed, span.exposed { font-weight: bold; font-size: 1.1em; } a:visited { } .path { display: inline; } .hero { padding: 3em 0; text-align: center; .title { font-weight: bold; font-size: 3em; } } body { background-color: white; } header { margin-top: 1em; padding-bottom: 2em; padding-top: 1em; background-color: #9f5470; background-color: pink; background: linear-gradient(to top right, rgba(232, 97, 9, 1), rgba(237, 94, 174, 1)); color: white; a { color: white; } span.exposed span.title { font-weight: bold; font-size: 1.8em; } a:visited { font-weight: bold; } div.title-bar { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; @media (min-width: 1200px) { margin: auto; } img { height: 88px; } * { padding: 0.5em; } } div.description { display: inline; font-style: italic; font-size: smaller; } nav { position: relative; display: flex; align-items: baseline; justify-content: space-around; max-width: 1200px; .exposed { font-weight: bold; font-size: 1.3em; } @keyframes exposed { from { position: relative; top: 0; } to { position: absolute; top: 5rem; } } @media (min-width: 1200px) { margin: auto; } } } main { max-width: 1200px; @media (min-width: 1200px) { margin-left: auto; margin-right: auto; } background-color: white; padding: 1em; border-top-left-radius: 1em; border-top-right-radius: 1em; margin-top: -2em; margin-left: 1em; margin-right: 1em; *:nth-child(1) { margin-top: 0; } }