html, body {
padding: 0;
margin: 0;
background-color: #f8fdfa;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
color: #555;
}
header {
background-color: rgba(0,87,75,0.7);
color: #f8fdfa;
padding: 15px;
display: flex;
align-items: center;
font-size: 1.1em;
font-variant: small-caps;
z-index: 1;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
}
header a {
color: inherit;
display: inline-block;
padding: 15px;
text-decoration: none;
}
header span {
flex: 1;
font-weight: bold;
font-size: 3em;
}
#hamburger, #hamburger-label {
display: none;
}
a:hover {
color: #D81B60;
}
a {
text-decoration: none;
color: #008755;
}
footer {
background-color: #008577;
color: #e8edea;
padding: 15px;
margin-top: 5em;
}
footer > * {
width: 900px;
margin: auto;
}
footer a {
color: inherit;
text-decoration: underline;
}
footer p {
text-align: justify;
}
.footer-flex {
display: flex;
flex-direction: row;
}
.footer-flex p:first-child {
flex: 1;
}
#page {
flex: 1;
}
#hero {
background: url('/images/screen.png') no-repeat -50px -100px #dde2dd;
padding: 15px;
padding-left: 600px;
padding-bottom: 60px;
color: #f8fdfa;
position: relative;
top: -140px;
left: 0px;
}
#hero h1 {
text-align: left;
font-size: 2em;
font-weight: bold;
font-family: sans;
text-shadow: 2px 2px #00574B;
margin-top: 8em;
}
#hero ~ *:first-child {
margin-top: 10em;
}
#hero nav {
display: flex;
align-items: center;
align-content: center;
color: #D81B60;
font-size: 3em;
}
#hero nav span {
padding-left: 20px;
padding-right: 20px;
}
#hero img {
width: 180px;
}
h1 {
text-align: center;
font-size: 2.5em;
color: #D81B60;
}
h2 {
font-size: 2em;
color: #D81B60;
text-align: center;
}
p {
text-align: center;
}
p, .article {
font-size: 1.1em;
}
h3 {
font-size: 1.5em;
text-align: left;
padding: 10px;
margin: 10px;
border-bottom: 3px solid #D81B60;
}
.article h2 {
font-size: 2em;
text-align: left;
border-bottom: 3px solid #D81B60;
color: inherit;
padding: 0px;
margin: 0px;
}
.article h3 {
border: none;
font-size: 1.5em;
text-align: left;
color: #D81B60;
padding: 0px;
margin: 0px;
}
#features {
display: flex;
flex-direction: row;
width: 900px;
margin: auto;
}
#features div {
flex: 1;
}
#features ul {
list-style: none;
padding: 0;
}
#features li {
padding: 10px;
font-size: 1.1em;
}
#content p {
margin-bottom: 3em;
}
.article {
width: 900px;
margin: auto;
}
.article p {
text-align: justify;
line-height: 1.5em;
}
.article h2 {
text-align: left;
}