*{

  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%, 44%) minmax(0%, 44%) 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 .photos{
    
    grid-row: 1/2;
    
    
    display: grid;
    grid-template-columns: [start] auto [pet-start] .3% [mem-start] 30.4% [mem-end] .3% [pet-end] 13% [col2-start] 32% [col2-end] auto [end];
    
    grid-template-rows: [start] 7% [mem-start] 1% [sports-start] 42% [mem-end] 3.5% [sports-end] .1% [pet-start] .5% [paint-start] 42% [pet-end] 2.5% [paint-end] auto [end];
    
    align-items: center;
    overflow: hidden;
    
}


.photos .mainMemory {
  
    grid-column: mem-start/ mem-end;
    Grid-row: mem-start/ mem-end;

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

}
.photos .mainPetMemory {
  
    grid-column: pet-start / pet-end;
    Grid-row: pet-start / pet-end;

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

}
.photos .mainPainting {
  
    grid-column: col2-start / col2-end;
    Grid-row: paint-start / paint-end;

    border-style: solid;
    border-width: 0px;
    padding-bottom: 25px

}
.photos .mainSports {
  
    grid-column: col2-start / col2-end;
    Grid-row: sports-start / sports-end;

    border-style: solid;
    border-width: 0px;
    padding-bottom: 3px;

}

.main .bio{
    
    grid-row: 2/3;
    
    display: grid;
    
    grid-template-columns: 2% auto 2% auto 2%;
    grid-template-rows: 10% 80% 10%;

    overflow: hidden;
    
    align-items: center;
    
}

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

.bio .story {
   
    grid-column: 2/3;
    grid-row: 1/4;


    overflow: scroll;
    
    line-height: 22px;
    height: 100%;

}

.bio .picture {
    
    grid-column: 4/5;
    grid-row: 1/4;
  

    overflow: hidden;
    margin: 0px 0px;
    
    text-align: center;

}

.picture img{

    width: 154px;
    height: 300px;
    object-fit: contain;
    
    border-style: solid;
    border-width: 1.5px;
    
    
}

.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 .main{


        display: grid;
        grid-template-rows: 50% 35% 15%;
    
    }
    
   
    .grid-container .header {
        
        font-size: 18;
        
    }
    
    .main .photos{
        
        grid-row: 1/2;
        grid-column: 100%;
        
        display: grid;
        grid-template-columns: auto [mem-start] 21% [mem-end] .5% [pet-start] 20% [pet-end] 1.5% [paint-start] 24% [paint-end] 1.5% [sports-start] 21% [sports-end] auto;
        
        grid-template-rows: 8% [mem-start] 7% [paint-start] 29% [paint-end] 5% [mem-end] 1% [pet-start] 4% [sports-start] 33% [sports-end] 3% [pet-end] auto;
        
    }

    
    
    .photos .mainmemory{
        
        grid-column: mem-start/mem-end;
        grid-row: mem-start/mem-end;
    }
    
    .photos .mainPetMemory {
        grid-column: pet-start/pet-end;
        grid-row: pet-start/pet-end;
    }
    
    .photos .mainPainting {
        grid-column: paint-start/paint-end;
        grid-row: paint-start/paint-end;
    }
    
    .photos .mainSports {  
        grid-column: sports-start/sports-end;
        grid-row: sports-start/sports-end;
    }

    
    .main .footer {
        grid-row: 3/4;
        font-size: 16;
    }
    
    

}


@media (min-width: 750px){
    
    .logo .name{
        
        font-size: 22;
        -webkit-transform:scale(1.8,1.2);   
    }
    
    .bio img{
        
        max-height: 120%;
        
    }
    
}


/* Iphone 11 */

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { 

        
        
        
}

@media only screen and (min-width: 1130px) and (max-height: 830px){
	.photos .mainMemory{transform: translateY(42px);}

	.photos .mainPetMemory{transform: translateY(25px);}

	.photos .mainPainting{transform: translateY(42px);}
	
	.photos .mainSports{transform: translateY(25px);}
}

@media only screen and (min-width: 1250px) and (max-height: 900px){
	.photos .mainMemory{transform: translateY(44px);}

	.photos .mainPetMemory{transform: translateY(26px);}

	.photos .mainPainting{transform: translateY(44px);}
	
	.photos .mainSports{transform: translateY(26px);}
}

@media only screen and (min-width: 1250px) and (max-height: 930px){
	.photos .mainMemory{transform: translateY(46px);}

	.photos .mainPetMemory{transform: translateY(27px);}

	.photos .mainPainting{transform: translateY(46px);}
	
	.photos .mainSports{transform: translateY(27px);}
}