html {
    background-color: rgb(240, 234, 214);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: larger;
    height: 100%;
}

body {
    margin: 0;
}


button {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: large;
}

h1 {
    padding-inline-start: 5%;
}

#main_wrapper {
    display: flex;
    flex-direction: column;
}

#top_wrapper {
    height: 5%;
    max-height: 5%;
    border-bottom: 1px solid black;

}
#body_wrapper{
    height: 90%;
    max-height: 90%;
    background-color: rgb(31, 31, 31);
    color: rgb(214, 214, 214);
    border-bottom: 1px solid black;

}
#bottom_wrapper{
    height: 5%;
    max-height: 5%;
    background-color: rgb(92, 92, 92);
}

a {
    text-decoration: inherit;
    color: inherit;
    color: #0072b1;
    text-decoration: underline;
}


#nav {
    display: flex;
    flex-direction: row;
    
    
    justify-content: right;

    button {
        text-transform: uppercase;
        padding: 20px;
        border: none;
        max-width: 16%;
        min-width: 180px;
        
        /* background-color: rgb(146, 129, 109); 
        box-shadow: 6px 6px 12px rgb(83, 83, 83);
        */
        background-color: rgba(0,0,0,0);
        color: rgb(139, 139, 139);
        font-size:medium;
        
    }
}





#gallery_buttons {
    width: 100%;
    display: flex;
    padding-top: 9px;
    justify-content: space-around;
}

#Gallery {
    
    display: flex;
    flex-direction: column;
    button{
        text-transform: uppercase;
        padding: 12px;
        border: none;
        width: 32%;
        background-color: rgb(214, 214, 214);
        color: rgb(139, 139, 139);
        box-shadow: 1px 1px 2px  rgb(83, 83, 83);
        border-radius: 1vh;
        height: 6vh;
    }
    height: 100%;
}



#image_container {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    

    p {
        width: 50%;
        display: flex;
        justify-content: center;
    }
}
    

#gallery_image {
    
    inline-size: 90%;
    border: 2px solid rgb(68, 68, 68);
    box-sizing: border-box;
    align-self: center;
    max-width: 1920px;
}

#About {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;

    p {
        padding: 1%;
    }
    
}

#contact-form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5px;

    input {
        max-width: 25%;
        padding: 5px;
        box-sizing: border-box;
        margin:  10px;
    }

    textarea {
        min-height: 100px;
        max-width: 75%;
        box-sizing: border-box;
        margin: 10px;
    }

    button {
        max-width: 25%;
        box-sizing: border-box;
        margin: 10px;
    }
    
}

/* media queries */

@media (max-width: 670px) {
    #nav {
        justify-content: space-around;
    }
}
@media (min-width: 1996px)  {
    #gallery_buttons {
        position: absolute;
        z-index: 2;
        bottom: 9vh;
        height: 6vh;
        
        button {
            background-color: rgba(214, 214, 214,0.3);
            color: rgb(139, 139, 139);
            max-width: 36vh;
        }

        button:hover {
            background-color:  rgba(214, 214, 214,0.6);
            color: rgb(97, 97, 97);
        }
    }

    #About {
        p {
            width: 50%;
            justify-self: center;
        }
    }

    #image_container:after {
        position: absolute;
        content:"";
        height:50%;
        width:100%;
        bottom:0;
        left:0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.76));
    }
}

@media (orientation: landscape) and (hover:none){
    #gallery_buttons {
        position: sticky;
        z-index: 2;
        bottom: 1%;

        button {
            height: 12vh;
        }
    }   
}