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

.container {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    height: 100vh;
}

.sidebar {
    display: flex; 
    justify-content: center;
    align-items:center;
    

}

.sidebar_content{
    position: fixed;  
    display: grid;
    grid-auto-flow: column; 
    align-items:baseline;
    top:30%;
    gap: 10pt;
    transform-origin: bottom left;
    transform: rotate(90deg);
    font-size: 12pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;

}

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


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

.scale {
    /* z-index: -100; */
    grid-column:11/14;
    grid-row: 1/10;
    transition: none;
    
}
.scale:hover {
  transform: none !important;
}

#scale {
  transform: none;
}

.title{
    grid-column:4/25 ;
    grid-row: 14/16;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-style: normal;
    font-size: 33pt;
    text-align: center;
    align-self: center;
}

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

#quote1{
    grid-column:3/18; 
    grid-row: 36/38;
    align-self: flex-end;
    background-color: #f8ff00;
    font-family: "Pixelify Sans", sans-serif;
    font-weight: 400;
    font-size: 12pt;
    color: brown;
    border-radius: 10px;
}

#quote2{
    grid-column:5/17; 
    grid-row: 23/25;
    align-self: flex-end;
    background-color: #77ff92;
    font-family: "EB Garamond", serif;
    font-weight: 400;
    font-size: small;
    color: black;
}

#quote3{
    grid-column:7/23; 
    grid-row: 13/14;
    align-self: flex-end;
    background-color: #ff9a00;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-size: 12pt;
    color: white;
    z-index: 2;
}



/* COLLAGES IMAGES */
.orange { grid-column:1/15; grid-row: 20/28;}

.cat{ grid-column:6/10;  grid-row: 40/45; z-index: 1; transform: rotate(-50deg); } /*z index bcs the image to small for hover*/

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

.vinyl{ grid-column:10/15; grid-row: 32/38; z-index: 1;}

.clock{grid-column:18/26; grid-row: 13/23; z-index: 5;}

.calendar{ grid-column: 17 / 25; grid-row: 7 / 14;z-index: 1; } 

.strawberry{   grid-column: 1 / 5; grid-row: 8 / 11; } 

.basket{  grid-column: 18 / 23; grid-row: 26 / 33; transform: rotate(90deg);}

.doll{    grid-column: 15 / 21; grid-row: 20 / 28; z-index: 1;}

.cheetah{ grid-column: 2 / 10; grid-row: 31 / 36; }

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

.totoro{  grid-column: 1 / 7; grid-row: 26 / 31; z-index: 1;}

.google{  grid-column: 14/ 20; grid-row: 8 / 12; }

.egg{  grid-column: 12 / 15; grid-row: 23/ 30; transform: rotate(100deg);}

.sticker{   grid-column: 15 / 21; grid-row: 15 / 20;}

.seven{  grid-column: 2 / 7; grid-row: 39 / 44; }

.word{  grid-column: 1 / 5; grid-row: 11 / 17; }

.plant{  grid-column: 17 / 25; grid-row: 37 / 44; }

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

.orangeChair{grid-column: 9 / 14; grid-row: 37 / 45;}