/* bakgrundsbild */
body,htmlbody,html
{
    height: 100%;
    margin: 0;
    background-position: center;
    background-image: url("../Images2/CupCakes13c.jpg");
    background-repeat: repeat;
    background-size: cover;
    
}
/* justeringar för vanlig skärm */
@media only screen and (min-width:601px)
{
 /*Produkterna ska visas på rad så många som får plats*/   
.products
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/*bilderna begränsas till 30%*/
.cakes
{
    max-width: 30%;
    max-height: auto;
}
 /* länkarna i foten ska vara på rad*/
.footer
    {
        flex-direction: row;
    }
    
}
/* justeringar för mobil*/
@media only screen and (max-width:600px)
{
    /*Produkterna ska visas i en kolumn*/   
    .products
    {
        display: flex;
        flex-direction: column; justify-content: center;
        align-items: center;
    }
   /*bilderna får inte vara för små, kunden måste kunna se även om skärmen är liten*/
    .cakes
    {
        max-width: 80%;
        max-height:  auto;
        
    }
 /* länkarna i foten visas i en kolumn */
 .footer
    {
        flex-direction: column;
    }

}
/*Rubrikformatering*/
h2{
    font-size:xx-large;
    font-weight: bolder;
    color:crimson;
    margin-left: 20px;
}
/*Meny*/
.menu
{
    max-width: 100%;
    height: 2%;
    margin-top: 5px;
  
}
/* formatering av menylänkarna*/
.startlink
{
    color:crimson;   
    margin-left: 20px;
    max-width: 100%;
    max-height: auto;
    text-decoration: none;
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
}
/* Shopsidan är så stor så man kan välja vilken del man vill komma till i en dropdownmeny i form av en knapp*/
.dropbtn
{
    color:crimson;
    cursor: pointer;
    background-color: rgba(0,0,0,0);;
    margin-left: 20px;
    font-size: 16px;
    border-style: none;
    font-weight: bold;
}
 
.dropdown
{
    position: relative;
    display: inline-block;
}

  .dropdown 
  {
    position: relative;
    display: inline-block;
  }
.dropdown-content
{
    display: none;
    position: absolute;
    background-color:rgba(240,248,245,0.9);
    color: crimson;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
    z-index: 1;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.dropdown-content a
{
    color:crimson;
    padding: 12px 16px;
   text-decoration: none;
   font-weight: bolder;
    display: block;
}
.show{display: block;}

.shop
/*huvudelementen på sidan (meny, de tre kategorierna och foten ska visas i en kolumn*/
{
display: flex;
flex-direction: column;
}
/*kakbilden ska fylla 75% av rutan med info*/
.photo
{
    width: auto;
    height: 75%;
    border-radius: 5%;
}
/*formatering av info om produkten*/ 
/*bilden*/
.cakes
{
    display:flex;
    flex-direction: row;
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-color:crimson;
    border-radius: 5%;
    margin: 10px;
}
/*placering av text*/
.info
{
   text-align: center;
   margin: 10px;
   
}    
/*formatering av rubrik*/
.info >h3
{
    font-size: 27px;
    margin: 0px;
 }
/*texten*/
.info >p{
   
    margin: 0px;
}
/*köpknappen (som bara visar ett meddelande)*/
.info >button
{
    background-color: crimson;
    border-style: none;
    color:aliceblue;
    font-size: 20px;
    margin: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10%;
}
/* delarna av foten som är lika oavsett enhet */
.footer
{
    padding: 1%;
    background-color: lavender;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 2px;
    width: 100%;
    height: auto;
}
/* Formatering av länkarna i foten* /
.contactlinks
{
    flex-direction: row;
    justify-content: center;
    text-align: center;
    vertical-align: center;
}