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

body{
    margin:0;
    padding:0;
    font-family: "Custom Font";
    line-height: 2em;
}
#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: 
118px
119px
385px
455px
1fr
;
grid-template-areas:
     "header header header header header header"
     "welcome welcome welcome welcome welcome welcome"
     " . main main image image . "
     ". mer map con Art ."
     "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;
}
 .My-Art{color: #93C4A9; margin-right: 25px;
background-color: #C6FFE3; 
}
}
.welcome{
    background-color: #016ED5;
    background-image:url(IMG_Ban2.jpg);
     background-repeat: no-repeat;
     background-position: center;
     text-align: center;
     padding: 45px;
     font-size: 5em;
    color: white;
    grid-area: welcome;
}
.main{
   color: white;
    background-color: #FFA866;
    grid-area: main;
    padding: 5%;
    h1{font-size: 3.5em;}
    p1{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
    letter-spacing:10%; 
     font-weight: bold;
    }
}
.image{
    background-color: #FF7C66;
    background-image: url(IMG_0131.JPG) ;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: image;
}
.mer{
    background-color: #C6FFE3;
    background-image: url(IMG_4629.jpg);
    background-repeat: no-repeat;
    background-position: center;
    grid-area: mer;
}
.map{
    background-color: #C6FFE3;
    background-image: url(IMG_04550.jpg);
    background-repeat: no-repeat;
    background-position: center;
    grid-area: map;
}
.con{
    background-color: #C6FFE3;
    background-image: url(IMG_04350.jpg);
    background-repeat: no-repeat;
    background-position: center;
    grid-area: con;
}
.Art{
    background-color: #C6FFE3;   
    background-image: url(IMG_Art0.jpg);
    background-repeat: no-repeat;
    background-position: center;
    grid-area: Art;
}
.footer{
    background-color:#FFEEAF;
    color:#FFEEAF;
    grid-area: footer;
}

@media screen and (max-width: 480px)
{
    grid-template-areas{
     "header header header header header header"
     "welcome welcome welcome welcome welcome welcome"
     ". main main main main ."
     ". Art Art Art Art ."
     "footer footer footer footer footer footer"
    }
	
	.welcome{
		font-size: 3em;
	}
	.main{
	color: white;
    background-color: #FFA866;
    grid-area: main;
    padding: 5%;
    h1{font-size: 2em;}
    p1{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
    letter-spacing:5%; 
     font-weight: bold;
    }
		
	.header{
   background-image: none;
    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;
}
 .My-Art{color: #93C4A9; margin-right: 25px;
background-color: #C6FFE3; 
}
}
}