:root { --wrap: 60rem; --red: #b52637; } @font-face { font-family: moderat; src: url(moderat.otf); } html { scroll-behavior: smooth } body { margin: 0; font-family: moderat, sans-serif; font-size: 15pt; } a { color: var(--red); text-decoration: none; } a:hover { text-decoration: underline } ul, ol { padding-left: 1em } table { margin-left: -1em } td { padding: 0 1em } header { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 0 1em; } header *:last-child { margin-bottom: auto } header .logo { width: 100%; height: 5rem; text-align: right; margin: 2rem 2rem auto 0; } header .logo img { height: 100% } header .title { display: flex; align-items: flex-end; border-bottom: 3px solid var(--red); column-gap: 3rem; } header .title img { max-height: 15rem; max-width: 100%; margin: 2rem; } header h1 { font-size: 4em; } header p { font-size: 1.3em } nav { margin: 4rem auto; font-size: 1.2rem; } nav ul { display: flex; justify-content: center; flex-wrap: wrap; list-style-type: none; padding: 0; } nav ul li a { display: block; margin: .25em; padding: .5em .8em; background-color: #fff; border: 1px solid #000; border-radius: .5em; text-decoration: none; color: inherit; } nav ul li a:hover { background-color: var(--red); border-color: var(--red); color: #fff; text-decoration: none; } main { max-width: var(--wrap); margin: 0 auto; margin-bottom: 10rem; padding: 0 1em; line-height: 1.5; } main h2, main h3 { color: var(--red) } main h2 { margin-top: 3rem; padding-top: 3rem; font-size: 2em; } main h2:first-child { margin-top: 0 } main h3 { margin-top: 2em } footer { height: 15rem; text-align: center; margin-bottom: 10rem; } footer img { height: 100% } @media only screen and (max-width: 1000px) { header .title { flex-direction: column-reverse; align-items: center; } header h1 { font-size: 2em } nav { max-width: 20em; width: 90%; } nav ul { flex-direction: column; align-items: stretch; } }