/* load a custom font from the folders and I named it MyFont */
@font-face{
    font-family: 'MyFont';
    src:url(../Font/Cute.ttf)
}

body {
    margin: 0;
    overflow-x: auto; /*you can scroll horizontally when content overflows*/
    overflow-y: hidden; /*hides vertically scrolling*/
}

.container{
    height: 100vh;
    width: max-content; /*expand the width to fit all content horizontally*/
    display: grid; /*setup css grid*/
    grid-template-rows: repeat(16, 1fr); /*divides into 16 equal rows*/
    grid-template-columns: repeat(34, 1fr);

    background-image: url("../asset/collage/pg3/hall.JPG"); /*sets bkground img*/
    background-size: contain; /*make img fit inside the container without cropping*/
}

.title {
    grid-row: 1/3;       
    grid-column: 15 / 21;   
    justify-self: center;   /* center the title horizontally in its grid area */
    align-self: center;     /* center the title vertically in its grid area */
}

.title h1 {
    font-family: 'MyFont';    
    font-size: 60px;
    color: rgb(255, 255, 255);
}

.art1{
    grid-row: 4/9;
    grid-column: 2/6;
}
.art1 img{
    width:100%; /*fills width of the grid area*/
    height:100%; /*fills height of the grid area*/
}
.art1 .title{
    font-family:'MyFont';
    margin-top: 0px; /*control the space above the title*/
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art2{
    grid-row: 10/15;
    grid-column: 2/9;
}
.art2 img{
    width:100%;
    height:100%;
    object-fit: contain; /*make the img fit without cropping*/
}
.art2 .title{
    font-family:'MyFont';
    margin-top: -5px; /*control the space above the title, made the title go up more in this case*/
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art3{
    grid-row: 4/9;
    grid-column: 8/12;
}
.art3 img{
    width:100%;
    height:100%;
}
.art3 .title{
    font-family:'MyFont';
    margin-top: 0px;
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art4{
    grid-row: 4/13;
    grid-column: 13/17;
}
.art4 img{
    width:100%;
    height:100%;
    object-fit: contain;
}
.art4 .title{
    font-family:'MyFont';
    margin-top: 0px;
    font-size: 25px;
    color: rgb(81, 161, 235);
}

.art5{
    grid-row: 10/14;
    grid-column: 8/13;
}
.art5 img{
    width:100%;
    height:100%;
    object-fit: contain;
}
.art5 .title{
    font-family:'MyFont';
    margin-top: 0px;
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art6{
    grid-row: 4/10;
    grid-column: 17/22;
}
.art6 img{
    width:100%;
    height:100%
}
.art6 .title{
    font-family:'MyFont';
    margin-top: -5px;
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art7{
    grid-row: 11/15;
    grid-column: 18/23;
}
.art7 img{
    width:100%;
    height:100%
}
.art7 .title{
    font-family:'MyFont';
    margin-top: -8px;
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art8{
    grid-row: 4/14;
    grid-column: 29/33;
}
.art8 img{
    width:100%;
    height:100%
}
.art8 .title{
    font-family:'MyFont';
    margin-top: 0px;
    font-size: 25px;
    color: rgb(81, 161, 235);
}

.art9{
    grid-row: 4/9;
    grid-column: 23/27;
}
.art9 img{
    width:100%;
    height:100%
}
.art9 .title{
    font-family:'MyFont';
    margin-top: -5px;
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.art10{
    grid-row: 10/15;
    grid-column: 24/28;
}
.art10 img{
    width:100%;
    height:100%
}
.art10 .title{
    font-family:'MyFont';
    margin-top: -5px;
    font-size: 20px;
    color: rgb(81, 161, 235);
}

.back{
    grid-row: 8/16;
    grid-column: 32/35;
    align-self: end;
}
.back img{
    width:80%; /*make it a bit smaller*/
}
.back a:hover img {
    transform: scale(0.8); /*make img smaller when mouse hover over it*/
}