html {
    background-color:rgb(0, 0, 0); 
}

body {
    cursor: url("archive-cursor.png"), auto;
}
.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:rgb(63, 68, 65) 
}
.navbar li {
    float: left;
    border-right: 2px solid rgb(163, 167, 165)
}
#navlink {
    display: block;
    color:rgb(163, 167, 165); 
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-family: 'Aldrich';
    cursor: url("archive-cursor-hover.png"),auto;
}

#navlink:link {
    color:rgb(163, 167, 165) 
}
#navlink:visited {
    color:rgb(163, 167, 165)
}
#navlink:hover {
    background-color: rgb(91, 101, 94);
}

h1 { 
    color:rgb(163, 167, 165);
    text-align: center;
    font-family: 'Silkscreen';
    font-size: 50px;
    margin-top:35px;
    position:relative;  

}

.grid-image {
    /* max-height: 300px; */
    object-fit:cover;
    width: 16vw;
    height: 20vw;
    cursor: url("archive-cursor-hover.png"),auto;
    border: 1px solid white;
}

.flexbox-container {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-content:flex-start;
    gap: 20px 20px;
    max-width: 100%;
    overflow: hidden;

   
}

.flexbox-item {
    /* max-height: 500px; */
    width: 30vw;
    height: 30vw;
    /* overflow:hidden; */
    
    
}




#lightbox {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: none;
}

#lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
}


#lightbox img {
  max-height: 95%;
}

.overlay {
    position:relative;
   
}

.title {
    position:absolute;
    margin:0;
    padding:0;
    border:0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity:0;
    visibility:hidden;
    text-decoration: none;
    font-family: 'Aldrich';
    font-size: 20px;
    text-align: center;
    display:inline-block;
    background-color:white;
    width:16vw;
    height:20vw;
    align-items:center;
    justify-content:center;
    border: solid 1px white; 
    pointer-events: none;

    
}

.overlay:hover .title {
    visibility: visible;
    opacity: 50%;
    display:flex;
    /* flex-direction:column; */
    justify-content:center;
    align-items: center;
    transition:ease 1s;
    cursor: url(archive-cursor-hover.png), auto;
}