html *
{
   font-family: Georgia, 'Times New Roman', Times, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   

}

/*For some reason, when width hits / gets smaller than 1290px, 
there's extra whitespace on the right hand side*/
body {
margin: 0px;
padding: 0px;
width:100%;
height:100%;
}

@media screen and (max-width: 400px) {
  body {
    margin: 0px;
    width: 390px;
    height:390px;
    } 
}


  .site-header_top {
    background-color: black;}
    .brand {
      font-weight: normal;
      font-size: 25px; 
      color: white;
      text-decoration: none;
      vertical-align: center;}
  
  @media screen and (max-width:500px) {
    .brand {
      display: flex;
      font-weight: normal;
      font-size: 12px; 
      color: white;
      text-decoration: none;
      vertical-align: center;}
    }
    
    .site-header_top ul {
      display: flex; 
    justify-content: space-evenly;}
    .site-header_top li:not(:last-child) {
      margin-right: 1.5rem; }
    .site-header_top .site-header_start {
      display: none; }

    @media screen and (max-width:400px) {
      .site-header_top {
      background-color: black; 
      padding: 2.5px;}
      .site-header_top ul {
      display: flex; 
      justify-content: space-evenly;}
      .site-header_top li:not(:last-child) {
        margin-right: 1.5rem; }
      .site-header_top .site-header_start {
        display: none; }
    }
    
    .header-address{
        color: white;
        font-size: 15px; 
        justify-content: flex-end;
        text-align: right;
        margin-right: 15px;
    }
    @media screen and (max-width:500px) {
      .header-address {
        display: flex;
        font-weight: normal;
        font-size: 8px; 
        color: white;
        text-decoration: none;
        vertical-align: center;}
      }

    .site-header_middle {
      display: flex;
      justify-content: left;
      align-items: center;
      margin-left: 15px;
    }

  
  .site-header_bottom {
    position: relative;
    background-color: white; }
    @media (max-width: 939px) {
      .site-header_bottom .site-header_end {
        order: -1; } }
  .site-header_wrapper {
    display: flex;
    justify-content: space-between; }
  
  .site-header_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    @media (min-width: 940px) {
      .site-header_wrapper {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       }
       }
  .site-header_end {
    display: flex;
    align-items: center; }

.layout {
    display: flexbox;
    width: 100%;
  }


/* Navbar container -- using basis of https://www.w3schools.com/css/css_dropdowns.asp */
.navbar {
    overflow: auto;
    background-color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    max-width: 100%;    
    align-items: center;
  }

@media screen and (max-width: 400px) {
  .navbar {
    overflow: scroll;
    background-color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex;
    justify-content: left;
    max-width: 100%;    
    align-items: center;
    } 
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    justify-content: center;
    margin-bottom: 5px;
  }


  /* @media screen and (max-width: 400px) {
    .navbar a {
      float: left;
      font-size: 12px;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      justify-content: center;
      margin-bottom: 5px;
    } */
    
  /* } */

  .navbar .icon {
    display: none;
  }
  /* When the screen is less than 1090 pixels wide, hide all links, except for the first one ("Home"). 
  Show the link that contains should open and close the topnav (.icon) */

  /* @media screen and (max-width: 1090px) {
  .navbar a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .navbar .icon {
    float: right;
    display: block;
  }
}  */

@media screen and (max-width: 1090px) {
  .navbar a{
    font-size: 13px;
  }
}

/* /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
/* @media screen and (max-width: 1090px) {
  .navbar.responsive {position: absolute;}
  .navbar.responsive .icon {
    position: relative;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive .dropdown{float: none;}
  .navbar.responsive .dropdown-content {position: relative;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
} */

  .navbar a:hover {
    background-color: #ddd;
    color: black;

  }

  .active {
    background-color: #04AA6D;
    color: white;
  } */

  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: black;
    color: black;
    padding: 14px 16px;
    background-color: inherit;
    justify-content: center;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a grey background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(110, 110, 110);
  }

  /* Dropdown content (hidden by default) */

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
    /* issues with making this work consistenly using the phone mode*/ 
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }



  @media screen and (max-width: 1090px) {
    .dropdown .dropbtn {
      font-size: 13px;
    }
  }

  @media screen and (max-width: 1090px) {
    .home-btn {
      width: 40px;
      height:40px;
      margin: 0px;
    }
  }
  
  @media screen and (max-width: 1090px) {
    .cart a{
      margin-bottom: 2px;
    }
  }

  /* Autumn special ad*/
  .autumn-special{
    color: white;
    font-size: 20px; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(102, 102, 102, 0.616);
    text-decoration: none;
    height: 400px;
    width: 100%;
    background-image: url("products/FallFlower.png");
}

@media screen and (max-width: 400px){
  .autumn-special{
    color: white;
    font-size: 23px; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(102, 102, 102, 0.616);
    text-decoration: none;
    height: 200px;
    width: 100%;
    background-image: url("products/FallFlower.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
}

.autumn-special .box {
  background-color: rgba(128, 128, 128, 0.918);
  padding: 20px;
  }
  
  @media screen and (max-width: 400px){
    .autumn-special .box {
      background-color: rgba(128, 128, 128, 0.918);
      padding-top: 10px;
      }
  }

.autumn-special .shopbtn{
    color: white;
    font-size: 15px; 
    text-align: center;
    outline: black;
    outline-style: solid;
    outline-offset: 3px;
    outline-width: 3px;
    text-decoration: none;
}
@media screen and (max-width: 400px) {
  .autumn-special .shopbtn{
    color: white;
    font-size: 11px; 
    text-align: center;
    outline: black;
    outline-style: solid;
    outline-offset: 3px;
    outline-width: 3px;
    text-decoration: none;
}
}


.product_header{
  font-size: 24px;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 400px) {
  .product_header{
    font-size: 20px;
    display: flex;
    justify-content: center;
  }
}
.grid-alignment {
  display: flex;
  justify-content: center;
}

.products{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap:wrap;
  

}

.grid-item {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;

}

/* Buy product hover button*/
.button{
  display: none;
  
}

.button a {
  display: flex;
  text-decoration: none;
  font-size: 20px;
  color: black;
  outline: black;
  justify-content: center;
  align-content: center;
  outline-style: solid;
  outline-width: 2px;
  width: 90px;
  
}

/* Hover for each product; need to find more efficient way to do in one block*/ 
.sunflower:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;

  transition: 0.7s;
}

.floral:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

.brom:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

.lilies:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

.bloom:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

.bird:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

.thanksgiving:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

.evergreen:hover + .button, .button:hover{
  display: block;
  padding: 2px;
  align-self: center;
  transition: 0.7s;
}

/* End of hover on product*/ 

@media screen and (max-width: 400px) {
  .grid-item {
    width: 50%;
  }
}

.prod_description {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
@media screen and (max-width: 400px) {
  .prod_description {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }
}

.custom-flowers-wrapper {
  display: flex;
  justify-content: center;
}

.custom {
  font-size: 22px;
  flex: 1;
}

@media screen and (max-width:500px){
  .custom {
    flex: 1;
    justify-content: left;
}
}


.custom-block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

@media screen and (max-width: 550px) {
  .custom-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0px;
    max-width: 100%;
    margin-bottom: 15px;
  }
}

.custom-flowers {
  display: flex;
  justify-content: center;
  padding: 15px;
}

@media screen and (max-width:500px){
  .custom-flowers {
    flex:1;
    justify-content: center;
    align-items: center;
}
}

.custom-flowers-descr {
  display: flex;
  flex-direction: column;
  width: 300px;
}

@media screen and (max-width: 400px) {
  .custom-flowers-descr {
    display: flex;
    flex-direction: column;
    width: 200px;
    align-items: center;
    margin-bottom: 20px;
  }
  
}

@media screen and (max-width: 400px) {
  .cust-flow-para-descr {
    display: none;
  }
  
}

@media screen and (max-width: 400px) {
  .custom {
    font-size: 15px;
  }
  
}

/* Having issues centering*/
.shopnow{
  display: 1;
  width: 75px;
  color: black;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  outline: black;
  outline-style: solid;
  outline-offset: 3px;
  outline-width: 3px;
  margin-left: 100px;
  margin-right: 100px;
}

@media screen and (max-width: 400px) {
  .shopnow{
    display: 1;
    width: 75px;
    color: black;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    outline: black;
    outline-style: solid;
    outline-offset: 3px;
    outline-width: 3px;
    margin-top: 10px;
  }
}


/* Footer setup */
.footer {
  display: flex;
  background-color: black;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.footer-lhs {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}


h3 {
  font-weight: normal;
  font-size: 18px;
  color: white;
  display: flex;
  justify-content: left;
  margin-bottom: 10px;
}


.footer a{
  text-decoration: none;
  color: white;
}

.basic-about{
  color: white;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: left;
  align-content: left;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 15px;
  margin-top: 20px;
}

.basic-address-bottom {
  color: white;
  list-style: none;
  display: flex;
  justify-content: left;
  align-content: left;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 15px;
}


.basic-hrs-bottom {
  color: white;
  list-style: none;
  display: flex;
  justify-content: left;
  align-content: left;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 15px;
}



.basic-deliv-bottom {
  display: flex;
  justify-content: left;
  align-content: left;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 15px;
  padding-left: 5px;
  margin: 0px;
  width: 350px;
}

.delivery-blurb {
  color: white;
  display: flex;
}

.list-towns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.towns {
  padding: 10px;
}

h4 {
  background-color: black;
  color: white;
  margin: 0px;
  display: flex;
  justify-content: center;
  padding: 3px;
}

/* Unsure why white lines show up between the different parts of the footer*/

@media screen and (max-width: 400px) {
  h4 {
    background-color: black;
    color: white;
    margin: 0px;
    display: flex;
    justify-content: center;

  }
}

.socials {
  display: flex;
  background-color: black;
  justify-content: center;
  padding: 10px;
}


body {
    background-color: white;
}