html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow-x: auto;     
  overflow-y: hidden;   
}

.container {
    display: grid;
    height: 100vh;
    grid-template-rows: 20% 65% 15%;
}
.header {
    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-bottom: 7%;
}

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

a:hover{
  transform: scale(1.1);
  
}
.collage{
    display: grid;
    /* grid-template-columns: repeat(30,50px); */
    grid-auto-columns: 65px;
    grid-template-rows: repeat(15,2fr);
    overflow-x: auto;               
    overflow-y: hidden;
}
.collage::-webkit-scrollbar {
  display: none;     
}

/* 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(.ruler):hover{
    transform: scale(1.1);
    z-index: 100;
 
}

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

#ruler {
  transform: none;
}

.title{
    grid-column:5/11 ;
    grid-row: 1/5;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-style: normal;
    font-size: 45pt;
    text-align: center;
    align-self: center;
}

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

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

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

#quote3{
    grid-column:18/25; 
    grid-row: 14/17;
    align-self: flex-end;
    background-color: #ff7792;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    color: white;
}



/* COLLAGES IMAGES */
.orange { grid-column:1/4; grid-row: 3/16;}

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

.three{ grid-column:4/7; grid-row: 3/14;}

.vinyl{ grid-column:4/9; grid-row: 10/16; z-index: 1;}

.clock{grid-column:6/10; grid-row: 3/14;}

.calendar{   grid-column: 8 / 12; grid-row: 8 / 16; } 

.strawberry{   grid-column: 9 / 12; grid-row: 4 / 10; } 

.basket{  grid-column: 11 / 15; grid-row: 4 / 11; }

.doll{    grid-column: 11 / 14; grid-row: 7 / 16; z-index: 1;}

.cheetah{ grid-column: 15 / 18; grid-row: 11 / 15; }

.sofa{    grid-column: 16 / 23; grid-row: 7 / 16; }

.totoro{  grid-column: 17 / 20; grid-row: 4 / 10; z-index: 1;}

.google{  grid-column: 21 / 23; grid-row: 4 / 9; }

.egg{  grid-column: 25 / 27; grid-row: 3 / 13;transform: rotate(100deg);}

.sticker{   grid-column: 22 / 25; grid-row: 6 / 12;}

.seven{  grid-column: 27 / 31; grid-row: 7 / 12; z-index: 1; }

.word{  grid-column: 25 / 28; grid-row: 3 / 9; }

.plant{  grid-column: 27 / 31; grid-row: 8 / 16; }

.cherry{grid-column: 28 / 31; grid-row: 4 / 7;}