body::before {
    content:"";
    position:fixed;
    top:-20px;
    left:-20px;
    width:105%;
    height:105%;
    background-image:url("images/background2.jpg");
    background-size:cover;
    background-position:center;
    filter:blur(8px);
    opacity:.92;
    z-index:-1;
    background-color:rgba(0,0,0,.5);
    background-blend-mode:darken;
}

.exit-lightbox img{
    position:fixed;
    z-index:1000;
    margin:0;
    top:50%;
    left:10px;
    max-width:10vw;
    max-height:10vh;
    height:auto;
    width:auto;
}

.filter-container {
    display:flex;
    gap:10px;
    margin:0 auto;
    justify-content:center;
    z-index:10;
    position:relative;
    align-content:center;
}

.filter-container hr {
    z-index:1;
}

.filter-container p {
    color:whitesmoke;
    margin-top:21px;
    margin-bottom:0px;
    text-shadow:5px 5px 5px rgba(0,0,0,.8);
}

.filter-line-class {
    display:flex;
    gap:300px;
    margin:0 auto;
    justify-content:center;
    align-items:center;
    z-index:1;
    position:absolute;
    left:50%;
    top:97.5px;
    transform:translateX(-50%);
    align-content:center;
    width:1030px;
}

.filter-line, .filter-line-2 {
    flex:1;
    max-width:300px;
    }



.filter-container select {
    padding-left:10px;
    padding-bottom:1px;
    border:1px solid transparent;
    background-color:darkslategray;
    color:whitesmoke;
    border-radius:10px;
    height:30px;
    width:125px;
    margin-top:15px;
    box-shadow:5px 5px 5px rgba(0,0,0,.5);
    font-family:'Courier New', monospace;
    text-shadow:1px 1px 1px rgba(0,0,0,.8);
    cursor:pointer;
}

.page-title {
    text-align:center;
    color:darkslategray;
}

.tagline {
    text-align:center;
    color:darkslateblue;
}

/*Centers the entire image-row class*/
.image-container {
    text-align:center;
    margin:15px;
    position:relative;
    z-index:10;
}

/*Sets 2 columns. The container for each image.*/
/*.image-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    justify-items:center;
    align-items:start;
    text-align:center;
    margin:0px;
}*/

.image-row {
    max-width:1030px;
    margin:0 auto;
    justify-content:center;
}

.image-row img {
    max-width:500px;
    width:100%;
    height:auto;
    display:block;
    margin-bottom:15px;
    margin-right:7.5px;
    margin-left:7.5px;
    box-shadow:5px 5px 5px rgba(0,0,0,.5);
    transition:transform 0.3s ease;
    cursor:pointer;
}

.image-row img:hover {
    transform:scale(1.02);
}

html, body {
    margin:0;
    padding:0;
    font-family:'Courier New', monospace;
    position:relative;
}

/*The menu features*/
.menu {
    background:linear-gradient(
        to right,
        rgba(47,79,79,.3) 0%,
        rgba(47,79,79,1) 15%,
        rgba(47,79,79,1) 85%,
        rgba(47,79,79,.3) 100%
    );
    text-align:center;
    overflow:hidden;
    gap:75px;
    display:flex;
    justify-content:center;
    padding:15px;
    margin:0px;
    margin-top:0px;
    top:0px;
    font-size:30px;
    text-decoration:none;
    z-index:10;
    position:relative;
    box-shadow:5px 5px 5px rgba(0,0,0,.5);
}

.name {
    font-family: 'Courier New', cursive;
    text-decoration:underline;
    opacity:90%;
    color:whitesmoke;
    transition:color 0.2s ease, opacity 0.2s ease;
    width:320px;
    padding-top:4px;
    padding-bottom:0px;
    text-shadow:2px 2px 2px rgba(0,0,0,.8);
    font-size:38px;
    margin:0px;
    text-align:center;
}

.menu a {
    text-decoration:none;
    opacity:50%;
    color:whitesmoke;
    transition:color 0.2s ease, opacity 0.2s ease;
    width:100px;
    padding-top:9px;
    text-shadow:2px 2px 2px rgba(0,0,0,.8);
    text-align:center;
}

.menu a:hover {
    color:salmon;
    opacity:75%;
}

.menu a.active {
    color:whitesmoke;
    opacity:85%;
}

.menu a.active:hover {
    color:salmon;
}

.vertical-line {
    width:1px;
    height:100vh;
    z-index:0;
    position:fixed;
    top:0;
    left:404px;
    background-color:black;
}

.vertical-line2 {
    width:1px;
    height:100vh;
    z-index:0;
    position:fixed;
    top:0;
    right:404px;
    background-color:black;
}

.noscroll {
    overflow: hidden;
}

.horizontal-line {
    width:100%;
    height:1px;
    z-index:15;
    position:absolute;
    top:69px;
    background-color:black;
}

.image-box {
    width:1045px;
    height:100%;
    z-index:0;
    position:absolute;
    margin-top:77px;
    top:0px;
    left:50%;
    background-color:rgba(29,48,48,1);
    transform:translateX(-50%);
    box-shadow:0px 0px 15px rgba(0,0,0,1);
}

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

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

#lightbox img {
    width:auto;
    height:auto;
    max-width:90vw;
    max-height:90vh;
    padding:4px;
    background-color:rgba(0,0,0,0);
    border:2px solid whitesmoke;
}

#lightbox button {
    width:auto;
    height:auto;
    max-width:90vh;
    max-height:90vh;
    padding:4px;
    background-color:rgba(0,0,0,0);
    border:2px solid whitesmoke;
    cursor:pointer;
}

@media screen and (max-width: 1060px) {

    .filter-line-class {
        width:100%;
        max-width:100%;
        left:0;
        transform:none;
    }
    .filter-line, .filter-line-2 {
    max-width:300px
    }
    .image-row img:hover {
        transform:scale(1.00);
    }
    .image-row {
        max-width:100vw;
    }

    .image-box {
        width: 100%;
        max-width: 100%;
    }

    .image-row img {
        max-width:48%;
        width:100%;
        margin-bottom:2%;
        margin-right:1%;
        margin-left:1%;
    }

    #lightbox img {
        max-width:98vw;
        max-height:98vh;
        border:2px solid whitesmoke;
        padding:4px;
        margin:0px;
    }
}