@charset "UTF-8";

body {
margin: 0.0em;
background-color: #eee;
font-family: sans-serif;
}

p {
font-size: 1.0em;
}

h1 {
font-size: 2.0em;
}

h2 {
font-size: 1.7em;
}

h3 {
font-size: 1.4em;
}

h4 {
font-size: 1.2em;
}

ul {
font-size: 1.0em;
}

ol {
font-size: 1.0em;
}

ol li {
margin: 0.8em;
}

a {
color: deepskyblue;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
max-width: 100%;
height: auto;
}

/* --------------------------------- */

nav ul {
margin: 0.0em;
overflow: hidden;
background-color: deepskyblue;
}

nav li {
float: left;
list-style: none;
}

nav a, nav span {
display: block;
padding: 0.8em;
text-align: center;
font-weight: bold;
color: white;
}

nav span {
background-color: skyblue;
}

nav a:hover {
text-decoration: none;
background-color: lightblue;
}

#top {
background-color: white;
}

#logo {
margin-left: 0.5em;
font-size: 4.0em;
color: black;
font-family: cursive;
}

#top a:hover {
text-decoration: none;
color: deepskyblue;
}

#logo-second {
font-size: 0.75em;
font-weight: bold;
color: deepskyblue;
font-family: sans-serif;
}

/* --------------------------------- */

main {
display: flex;
flex-flow: row wrap;
margin: 0.0em auto;
margin-bottom: 0.8em;
margin-top: 0.5em;
max-width: 65em;
}

article {
flex: 2.5 1 0%;
margin: 0.2em;
background-color: #eee;
}

section {
border: 1px solid #ddd;
margin-bottom: 0.0em;
padding-right: 2.0em;
padding-left: 2.0em;
background-color: white;
}

aside {
flex: 1 1 0%;
border: 1px solid #ddd;
margin: 0.2em;
padding-right: 1.0em;
padding-left: 1.5em;
background-color: white;
}

#cake-list {
font-weight: bold;
max-height: 25em;
background-color: skyblue;
}

#cake-list a {
color: white;
}

.center {
text-align: center;
}

.right {
text-align: right;
}

.bar {
margin-bottom: 0.5em;
margin-top: 0.5em;
height: 0.5em;
background-color: skyblue;
}

.ingredient-list p {
border-bottom: 1px solid #bbb;
padding-left: 0.8em;
}

/* --------------------------------- */

footer {
font-size: 0.8em;
font-weight: bold;
padding-left: 2.8em;
padding-right: 2.8em;
padding-bottom: 0.7em;
padding-top: 0.7em;
color: black;
background-color: deepskyblue;
}

footer a {
padding-right: 1.5em;
color: white;
}

.right-side {
float: right;
}