• { margin: 0; }

html, body { height: 100%; }

body { font-family: Arial, Helvetica, sans-serif; background-color: #999; }

p { margin: .5em 0 .5em 0; }

header { display: block; position: fixed; top: 0; left: 0; width: 100%; background-color: #a493c0; padding: 10px; }

nav a:visited, nav a:link { color: #fff; text-decoration: none; }

nav>ul { display: inline; padding: 0; }

nav>ul>li { display: inline-block; list-style: none; margin: 0 5px 0 5px; }

main { display: block; background-image: url("images/background.png"); padding-top: 3em; padding-bottom: 3em; min-height: 85%; }

footer { padding: 15px; }

aside, article { padding: 2em; }

aside { text-align: center; }

article { width: 75%; }

.columns { display: flex; }

@media only screen and (min-width: 768px) { main { display: flex; } aside { margin-left: 2%; } .columns-desktop { display: flex; } }

/* Pies */

.pie { width: 200px; padding: 10px; margin: 10px; background-color: #fff; border: solid 1px #ccc; }

.pie img { width: 100%; }

.pie .title { font-weight: bold; }

.pie .columns { width: 100%; }

.pie .price { text-align: right; }

.pie .columns div { width: 50%; }

.pie button { background-color: #f6aeae; padding: 10px; border: solid 1px #f6aeae; border-radius: 3px; color: #fff; }