* {
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;
}
}