@font-face {
    font-family: "Custom Font";
    src: url(Sniglet-Regular.ttf);
        url(Sniglet-Regular.ttf) 
    }

body{   
    font-family: "Custom Font";
    line-height: 2em;
     margin:0;
     padding:0;
}
#site_wrap{
        Background-color: white;
    Height: 100vh;
    display: grid;
    grid-gap: 5px;
 grid-template-columns: 
    1fr 
    Repeat(4,minmax(0,272px))
    1fr
;
grid-template-rows: 
134px
314px
314px
314px
1fr
;
grid-template-areas:
     "header header header header header header"
     ". ch2 cha cha PIC . "
     " . fp fp fav fav . "
     ". ST styles styles REC ."
     "footer footer footer footer footer footer"
     ;
    
}
.header{
   background-image: url(GoldfishTreasure_small.jpg);
    background-repeat: no-repeat;
     background-color: white;
    grid-area: header;
   text-align: center;
   margin: 10px;
   padding: 20px;
   font-size: 2em;

.Lifarea{color: #93C4A9; margin-right: 15px;
background-color: #C6FFE3;
}
.Connie{color: #93C4A9; margin-left: 15px;
background-color: #C6FFE3;
}
.Info{color: #93C4A9; margin-left: 25px; 
 background-color: #C6FFE3;
}
 .Welcome{color: #93C4A9; margin-right: 25px;
background-color: #C6FFE3; 
}
}
.characters{
    background-color:#93C4A9;
    grid-area: cha;
    text-align: center;
    color: white;
    h3{font-size: 2em;}
 p2{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1.5em;}
}
.charic2{
    grid-area: ch2;
    background-image: url(IMG_2304.jpg);
}
.PIC{
    Grid-area: PIC;
    color: white;
    background-color: #016ed5;
    background-image: url(IMG_4629.jpg);
}
.my_favorits{
background-color:#C6FFE3;
grid-area: fav;
text-align: center;
color: #93C4A9;
h2{font-size: 2em;}
 p3{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1.5em;}
}
.fav-p{
    Grid-area: fp;
    background-color: #016ed5;
    background-image: url(IMG_23695.jpg) ;
}
.style_recreations{
background-color: #93C4A9;
grid-area: styles;
text-align: center;
color: white;
padding: 5%;
h1{font-size: 2em;}
 p1{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1.5em;}
}
.ST{
grid-area: ST;
 background-color: #016ed5;
 background-image: url(IMG_15060.jpg);
 background-repeat: no-repeat;
 background-position: center;
}
.REC{
grid-area: REC;
 background-color: #016ed5;
 background-image: url(IMG_714702.jpg);
}
.footer{
 background-color: #C6FFE3;
grid-area: footer;
text-align: center;
color: #C6FFE3;
}