@font-face { font-family: Chalkboard; src: url('fonts/Chalkboard.ttc'); }
@font-face { font-family: Lora;
src: url('fonts/Lora-VariableFont_wght.ttf'); }
@font-face { font-family: Roboto;
src: url('fonts/Roboto-Regular.ttf'); }

a:link{color: #dfd1e6; text-decoration:none;}
a:visited{color: #dfd1e6; text-decoration:none;}
a:hover {background-color:#49464a ; text-decoration:none;}





/* Mobile */

body {
    
    background-color: #825d8b;
    
    display: grid;
    grid-template-columns: 3% auto 3%;
    
}

.grid-container {
    
    grid-column: 2/3;
    
    display: grid;
    grid-template-rows: 14vh auto 110vh;
    
    border-style: solid;
    border-width: 1.5px;

}


.grid-container .logo{
    grid-column: 1/-1;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: center;

    border-style: solid;
    border-width: 0px;


    
    
    display: grid;
    grid-template-rows: 74.5% 25.5%;
    
    overflow: hidden;

}

.logo .top-flower{
    background-image: url("Pictures/logo.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
    grid-row: 1/2;
}

.logo .name{
    font-family: Lora;
    font-size: 19;
    padding-top: .2vh;
    background-color: #C1BDC3;
    
    -webkit-transform:scale(1.2,1);
    
    
    grid-row: 2/3;
}


.grid-container .header {
    
    grid-column: 1/-1;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    padding: 7px;

    align-items: center;

    Font-size: 14;
    font-family: chalkboard;

    display: grid;
    grid-template-columns: 4fr 6fr 4fr 4fr 4fr; 
    grid-template-rows: 1fr;
  
    Background-color: #000000;
    border-style: solid;
    border-width: 0px;
}

.header .headerHome {
    grid-column: 1 / 2;
    grid-row-start: 1;
    grid-row-end: 1;   
  
    border-style: solid;
    border-width: 0px;

}
.header .headerPage1 {
    grid-column: 2 / 3;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}
.header .headerOrder {
    grid-column: 3 / 4;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}
.header .headerFAQs {
    grid-column: 4 / 5;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}
.header .headerContact {
    grid-column: 5 / 6;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}




.grid-container .main {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 3;
    grid-row-end: 4;
    text-align: center;

    display: grid; 
    grid-template-columns: 100%;
    grid-template-rows: minmax(88%, 88%) minmax(0%, 12%);
    
    

    background-image: url("Pictures/background.png"); 
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  
    border-style: solid;
    border-width: 0px;
 
}


.main .content{
    font-family: roboto;
    text-shadow: .01px .01px #825d8b;
    text-align: left;
    
    grid-row: 1/2;
    
    
    display: grid;
    
    grid-template-rows: 7% minmax(20%) 7% 30%;
    
    grid-auto-columns: 100%;
    grid-auto-rows: auto;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    padding-top: 10px;
    
    
    
}



.content h1{
    text-shadow: 0px 0px pink;
    text-align: center;
    overflow: hidden;
    grid-row: 1/2;
    
    margin: 0px;
    padding: 20px;   
}
.content h2{
    font-family: Chalkboard;
    
    align-self: center;
        
    margin: 0px;
    padding-left: 10px;
    padding-bottom: 4px;
    padding-top: 10px;
}

.content ul{
    
    font-size: 14;
    
    margin: 0;
    padding-bottom: 0px;
    padding-left: 40px;
}
.content .prepareorder{
    
    font-size: 14;
    padding: 0px 24px;
    
}
.content blockquote{
    
    font-family: Roboto;
    margin: 10px 17px;
}



.main .footer {
    
    Font-family: Chalkboard;
    font-size: 12;
    
    grid-column: 1 / -1;
    Grid-row: -2 / -1;


}
br {
    line-height: 6px;
 }



@media(min-width: 600px){
    
    body{
        
        grid-template-columns: 15% auto 15%;
        
    }
    
     .logo .name{
        
        font-size: 21;
        -webkit-transform:scale(1.4,1);
        
    }
    
    .grid-container .header {
        
        font-size: 18;
        
    }
    
    .grid-container .main{


        display: grid;
    
    }
    
    .main .content{
        
        grid-row: 1/2;

        
    }
    
    
    .main .footer {
        grid-row: -2/-1;
        font-size: 16;

    
    }
    
}

@media (max-width: 350px){
    
    .content ul{
    
    font-family: Roboto;
    font-size: 12;
    
    margin: 0;
    padding-bottom: 0px;
    padding-left: 20px;
    
    }
    
    .content h2{
    font-family: Chalkboard;
    font-size: 18;
    
    align-self: center;
    
    margin: 0px;
    padding-left: 8px;
    padding-bottom: 4px;
    padding-top: 5px;
    }
    
    .content .prepareorder{
    
    font-size: 12;
    padding: 0px 9px;
    
    }
.content blockquote{
    font-size: 10;
    margin: 10px 17px;
    }
    
}

@media (min-width: 830px){
    
    .logo .name{
        
        font-size: 22;
        -webkit-transform:scale(1.8,1.2);
        
    }
    
    
    .main .content{
    font-family: Roboto;
    text-shadow: .01px .02px pink;
    text-align: left;
    
    grid-row: 1/2;
    
    
    display: grid;
    
    grid-template-rows: 8% minmax(0%,30%) 8% 30% 14% auto;
    
    grid-auto-columns: 100%;
    grid-auto-rows: auto;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    padding-top: 10px;
    
    
    
    }
    
    .content ul{
    
    font-family: Roboto;
    font-size: 20;
    
    margin-top: 5px;
    padding-bottom: 0px;
    padding-left: 60px;
    
    }
    
    .content h2{
    font-family: Chalkboard;
    font-size: 30;
    
    
    align-self: center;
        
    margin: 0px;
    padding-left: 20px;
    padding-bottom: 4px;
    padding-top: 10px;
    }
    
    .content .prepareorder{
    
    margin-top: 5px;    
    font-size: 20;
    padding: 0px 40px;
    
    }
    .content blockquote{
        
    padding: 5px 10px; 
    text-align: center;
        
    font-size: 20;
    margin: 10px 60px 0px;
        
    border-style: dashed;  
    border-color: gainsboro
    }
     
    
}

@media (min-width: 1110px){
    
    .content blockquote{
        
        padding: 5px 10px; 
        text-align: center;

        font-size: 20;
        margin: 10px 60px 20px;

        border-style: dashed;  
        border-color: gainsboro
    }   
    
    
}