html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  
}

.container{
    display: grid;
    grid-row: auto;
}

.collages {
    display: grid;
    grid-template-columns: repeat(25,1fr);
    /* grid-template-rows: repeat(20,1fr); */
    grid-auto-rows: 35px;
    
}



.footer {
    display: grid;
    grid-auto-flow: column;  
    justify-content: center;
    align-items: center;
    column-gap: 10pt;  
    font-size: 11pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    margin-top: 7%;
}

.page {
    color: brown; 
}
a {
  color: inherit;               
  text-decoration: none;   
  transition: transform .2s ease, color .2s ease;
}

a:hover{
  transform: scale(1.1);
  
}


/* IMAGES */
img{
    object-fit: cover; /*for different sizing screen*/
    height: 100%;
    /* width: 100%; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:not(.scale):hover{
    transform: scale(1.1);
    z-index: 100;
}

.scale {
    /* z-index: -100; */
    grid-column:11/15;
    grid-row: 38/48;
    transition: none;
    
}
.scale:hover {
  transform: none !important;
}

#scale {
  transform: none;
}

img:not(.ruler):hover{
    transform: scale(1.1);
    z-index: 100;
 
}

.ruler {
    /* z-index: -100; */
    grid-column:10;
    grid-row: 1/5;
    transition: none;
    
}

#ruler {
  transform: none;
}


.title{
    grid-column:4/10 ;
    grid-row: 1/4;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-style: normal;
    font-size: 50pt;
    text-align: center;
    align-self: center;
    z-index: 1;
}

/* QUOTES */
.quotes {
    font-size: medium;
    padding: 5px;
    z-index: 10;
    text-align: center;
}

#quote1{
    grid-column:12/20; 
    grid-row: 19/21;
    align-self: flex-end;
    background-color: #f8ff00;
    font-family: "Pixelify Sans", sans-serif;
    font-weight: 700;
    color: brown;
    border-radius: 20px;
}

#quote2{
    grid-column:8/15; 
    grid-row: 5/6;
    align-self: flex-end;
    background-color: #77ff92;
    font-family: "EB Garamond", serif;
    font-weight: 800;
    font-size: small;
    color: black;
}

#quote3{
    grid-column:9/19; 
    grid-row:27/28;
    align-self: flex-end;
    background-color: #ff7792;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-size: 13pt;
    color: white;
}



/* COLLAGES IMAGES */
.orange { grid-column:12/18; grid-row: 2/12;}

.cat{ grid-column:1/4;  grid-row: 1/6; z-index: 1; } /*z index bcs the image to small for hover*/

.three{ grid-column:7/13; grid-row: 18/28;z-index: 1;}

.vinyl{ grid-column:15/20; grid-row: 27/33; z-index: 1;}

.clock{grid-column:11/14; grid-row: 30/40;z-index: 1;}

.calendar{   grid-column: 9 / 15; grid-row: 7 / 15; z-index: 1;} 

.strawberry{   grid-column: 22 / 25; grid-row: 7/ 11; } 

.basket{  grid-column: 16 / 20; grid-row: 14/22; transform: rotate(90deg);}

.doll{    grid-column: 14 / 21; grid-row: 8 / 17; z-index: 1;}

.cheetah{ grid-column: 8 / 12; grid-row: 7 / 10; }

.sofa{    grid-column: 4 / 15; grid-row: 13 / 21; }

.totoro{  grid-column: 3 / 6; grid-row: 3 / 9; z-index: 1;}

.google{  grid-column: 11 / 17; grid-row: 28 / 32; }

.egg{  grid-column: 18 / 23; grid-row: 11 / 18; transform: rotate(90deg);}

.sticker{ grid-column:15/18; grid-row: 31/36;}

.seven{  grid-column: 23 / 25; grid-row: 2 / 7; }

.word{  grid-column: 10 / 16; grid-row: 20 / 30; }

.plant{  grid-column: 18 / 22; grid-row: 5 / 13; }

.cherry{grid-column: 20 / 23; grid-row: 2 / 5;}

.chairOrange{grid-column: 5 / 10; grid-row: 8 / 15;}