body {
background-color: #000000;
color: #FFFFFF;
color: #F5F5DB;
margin: 0;
font-family: 'Niconne', cursive;
font-family: 'Fondamento', cursive;
font-family: 'Delius Swash Caps', cursive;
}
.clear {
clear: both;
}
div#main h1 {
background-image: url('/patisseriejuju.jpg');
height: 195px;
width: 850px;
background-position: 0px -18px;
margin: 112px auto 28px;
text-indent: -10000px;
background-size: 850px;
}
div#main p {
/*text-align: center;*/
/*background-image: url('/orders.png');*/
/*background-position: top center;*/
/*background-repeat: no-repeat;*/
/*text-indent: -10000px;*/
/*height: 77px;*/
}
div#main {
text-align: center;
}
div#main a {
color: #F5F5DB;
font-size: 38px;
display: inline-block;
padding: 10px;
text-decoration: none;
}
div#main div {
/*margin: 0 0 139px 0;*/
}
section#cakes {
padding: 40px 0;
}
section#cakes > div {
max-width: 1000px;
margin: 0 auto;
border-top: 1px solid #F4F4DA;
}
section#cakes h2 {
font-size: 41px;
/*text-align: center;*/
margin: 40px 0 10px;
padding: 0;
}
section#cakes p {
margin: 0 0 20px 0;
font-size: 19px;
line-height: 26px;
display: none;
}
section#cakes a {
color: #F5F5DB;
display: inline-block;
padding: 5px 10px;
border: 1px solid #F5F5DB;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}
section#cakes a:hover {
background-color: #F5F5DB;
color: #000000;
}
.photos {
width: 1000px;
margin: 40px auto 0;
display: flex;
flex-wrap: wrap;
/*display: none;*/
}
.photos img {
width: 100%;
height: auto;
height: 100%;
flex: 20%;
max-width: 20%;
cursor: pointer;
}
section#madeleines {
padding: 40px 0;
}
section#madeleines > div {
max-width: 1000px;
margin: 0 auto;
border-top: 1px solid #F4F4DA;
}
section#madeleines h2 {
font-size: 41px;
/*text-align: center;*/
margin: 40px 0 10px;
padding: 0;
}
section#madeleines p {
margin: 0 0 20px 0;
font-size: 19px;
line-height: 26px;
display: none;
}
section#madeleines a {
color: #F5F5DB;
display: inline-block;
padding: 5px 10px;
border: 1px solid #F5F5DB;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}
section#madeleines a:hover {
background-color: #F5F5DB;
color: #000000;
}
section#juju {
padding: 40px 12px;
margin: 0 0 120px 0;
height: 400px;
}
section#juju > div {
max-width: 1000px;
margin: 0 auto;
border-top: 1px solid #F4F4DA;
}
section#juju h2 {
font-size: 41px;
/*text-align: center;*/
margin: 40px 0 10px;
padding: 0;
}
section#juju p {
margin: 0 0 20px 0;
font-size: 19px;
line-height: 26px;
text-indent: 24px;
/*display: none;*/
}
section#juju a {
color: #F5F5DB;
display: inline-block;
padding: 5px 10px;
border: 1px solid #F5F5DB;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}
section#juju a:hover {
background-color: #F5F5DB;
color: #000000;
}
section#juju img {
width: 300px;
height: auto;
float: left;
margin: 40px 40px 0 0;
}
@media only screen and (max-width: 1000px) {
.photos {
width: 800px;
}
div#main h1 {
height: 150px;
width: 600px;
margin: 79px auto 0;
background-size: 600px;
background-position: 5px 4px;
}
section#cakes div h2, section#madeleines div h2 {
padding: 0 40px !important;
}
section#cakes div a, section#madeleines div a {
margin-left: 40px;
}
}
@media only screen and (max-width: 830px) {
.photos {
width: auto;
}
}
@media only screen and (max-width: 600px) {
div#main h1 {
height: 130px;
width: 480px;
margin: 79px auto 0;
background-size: 480px;
background-position: 5px 4px;
}
.photos img {
flex: 50%;
max-width: 50%;
}
div#main a {
font-size: 22px;
padding: 5px;
}
}
@media only screen and (max-width: 480px) {
div#main h1 {
height: 85px;
width: 320px;
margin: 37px auto 0;
background-size: 320px;
background-position: 5px 4px;
}
}
@media only screen and (max-width: 360px) {
div#main h1 {
height: 79px;
width: 280px;
margin: 37px auto 0;
background-size: 280px;
background-position: 5px 4px;
}
div#main p {
background-position: top center;
background-size: 280px;
}
}