.container{ /* This is the container for the whole page, including header and footer */
    max-width: 500px;
    margin: 100px auto; /* adds 100 to top of margin, auto centers it */
    display: grid;
    grid-gap: 5px;
}

.nav {
    background-color: #62908f00;
    display: flex; 
    justify-content: right;
    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;
}

header {
   border: rgb(84, 53, 53) solid 2px;
   grid-row: 2 / 3;
    grid-column: 1 / 3;
}
        .container .homepageimg{
        width: 100%;           /* Fills the horizontal space */
        display: block;        /* Removes the bottom whitespace gap */
        object-fit: cover;     /* Crops the image to fit without stretching */
        border: rgb(255, 255, 255) solid 5px;
        box-sizing: border-box; /* Ensures the border is included in the width */
        }

main, footer{
    color: #62908f;
}

main  { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    
    
}

.Sketchbook {
    grid-row: 3 / 4;
    grid-column: 1 / 2 ;

}

        .Sketchbook button{
            background-color: rgba(179, 142, 148, 0);
            border: rgba(18, 17, 16, 0) solid 2px;
            cursor: pointer;
            color: #62908f;
            font-size: 20px;
            margin: 0;
            padding-left: 0;
            font-family:'Garamond', serif;
        }
        .Sketchbook button:hover{
            text-decoration: none;
            color: #a94884;
        }

.Sketchbook a{  /* styles the years/links in the Sketchbook section */
    display: block;
    color: black;
    text-decoration: none;
    padding: 0px 20px;
}

        .Sketchbook .sketchbook-years{
            display: none;
            position: absolute;
            background-color: hsla(0, 0%, 95%, 0);
            min-width: 140px;
        }

        .Sketchbook:hover .sketchbook-years{ /* Shows the years/links when hovering over the Sketchbook button */
            display: block;
        }

        .Sketchbook a:hover{
            background-color: #a948840a;
            color: #a94884;
            text-decoration: underline;
        }


.Gallery {
    grid-row: 3/ 4;
    grid-column: 2 / 3 ;
}

       .Gallery button{
            background-color: rgba(179, 142, 148, 0);
            border: rgba(18, 17, 16, 0) solid 2px;
            cursor: pointer;
            color: #62908f;
            font-size: 20px;
            margin: 0;
            padding-right: 0;
            font-family:'Garamond', serif;
        }
        .Gallery button:hover{
            text-decoration: none;
            color: #a94884;
        }

.Gallery a{  /* styles the years/links in the Gallery section */
    display: block;
    color: black;
    text-decoration: none;
    padding: 0px 25px;
}

        .Gallery .gallery-years{
            display: none;
            position: absolute;
            background-color: hsla(0, 0%, 95%, 0);
            min-width: 100px;
        }

        .Gallery:hover .gallery-years{ /* Shows the years/links when hovering over the Gallery button */
            display: block;
        }

        .Gallery a:hover{
            background-color: #a948840a;
            color: #a94884;
            text-decoration: underline;
        }


footer{
    text-align: center;
    grid-row: 4 / 5;
    grid-column: 1 / 3;
     position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
}

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


html, body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* Removes both horizontal and vertical scrollbars */
}

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

}