@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: 
115px
340px
330px
340px
1fr
;
grid-template-areas:
     "header header header header header header"
     ". Map Map M-info M-info  ."
     " . lu-i His Lip Lilac . "
     ". luna His Mar Mar ."
     "ter ter ter ter ter ter"
     ;
    
}
.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;

.Welcome{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; 
}
}
.history{
    grid-area: His;
    background-color: #C6FFE3;
    padding:10%;
    color:#93C4A9;
    h1{
        text-align: center;
        font-size: 2em;
    }
    pt1{
        text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
    }
    pt2{

        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
    }
    pt3{
        text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
    }
    pt4{
        text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em;
    font-weight: bold; 
    }
}
.Lilac{
    grid-area: Lilac;
    background-color: #f2e2b1;
}
.lil-pic{
    grid-area: Lip;
    background-color: #C6FFE3;
    background-image: url(IMG_0440.jpg);
}
.M-info{
    grid-area: M-info;
    background-color:#93C4A9;
    color:#C6FFE3;
    padding: 5%;
    h1{
        text-align: center ;
        font-size: 2em;
    }
    p1{
         text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em;
    font-weight: bold; 
}
    p2{ 
        text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size: 1em;
    font-weight: bold;
 }
}
.Map{
    grid-area: Map;
    background-color: #C6FFE3;
    background-image: url(IMG_04556.jpg);
}
.luna{
    grid-area: luna;
    background-color: #93C4A9;
}
.l-inf{
    grid-area: lu-i;
    background-color: #C6FFE3;
    background-image: url(IMG_1971.jpg);
}
.Mar{
    grid-area: Mar;
    background-color: white;
    background-image: url(IMG_Together.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
.footer{
    grid-area: ter;
    background-color: #C6FFE3;
    color:#C6FFE3;
}