/*GLOBAL STYLES*/
body {
    color:black;

}

img{
    max-width: 100%;
    height:auto;
}

body{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

main{
    margin-left:5%;
    margin-right: 5%;
    margin-top:2%;
}

.nav-title{
    font-family: "Rouge Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 20pt;
}

/*NAVBAR STYLES*/
header{
    background-color:#f7f5dc;
    padding:5px;
}

nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:50px;
    padding:10px;
}

.home-icon, .burger-icon{
    width:50px;
}

/*HIDE THE DESKTOP NAV ON MOBILE*/
.desktop-nav{
    display:none;
}

/* HAMBURGER MENU */

            .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            }

            .sidenav a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
            }

            .sidenav a:hover {
            color: #f1f1f1;
            }

            .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
            }


/* HOME STYLES */

.homepage-img{
    height: 60vh;
    background-image: url("../img/storefront.jpg");
    background-attachment:fixed;
    background-position-y: -400px;
    background-position-x: -385px;
}

.home{
    text-align: center;
}

.ordering-guide-container{
    background-color:rgb(231, 248, 231);
    padding: 1%;
    padding-left: 5%;
    padding-right: 5%;
    border-radius:40px;
    margin: 5%;
}

.centers{
    text-align:center;
}

.flower-drawing{
    width:100px;
}

.flower-drawings{
    width:50px;
}

.hours-text{
    background-color:rgb(250, 240, 247);
    ;
    text-align:center;
    border-radius: 40px;
    padding:5%;
}

.hours-sign{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom: 5%;
}

/* ABOUT STYLES */

.title{
    text-align: center;
}

#bio-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
  }

.bio{
    margin:10px;
  }

.name{
    text-align:center;
}
  
.pic{
    width:250px;
    height:250px;
    object-fit:cover;
    border-radius: 5%;
}

.bio-paragraph{
    width:250px;
}

.abt-container{
    align-items: center;
    z-index:2;
    position:relative;
}

.flower-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;

}


/* COLLECTION STYLES */

.collection-title{
    text-align:center;
}

#flowers, #filler{
    display:flex;
    flex-wrap:wrap;
}

.title{
    margin:5px;
    text-align:left;
}
.shop{
    width:150px;
    height:150px;
    object-fit: cover;
    border:1px solid #d5d5d5;
    border-radius: 5px;
    object-position: 25% 20%;
}

.fpic{
    width:150px;
    margin:8px;
}

.caption{
    text-align: center;
    width:150px;
    margin:0;
    padding:0;
}

/* GALLERY STYLES */

.portfolio-title{
    text-align:center;
}

#mySidenav{
    position:absolute;
    z-index:3;
}

.row{
    display:flex;
    flex-wrap:wrap; 
    padding:5%;
    margin:-10px;
}

.column{
    flex: 25%;
    max-width: 25%;
}

.gallery-img{
    height: auto;
    overflow: hidden;
    border: 2px solid white;
}

.gallery-img .image{
    vertical-align: middle;
    transition: transform 0.5s ease;
}

.gallery-img:hover .image{
    transform: scale(1.1)
}

/* FOOTER STYLES */
footer{
    display:flex;
    justify-content:space-between;
    line-height:90%;
    background-color:#f7f5dc;
    flex-wrap:wrap;
    align-content: center;
    padding:2%;
}

.address-container{
    text-align: center;
    line-height:20%;
}

.socials-container{
    align-content:center;
    line-height:20%;
}  

.contact-container{
    line-height:20%;
}

.content-statement{
    margin-top: 2%;
    font-size:small;
}

/*CSS ANIMATION*/
@keyframes flashText {
    from {text-shadow: none;}
    to {text-shadow: 1px 1px 3px black;}
  }


@media screen and (min-width:1080px){
    .mobile-nav{
        display:none;
    }

    /*Show the desktop nav*/
    .desktop-nav{
        display:flex;
        font-size:16pt;
        font-weight: 500;

    }

    .menu-item{
        text-decoration:none;
        color:black;
    }

    .menu-item:hover{
        color:gray;
        transition:0.3s;
        }

    .logo-dt{
        width:130px;
        object-fit: cover;
    }

    .homepage-img{
        background-position-y: -400px;
        background-position-x: -100px;
    }
    .home{
        margin-bottom: -20px;
    }
    
    .homepage-container{
        display:flex;
        justify-content:space-evenly;
        align-items: center;
    }

    .ordering-guide-container{
        width:50%;
        height:auto;
    } 

    .hours-sign{
        width:500px;
        margin-top:5%
    }

    .row{
        margin:-50px;
    }

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width:max-content;
        height: 100%;
        z-index: -1;
    }
}

@media screen and (max-width: 800px){
    .column{
        flex: 50%;
        max-width:50%;
    }
}

@media screen and (max-width:500px){
    .column{
        flex: 100%;
        max-width:100%;
    }
}