*{

  Font-family: Chalkboard;


}

@font-face { font-family: Chalkboard; src: url('fonts/Chalkboard.ttc'); }
@font-face { font-family: Lora;
src: url('fonts/Lora-VariableFont_wght.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;

    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(0%, 88%) minmax(0%, 12%);
    
    overflow: hidden;
    

    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{
    
    text-shadow: .01px .01px #825d8b;
    text-align: left;
    
    grid-row: 1/2;
    
    
    display: grid;
    grid-auto-columns: 5% 90% 5%;
    grid-auto-rows: 7% 90% 10%;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    padding-top: 10px;
    
    
    
    overflow: hidden;
}

.content .contact{
    
    font-family: chalkboard;
    text-align: center;

    
    grid-column: 2/3;
    grid-row: 2/3;
    
}



.main .footer {

    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 (min-width: 750px){
    
    .logo .name{
        
        font-size: 22;
        -webkit-transform:scale(1.8,1.2);
        
    }
    
    .content .contact{
    
        font-size: 20;
    
    }
    
}