/* load a custom font from the folders and I named it MyFont */
@font-face {
    font-family: 'MyFont';
    src: url(../Font/stich.otf);
}
body{
    margin:0;
    background: linear-gradient(to bottom, rgb(255, 207, 215), rgb(201, 227, 255));
}
.container{
    height: 100vh;
    width: 100%;
    overflow: hidden; /* prevent scrolling both ways */
    display: grid;
    grid-template-rows: repeat(16, 1fr);
    grid-template-columns: repeat(16, 1fr);
}

.bbq{
    grid-row: 1/8; /* start at row 1 and end before row 8*/
    grid-column: 1/8; /* start at column 1 and end before column 8*/
    z-index:1;
}
.bbq img{
    width:100%;
}

.ramen{
    grid-row: 5/17;
    grid-column: 1/6;
    align-self: end; /*aligns the img at the bottom of the grid area*/
    z-index: 9;
}
.ramen img{
    width:100%;
}

.cake{
    grid-row: 1/10;
    grid-column: 12/17;
    z-index: 5;
}
.cake img{
    width:100%;
}

.plush2{
    grid-row: 4/11;
    grid-column: 4/10;
    z-index: 7;
    transform: rotate(-15deg);/*rotate the image*/
}
.plush2 img{
    width:100%;
}
.plush2 a:hover img {
    transform: scale(0.9); /*make the image a bit bigger when mouse hover over it*/
}

.me2{
    grid-row: 1/9;
    grid-column: 9/14;
    transform: rotate(-15deg);
    align-self: end;
    z-index: 5;
}
.me2 img{
    width:100%;
}

.dolls{
    grid-row: 5/10;
    grid-column: 5/14;
    z-index: 6;
}
.dolls img{
    width:100%;
}


.matcha{
    grid-row: 4/17;
    grid-column: 10/17;
    z-index: 7;
}
.matcha img{
    width:110%;
}

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

.hamster{
    grid-row: 6/9;
    grid-column: 2/5;
    transform: rotate(15deg);
    z-index:8;
}
.hamster img{
    width:100%;
}

.marcroon{
    grid-row: 3/6;
    grid-column: 6/8;
    z-index:9;
    transform: rotate(-25deg);
    align-self: end;
}
.marcroon img{
    width:90%;
}

.cupcake{
    grid-row: 14/17;
    grid-column: 5/7;
    z-index: 9;
}
.cupcake img{
    width:100%;
}

.text{
    grid-row: 12/14;
    grid-column: 4/10;
    transform: rotate(45deg);
    z-index: 10;
}
.text h3{
    font-family: 'MyFont';
    font-size: 80px;
    color: rgb(205, 134, 93);
    text-shadow: 1px 2px rgb(65, 42, 24); /* adds shadow to the text to create contrast and more depth*/
}

.text2{
    grid-row: 5/9;
    grid-column: 14/16;
    transform: rotate(20deg);
    z-index: 10;
}
.text2 h3{
    font-family: 'MyFont';
    font-size: 90px;
    color: rgb(117, 170, 84);
    text-shadow: 3px 3px rgb(50, 65, 24);
}

.text3{
    grid-row: 10/12;
    grid-column: 7/12;
    transform: rotate(-20deg);
    z-index: 10;
}
.text3 h3{
    font-family: 'MyFont';
    font-size: 90px;
    color: rgb(246, 147, 182);
    text-shadow: 5px 3px rgb(93, 167, 223);
}