*{

  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{
    
    grid-row: 1/2;
    
    font-size: 10;

    
    overflow: hidden;
    
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
    
}


.content .left{
    
    grid-column: 1/2;
    
    display: grid;
    grid-template-rows: 2% 4% 15% 4% 13% 4% 30% 6% 20% auto;
    
}

.content .right{
    
    grid-column: 2/3;
    
    display: grid;
    grid-template-rows: 3% 4% 20% 4% 15% 4% 11% 4% auto;
    
    
}

::-webkit-scrollbar {
    width: 0px;
}

.left .q1{
    align-self: center;
    font-style: italic;
    grid-row: 2/3;
}
.left .a1{
    
    padding: 0px 8px;
    grid-row: 3/4;
    
}
.left .q2{
    align-self: center;
    font-style: italic;
    grid-row: 4/5;
    
}
.left .a2{
    padding: 0px 8px;
    grid-row: 5/6;
    
}
.left .q3{
    align-self: center;
    font-style: italic;
    grid-row: 6/7;
    
}
.left .a3{
    padding: 0px 8px;
    grid-row: 7/8;
    
}
.left .q4{
    align-self: center;
    font-style: italic;
    grid-row: 8/9;
    
}
.left .a4{
    padding: 0px 8px;
    grid-row: 9/10;;
    
}
.right .q5{
    align-self: center;
    font-style: italic;
    grid-row: 2/3;
    
}
.right .a5{
    padding: 0px 8px;
    grid-row: 3/4;
    
}
.right .q6{
    align-self: center;
    font-style: italic;
    grid-row: 4/5;
    
}
.right .a6{
    padding: 0px 8px;
    grid-row: 5/6;
    
}

.right .q7{
    align-self: center;
    font-style: italic;
    grid-row: 6/7;
    
}
.right .a7{
    padding: 0px 8px;
    grid-row: 7/8;
    
}

.right .q8{
    align-self: center;
    font-style: italic;
    grid-row: 8/9;
    
}
.right .a8{
    padding: 0px 8px;
    grid-row: 9/10;
    
}



.main .footer {

    font-size: 12;
    
    grid-column: 1 / -1;
    Grid-row: -2 / -1;


}
br {
    line-height: 6px;
 }



@media (max-width: 365px){

    .main .content{
    
        grid-row: 1/2;
    
        font-size: 8;

    
        overflow: hidden;
    
        display: grid;
        grid-template-rows: 100%;
        grid-template-columns: 50% 50%;
    
    }


    .content .left{
    
        grid-column: 1/2;
    
        display: grid;
        grid-template-rows: 2% 4% auto 4% auto 4% auto 4% 20% auto;
    
    }

    .content .right{
    
        grid-column: 2/3;
    
        display: grid;
        grid-template-rows: 3% 4% auto 4% auto 4% auto 4% auto;
    

    
    
    }
    
    
}


@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;
        font-size: 11;
        
    }
    
    
    .main .footer {
        grid-row: -2/-1;
        font-size: 16;

    
    }
    
}


@media (min-width: 795px){
    
    .logo .name{
        
        font-size: 22;
        -webkit-transform:scale(1.8,1.2);
        
    }
    
    .main .content{
        
        font-size: 13;
        
    }
    
    .content .left{
        
        
        grid-template-rows: 2% 4% 15% 4% 13% 4% 27% 6% 20% auto;
        
        
    }
    
    
}

@media (min-width: 1100px){
    
    .main .content{
        
        font-size: 15;
        
    }
    
    
    
    
}