@font-face {
    font-family: 'MyFont';
    src: url(../Font/stich.otf);
}
body{
    margin:0;
    
    background-image:url(../asset/collage/pg1/bkGround.JPG);
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center;

}
.container{
    height: 100vh;
    width: 100%;
    overflow: hidden; /* prevent scrollbars */
    display: grid;
    grid-template-rows: repeat(16, 1fr);
    grid-template-columns: repeat(16, 1fr);
}

.flower1 {
    grid-row: 2/ 4;
    grid-column: 1/3;
}
.flower1 img{
    width: 100%;
}

.flower2{
    grid-row: 11/14;
    grid-column: 12/15;
    z-index:4;
}
.flower2 img{
    width: 100%;
}

.link{
    grid-row: 7/10;
    grid-column: 1/5;
    z-index:4;
}
.link img{
    width: 100%;
}

.mlp{
    grid-row: 13/17;
    grid-column: 3/9;
    align-self: end;
    z-index:3;
}
.mlp img{
width: 100%;
}

.pokemon{
    grid-row:5/9;
    grid-column: 3/9;
    z-index:1;
}
.pokemon img{
    width:100%;
}

.plush{
    grid-row: 1/3;
    grid-column: 3/7;
    z-index:2;
    transform:rotate(-15deg);
    
}
.plush img{
    width:100%;
}
.plush a:hover img {
    transform: scale(1.1); 
}

.me{
    grid-row: 5/16;
    grid-column: 9/16 ;
    align-self: end;
    
}
.me img{
    width:100%
}

.brush{
    grid-row: 2/12;
    grid-column: 14/16;
    align-self: end;

}
.brush img{
    width:100%;
}
.brush a:hover img {
    transform: scale(0.9); 
}

.melody{
    grid-row: 12/16;
    grid-column: 9/12;
    transform: rotate(-22deg);
}
.melody img{
    width:100%;
}

.candy{
    grid-row: 15/16;
    grid-column: 3/5;
    justify-self: start;
    transform: rotate(30deg);
    z-index:5;
}
.candy img{
    width:170%;
}

.tea{
    grid-row:2/14;
    grid-column: 13/15;
    transform: rotate(-15deg);
    z-index:6;
}
.tea img{
    width:100%
}

.text{
    grid-row: 4/6;
    grid-column: 5/12;
    transform: rotate(-18deg);
    z-index: 3;
}
.text h3{
    font-family: 'MyFont';
    font-size: 70px;
    color: rgb(117, 170, 84);
    text-shadow: 1px 2px rgb(50, 65, 24);
}

.text2{
    grid-row: 1/3;
    grid-column: 9/13;
    transform: rotate(-15deg);
}
.text2 h1{
    font-family:'MyFont';
    font-size:70px;
    color: rgb(248, 142, 168);
    text-shadow: 1px 2px rgb(65, 24, 38);
}

.text3{
    grid-row: 14/16;
    grid-column: 7/10;
    transform: rotate(50deg);
}
.text3 h1{
    font-family:'MyFont';
    font-size:80px;
    color: rgb(248, 142, 168);
    text-shadow: 1px 2px rgb(65, 24, 38);
}