html
    {
        --font-color: #060b08;
        --main-color: #3f7652;
        --main-shadow: #254631;
        --accent-color: #763f63;
        --off-white: #fdfdfd;
        --faded-off-white: rgba(253, 253, 253, .5)
        --secondary-shadow: rgba(6, 11, 8, 0.1)
    }

body
    {
        /* margin: .5em 1em; */
        margin: 0;
        text-align: center;
        font-family: "DM Sans";
        background-color: var(--off-white);
    }

header
    {
        padding: 0 .5em;
        margin-top: -3em;
        width: 100vw;
        display: flex;
        flex-direction: row;
        position: fixed;
        background-color: var(--off-white);
        box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);

    }

.logo
    {
        height: 5em;
        flex: 1;
        margin-top: 2em;
    }

.spacer
    {
        flex: 1;
        flex-grow: 3;
    }
    
#hamburger-menu
    {
        flex: 1;
        margin: 2.5em;
        margin-right: 5em;
    }

#nav-button
    {
        width: fit-content;
    }

.dropdown-content, .dropdown
    {
        display: none;
    }

.menu-bars
    {
        width: 1.5em;
        height: .17em;
        background-color: var(--main-color);
        margin: .23em 0;
        border-radius: 2px;
    }

.change1
    {
        transform: translate(0, 6.5px) rotate(-45deg);
        width: 1.5em;
    } 

.change2
    {
        opacity: 0;
    }

.change3
    {
        transform: translate(0, -6.5px) rotate(45deg);
        width: 1.5em;
    }

#nav-menu
    {
        display: none;
        position: fixed;
        right: 0;
        background-color: var(--off-white);
        width: 100vw;
        height: 90vh;
    }

.nav-items
    {
        font-size: 120%;
        font-family: "Montserrat", sans-serif;
        color: var(--font-color);
        text-transform: uppercase;
        list-style-type: none;
        margin-bottom: 2em;
    }

.nav-items a
    {
        text-decoration: none;
        color: var(--font-color);
    }

.different-nav a
    {
        color: var(--off-white);
    }

.nav-items:hover, .nav-items:active
    {
        color: var(--accent-color);
        border-bottom: var(--accent-color) solid .25px;
    }

.different-nav
    {
        background-color: var(--main-color);
        border-radius: 5px;
        color: var(--off-white);
    }

.different-nav:hover, .different-nav:active
    {
        color: var(--off-white);
        background-color: var(--main-shadow);
    }


.page-title-properties, .page-title
    {
        font-family: "Montserrat", sans-serif;
        font-size: 200%;
        color: var(--font-color);
        border-bottom: var(--main-color) 1px solid;
        margin: 2em 20% 3em 20%;
        padding-bottom: 1em;
        padding-top: 5em;
    }

#city
    {
        margin-bottom: 3em;
        color: var(--font-color);
    }

#home-paragraph
    {
        padding: 2em 2em;
        font-size: 130%;
        color: var(--font-color);
        margin: 0 10% 4em 10%;
    }

.icons
    {
        color: var(--main-color);
        margin-bottom: 1em;
    }

.home-buttons
    {
        border: none;
        border-radius: 10px;
        background-color: var(--main-color);
        color: var(--off-white);
        text-decoration: none;
        padding: 2.5em 5em;
        margin-bottom: 4em;
        text-align: center;
    }

a
    {
        text-decoration: none;
    }

.home-buttons:hover, .home-buttons:active
    {
        background-color: var(--main-shadow);
    }

#properties-section
    {
        margin: 3em auto;
    }

#our-properties
    {
        border-bottom: var(--main-color) solid 1px;
        margin: 1em 3em;
        padding-bottom: .5em;
    }

.apartments a
    {
        text-decoration: none;
        color: var(--font-color);    
    }

#doc-upload-section
    {
        margin: 6em auto;
    }

.drop-zone 
    {
        border: 2px dashed var(--main-shadow);
        border-radius: 10px;
        width: 300px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
        margin: 20px auto;
        background-color: #f9f9f9;
        color: var(--font-color);
    }


.drop-zone.active 
    {
        border-color: var(--font-color);
        background-color: rgba(37, 70, 49, .5);
        color: var(--font-color);
    }

#send-doc-button
    {
        background-color: var(--main-color);
        border: none;
        color: var(--off-white);
        text-transform: uppercase;
        height: 3em;
        width: 10em;
        border-radius: 5px;
    }

/* Apartments Pages */
h1
    {
        font-family: "Montserrat", sans-serif;
    }

.property-address
    {
        margin: 0 25vw;
    }

.page-link-buttons
    {
        display: block;
        background-color: var(--main-color);
        color: var(--off-white);
        text-decoration: none;
        padding: 1em;
        margin: 3em 2em;
        border-radius: 5px;
    }

.page-link-buttons:hover, .page-link-buttons:active
    {
        background-color: var(--main-shadow);
    }

/* Gallery Rough Draft */
.gallery-container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.big-image
    {
        position: relative;
        z-index: -10;

    }


/* Innactive until I can get the gallery arrows to work */
/* .prev-btn,
.next-btn 
    {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        font-size: 2em;
        color: #ffffff;
        cursor: pointer;
    }

.prev-btn
    {
        left: 10px;
    }

.next-btn
    {
        right: 10px;
    } */

.small-images
    {
        display: flex;
        justify-content: center;
    }

.small-images img
    {
        width: 15vw;
        height: auto;
        margin: 0 5px;
        cursor: pointer;
    }

.property-features, .one-bedroom, .two-bedroom, .studio
    {
        margin: 10em auto;
    }

.features, .includes
    {
        margin: 2em auto;
    }

.includes-heading
    {
        font-size: 140%;
    }

li
    {
        list-style-type: none;
    }


ul
    {
        padding: 0;
    }

/* Contact Page */
.contact-buttons
    {
        display: flex;
        justify-content: space-evenly;
    }

.contact-buttons a:hover, .contact-buttons a:active
    {
        scale: .8;
    }

#contact-container
    {
        border: var(--main-color) solid 1px;
        border-radius: 2em;
        margin: 5% 20% 10% 20%;
    }

.contact-info
    {
        margin-top: 4em;
    }


.contact-info a
    {
        text-decoration: none;
        color: var(--font-color);
    }

.contact-info a:hover, .contact-info a:active
    {
        color: var(--accent-color);
        border-bottom: var(--accent-color) 1px solid;
    }

#unit-size, #move-in-date, #send-button
    {
        width: 30vw;
        margin-bottom: 1em;
    }

.form-field
    {
        width: 70vw;
        font-family: "montserrat", sans-serif;
        margin-bottom: 1em;
    }

#send-button
    {
        font-family: "montserrat", sans-serif;
        border: none;
        background-color: var(--main-color);
        padding: 1em 2em;
        border-radius: 1em;
        text-transform: uppercase;
        color: var(--off-white);
    }

#send-button:hover, #send-button:active
    {
        background-color: var(--main-shadow);
    }

#form-disclaimer
    {
        font-size: 60%;
    }

footer
    {
        border-top: #bbbbbb .2px solid;
        padding: 3em 0;
    }

footer p 
    {
        font-size: 90%;
    }

/* Desktop layout */
@media (min-width: 850px)
    {

        #nav-button
        {
            display: none;
        }

        .logo
        {
            height: 8em;
            padding-top: 1em;
        }
        
        #nav-menu
        {
            display:block;
            height: 20vh;
            background-color: transparent;
            position: relative;
            left: 5vw;
            top: 10vh;
        }

        .dropdown
        {
            display: block;
        }

        #nav-menu ul
        {
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }

        .nav-items
        {
            font-size: 90%;
            margin-right: 5vw;
        }

        .apartments-nav
        {
            display: none;
        }

        .dropdown-content 
        {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 2em;
            left: 7em;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            background-color: var(--off-white);
            z-index: 20;
        }

        .dropdown-content a
        {
            text-decoration: none;
            color: var(--font-color);
            margin: .5em;
        }


        .dropdown-apartments:hover, .dropdown-apartments:active
        {
            color: var(--accent-color);
            text-decoration: underline;
            background-color: var(--secondary-shadow);
        }

        .dropdown:hover .dropdown-content 
        {
            display: flex;
        }

        .different-nav
        {
            padding: 1em 2em;
        }

        #heading-section
        {
            width: 70vw;
            margin: 2em auto;
            padding: 2em;
        }

        
        
    #hero
    {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("assets/hero.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 70vh;
        position: relative;
        z-index: -100;
        margin: 0 -21%;
    }
    .page-title
    {
        font-family: "Montserrat", sans-serif;
        font-size: 200%;
        color: var(--off-white);
        padding-bottom: .5em;
        padding-top: 5em;
        border-bottom: none;
        margin: 0;
    }
        #city
        {
            color: var(--off-white);
        }

        #home-paragraph
        {
            padding-top: 0;
            color: var(--off-white);
        }

        #button-section
        {
            display: flex;
            justify-content: space-evenly;
        }

        #properties-section
        {
            width: 40vw;
            position: relative;
            margin: 4em auto;
            z-index: -15;
            border: var(--main-color) solid 1px;
            border-radius: 2em;
        }

        #doc-upload-section
        {
            display: inline-block;
            margin-top: 6em;
            width: 50vw;
        }

        #upload-documents
        {
            border-bottom: var(--main-color) solid 1px;
            padding: 1em;
            margin-bottom: 2em;
        }

        /* Apartments pages */
        header
        {
            margin-top: -5em;
        }
        .page-title
        {
            padding-top: 3em;
            font-size: 300%;
        }

        .property-img
        {
            width: 40vw;
            position: relative;
            right: 5vw;
            z-index: -15;
        }

        .property-address
        {
            position: relative;
            right: 5vw;
            z-index: -15;
            width: 20vw;
        }

        .page-link-buttons
        {
            height: 3vh;
            width: 18vh;
            font-size: 130%;
            padding-top: 1em;
        }

        .room-link-buttons
        {
            margin-right: 15vw;
        }

        .property-info
        {
            display: flex;
            align-items: center;
        }

        .property-features
        {
            position: relative;
            z-index: -15;
            margin-top: 3em;
            border: var(--main-color) solid 1px;
            border-radius: 2em;
            padding: 1.5em;
            width: 15em;
            line-height: .5;
        }

        .room-containers
        {
            display:flex;
            justify-content: space-evenly;
        }

        .room-headings
        {
            font-size: 200%;
            border-bottom: var(--main-color) solid 1px;
            width: 50vw;
            margin: 2em auto;
            padding-bottom: 1em;
        }

        .includes-container
        {
            border: var(--main-color) solid 1px;
            border-radius: 2em;
            padding: 1.5em;
        }

        .includes
        {
            line-height: .5;
        }

        .gallery-container
        {
            width: 30vw;
            margin-top: .5em;
        }

        .big-image img
        {
            width: 30vw;
        }

        .small-images img
        {
            width: 5vw;
        }

        /* contact page */
        .form-field
        {
            width: 40vw;
            margin-bottom: 2em;
        }

        #unit-size, #move-in-date, #send-button
        {
        width: 20vw;
        margin-bottom: 2em;
        }

        #send-button
        {
            position: relative;
            bottom: 8em;
            left: 3em;
        }
    }