body {
    background-image: url(https://i.postimg.cc/kgwg8N1z/wallpaperflare-com-wallpaper.jpg);
    background-size:cover;
    margin:0px;
}


main {
    margin:0px;
    height: 100vh;    
    max-height: 100vh;
    position: relative;

    box-sizing: border-box;  /* This ensures padding is included within the max-height */
    
    
    display: flex;  /* Ensures children respect height */
    flex-direction: column; /* Stack children vertically */

    filter: grayscale(1);    

    transition:  filter 1s ease
}

.cadreMain {
    width: 80%;
    max-width: 140vh;
    height: 80%;
    max-height: 100vh;


    margin:auto;
    padding: 0.5em 2em 3em 2em;
    position:relative;

    background-color: rgba(134, 134, 134, 0.748);
    overflow: hidden; /* Prevents children from overflowing */

    
    transition: border-radius 0.3s ease;
}

.cadreMain:hover {
    border-radius: 2em;
}



h1 {
    margin: 10px auto 10px auto;

    /* text */
    text-align: center;
    font-size: 4em;
    color: aqua;
}

.images {
    height: 90%;
    max-height: 100%; /* Restricts height to stay inside main */
    
    flex-grow: 1; /* Makes .images take remaining space inside main */
    
    overflow-y: auto; /* Enables scrolling inside the container */

}

main:hover {
    filter: grayscale(0);

}

img {
    width: 90%;
    height: auto;
    max-height: 90%;
    max-width: auto;

    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;

    display: block;
    border: 1px solid white;

    transition: scale 0.1s ease;
}

img:hover {
    scale: 1.04;
}


/* scrollbar */
.images::-webkit-scrollbar {
    width: 10px;
  }
  
/* Track */
.images::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(6, 167, 192, 0); 
border-radius: 10px;
}

/* Handle */
.images::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.224); 
border-radius: 10px;
}

/* Handle on hover */
.images::-webkit-scrollbar-thumb:hover {
background: #ffffff5f; 
}