* { 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; } body { background-color: white; } header { margin-top: 1em; padding-bottom: 2em; padding-top: 1em; background-color: #9f5470; background-color: pink; color: white; a { color: white; } a.exposed, span.exposed { 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; padding-bottom: 6em; span { -webkit-animation: exposed 1s ease forwards; } span.exposed { position: absolute; top: 4rem; } @keyframes exposed { from { position: relative; top: 0; } to { position: absolute; top: 4rem; } } @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; } }