.container{ /* This is the container for the whole page */
    max-width: 500px;
    margin: 100px auto; /* adds 100 to top of margin, auto centers it */
    display: grid;
    grid-gap: 5px;
    margin-bottom: 0px;
    border: 6px solid #ffffff00;

}

.nav {
    background-color: #62908f00;
    display: grid; 
    justify-content: right; /* Vertically centers the content */
    grid-row:1 / 2;
    grid-column: 1/ 3 ;
}

        .nav-list{
            list-style-type: none; /* Removes the default bullet points from the list */
            display: flex; /* Makes the list items display in a row */
            margin: 0; 
            padding: 0;
            gap: 15px;
            
        }

        .nav-list a {
            text-decoration: none; /* Removes underline from links */
            color: #62908f;
        }

        .nav-list a:hover{
            color: #a94884;
            text-decoration: underline; 
        }

        /*gallery 202x title */
.gallery-title{
    position: absolute;
    top: 70px;
    width: 250px;
    transform: translateX(-3%);
}

main{
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    gap: 40px;

}
        .gallery-column{
            display: grid; 
            justify-self: center; /* Centers the images horizontally */
        }

        .gallery-column img {
            display: block;
            width: 500px; /*same as the container width */  
            height: auto;
            opacity: 0.85; /* Slightly transparent */
        }

            .img-hover {
                position: relative;
            }

            .side-text-1 {
                position: absolute; /* looks for the nearest positioned ancestor, which is .img-hover */
                opacity: 0; 
                top: 200px;
                left: 115%;
                margin-left: 5px;  
                width: 300px; 
                
                visibility: hidden;
                color: #575757;
                border: 1px solid #dccc2100;
            }

            .img-hover:hover .side-text-1 {
                opacity: 1;
                visibility: visible;
            }

                /* Arrow image styling */
                .gallery-column img.arrow-1 {
                    position: absolute;
                    top: -40px;     /* Align vertically with your layout line */
                    left: -60px;        /* Center horizontally */
                    width: 110px;
                    height: auto; 
                }

            .side-text-2 {
                position: absolute; /* looks for the nearest positioned ancestor, which is .img-hover */
                opacity: 0;
                top: 150px;
                right: 110%;
                margin-left: 5px;  
                width: 300px;  
                visibility: hidden;
                color: #575757;
            }

            .img-hover:hover .side-text-2 {
                opacity: 1;
                visibility: visible;
            }
            
                  /* Arrow image styling */
                .gallery-column img.arrow-2 {
                    position: absolute;
                    top: -40px;     /* Align vertically with your layout line */
                    right: -40px;     /* Center horizontally */
                    width: 110px;
                    height: auto; 
                    transform: scaleX(-1); /* Flips the image horizontally */
                    }

      /*back to top button*/
        .back-to-top {
            position: fixed;
            bottom: 10px;
            left: 90%;
            color: #62908f;
            padding: 5px 10px;
            border-radius: 10px;
            text-decoration: none;
            z-index: 1000;
        }   

        .back-to-top:hover {
            background-color: #eec7df4a;
            color: #a94884;
            text-decoration: none;
        }

footer{
    text-align: center;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    color: #62908f;
}

footer a{
    text-decoration: none;
    color: #62908f;
}
footer a:hover{
   text-decoration: none;
   color: #a94884;
}

html, body {
  margin: 0;
}

body{
    background-color: #e9e8de;
    font-family:'Garamond', serif;
}