@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 is is . "
     ". info map con con ."
     "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;
}
.Welcome{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; 
}
}
.Demon{
    background-color: #ff7c6f;
     text-align: center;
     padding: 45px;
     font-size: 5em;
    color: white;
    grid-area: welcome;

}
.main{
   background-color: #FFeeaf;
    grid-area: main;
    background-image:url(IMG_5663.jpg);
    background-repeat: no-repeat;
   background-position: center;
}
.Who-is{
    color: white;
    background-color: #FFA866;
    grid-area: is;
    text-align: left;
    padding: 5%;
    h1{font-size: 3em; }
    p1{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em; 
    letter-spacing:10%; 
    font-weight: bold;
   }
   p2{font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em;
     letter-spacing:10%; 
     font-weight: bold;
   }
}
.about{
    background-color: #FFA866;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: info;
    color:white;
    text-align: center;
    text-indent: 5%;
    letter-spacing: 5%;
    padding: 20%;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.map{
    background-color: #eccece;
    background-image: url(IMG_04350.jpg);
    background-repeat: no-repeat;
    background-position: center;
    grid-area: map;
}
.con{
    background-color: #eccece;
    background-image: url(IMG_14170.jpg);
    background-repeat: no-repeat;
    background-position: center;
    grid-area: con;
}
.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 main main"
     ". mer map con Art ."
     "footer footer footer footer footer footer"
    }
     .image{
        display: none;
     }
}