body {
    background: var(--primary-background-color);
    color: var(--primary-p-color);
    font-family: 'Varela+Round', sans-serif;
    letter-spacing: 0.5px;
    line-height: 1.8;
    font-size: 62.5%;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
    overflow-y: visible;
    margin: 0;
    height: 100%;
    width: 100%;
}

:root {
    
    --primary-background-color: #202224;
    --navbar-background-color: #16191a;

    --border-top-color: #4F4D48;

    --primary-h1-color: #dce1e9;
    --primary-h2-color: #c1d1eb;

    --primary-p-color: #dce1e9;
    --secondary-p-color: #cdd3db;
    
    --prose-p-color: #AFC1D6;

    --primary-a-color: #AB92BF;
    --primary-a-hover-color: #885eaa;

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* NAVBAR */

.nav_bar {
    position: sticky;
    top: 0;
    background-color: var(--navbar-background-color);
    width: 100vw;
    padding-inline: 5rem;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.521));
    z-index: 100;
}

.nav_ul {
    list-style-type: none;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.nav_li {
    float: left;
    text-decoration: none;
}

.nav_li:hover {
    background: var(--primary-h2-color);
}

li a {
    display: inline-block;
    padding: 1rem;
    color: var(--primary-a-color);
}

.header_h1 {
    float: right;
    font-size: 2rem;
    padding: .5rem;
}

/* END NAVBAR  */

.body_container {
    background: var(--primary-background-color);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 100%;
    margin: 5rem;
    margin-bottom: 3rem;
}

.portfolio_segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h3 {
    font-size: 1.7rem;
    color: var(--primary-h2-color);
}

h2 {
    font-size: 1.7rem;
    color: var(--primary-h2-color);
}

p {
    font-size: 1.2rem;
    max-width: 65ch;
    margin-block: 2rem;
    margin-right: 1rem;
}

a {
    color: var(--primary-a-color);
}

.photo_rows_container {

}


/* references 
https://codepen.io/stefcharle/pen/Gydvbx
https://codepen.io/bbx/pen/Jxoqdg
https://codepen.io/ycw/pen/rZyZMa */

.photo_row {
    flex: 1;
    height: 4rem; 
    width: 25vw;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: 0.8s ease;
    margin: 0.1rem;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.349));
    cursor: pointer;
}

.photo_row:hover {
    height: 14rem;
    transition: 0.8s ease;
}

.wide_photo_row {
    flex: 1;
    height: 8rem; 
    width: 50vw;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: 0.8s ease;
    margin: 0.1rem;
}

.wide_photo_row:hover {
    height: 25rem;
    transition: 0.8s ease;
}

/* PHOTOS FOR PHOTO_ROWS */

.wildlife1 {
    background-image: url(/media/blinding_least_tern.jpg)
}

.wildlife2 {
    background-image: url(/media/blue_winged_warbler.jpg);
}

.wildlife3 {
    background-image: url(/media/snowy_seow.jpg);
}

.wildlife4 {
    background-image: url(/media/barred_in_snow.jpg);
}

.wildlife5 {
    background-image: url(/media/canada_jay.jpg);
}

.wildlife6 {
    background-image: url(/media/loon_family.jpg);
}

.wildlife7 {
    background-image: url(/media/sparkly_plover.jpg);
}

.wildlife8 {
    background-image: url(/media/two_loons.jpg);
}

.wildlife9 {
    background-image: url(/media/tree_swallow.jpg)
}

.wildlife10 {
    background-image: url(/media/pine_grosbeak.jpg);
}

.wildlife11 {
    background-image: url(/media/chickadee.jpg);
}

.wildlife12 {
    background-image: url(/media/robin_in_snow.jpg);
}

.wildlife13 {
    background-image: url(/media/flying_shrike.jpg);
}

.wildlife14 {
    background-image: url(/media/x);
}

.wildlife15 {
    background-image: url(/media/x);
}

.wildlife16 {
    background-image: url(/media/x);
}



.landscape1 {
    background-image: url(/media/bog_foliage.jpg);
}

.landscape2 {
    background-image: url(/media/cloudy_keene_valley.jpg);
}

.landscape3 {
    background-image: url(/media/vert_foggy_foliage.jpg);
}

.landscape4 {
    background-image: url(/media/moss_glen_falls.jpg);
}

.landscape5 {
    background-image: url(/media/green_foggy_valley.jpg)
}

.landscape6 {
    background-image: url(/media/down_the_path.jpg)
}

.landscape7 {
    background-image: url(/media/foggy_four_trees.jpg)
}

.landscape8 {
    background-image: url(/media/coliseum_falls.jpg)
}

.landscape9 {
    background-image: url(/media/pond_and_foliage.jpg)
}

.landscape10 {
    background-image: url(/media/very_foggy_trees.jpg)
}

/* END PHOTOS  */



/* LIGHTBOX MODAL  */

.lightbox {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.lightbox-image {
    margin: auto;
    display: block;
    max-width: 80%; /* Limit the width for horizontal images */
    max-height: 80vh; /* Limit the height based on the viewport height */
}

.vertical-image {
    max-width: 50%; /* More width restriction for vertical images */
}


.close {
    position: absolute;
    top: 4rem;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.nav-button {
    font-size: 2.2rem;
    display: flex;
    position: absolute;
    bottom: 1.5rem;
    margin: auto;
    background-color: #dadadabb;
    border: none;
    padding: 1px 8px;
    cursor: pointer;
    border-radius: 5px;
    transition: 250ms;
}

.nav-button:hover {
    background-color: #cacacabb;
}

#left-button {
    left: 45%;
}

#right-button {
    right: 45%;
}


/* END LIGHTBOX  */

.about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.hero_photo {
    display: flex;
}

.about_img {
    max-width: 500px;
    max-height: 700px;
}

/* HERO IMG LIGHTBOX  */

.hero_lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero_lightbox_image {
    max-width: 90%;
    max-height: 90%;
}

.hero_close {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

/* END HERO LIGHTBOX  */

ul.contact_list {
    list-style-type: none;
}

li.contact_item {
    text-decoration: none;
    font-size: 1.5rem;
}

a:hover {
    color: var(--primary-a-hover-color);
}

.footer {
    display: inline-block;
    width: 100vw;
    text-align: center;
    position: fixed;
    bottom: 0;
    margin-inline: auto;
    color: #c1d1eb;
    background-color: var(--navbar-background-color);
}

@media(max-width: 900px) {

    body {
        overflow-y: visible;
    }

    /* NAVBAR */

    .nav_bar {
        position: sticky;
        top: 0;
        background-color: var(--navbar-background-color);
        width: 100vw;
        padding-inline: 1rem;
    }

    .nav_ul {
        list-style-type: none;
        font-size: 1rem;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .nav_li {
        float: left;
        text-decoration: none;
    }

    li a {
        display: inline-block;
        padding: .5rem;
    }

    .header_h1 {
        float: right;
        font-size: 1.2rem;
        align-items: center;
        justify-self: center;
        padding: .5rem;
    }

    /* END NAVBAR  */

    .body_container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        margin-top: 3rem;
        margin-inline: 2rem;
    }

    .portfolio_segment {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    h3 {
        font-size: 1.3rem;
        color: var(--primary-h2-color);
    }

    .photo_rows_container {

    }

    .photo_row {
        flex: 1;
        height: 2rem;
        width: 66vw;
        background-position: center;
        background-size: cover;
        background-repeat: none;
        transition: 0.8s ease;
        margin: 0.1rem;
    }
    
    .photo_row:hover {
        height: 10rem;
        transition: 0.8s ease;
    }

    .lightbox-image {
        margin: auto;
        display: block;
        max-width: 95%; /* Limit the width for horizontal images */
        max-height: 85vh; /* Limit the height based on the viewport height */
    }
    
    .vertical-image {
        max-width: 90%; /* More width restriction for vertical images */
    }

    .about_img {
        max-width: 80vw;
        max-height: 700px;        
    }

    .close {
        top: 2rem;
    }
    
    .nav-button {
        display: flex;
        position: absolute;
        bottom: 10vh;
        margin: auto;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: 5px;
    }
    
    #left-button {
        left: 35%;
    }
    
    #right-button {
        right: 35%;
    }

}