* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999;
}
p {
margin: 0.5em 0 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;
}
}
/* Pie */
.pie {
width: 200px;
padding: 10px;
margin: 10px;
background-color: #fff;
border: solid 1px #ccc;
}
.pie img {
width: 100%;
}
.pie .title {
font-weight: bold;
}
.pie .price {
text-align: right;
}
.pie .columns {
width: 100%;
}
.pie .columns div {
width: 50%;
}
.pie button {
background-color: #f6aeae;
padding: 10px;
border: solid 1px #f6aeae;
border-radius: 3px;
color: #fff;
}