body{
    color: black;

}

                                         /* top navigation bar */
#nav{
    list-style-type: none;
    background-color: black;
    display: flex;
    justify-content: center;
    top:0;
    margin: 0;
    font-size: 25px;
    padding: 20px;
    position: fixed;
    width: 100%;
}

#nav img{
    object-fit: contain;
    width: 100%;
}

#nav li a{
    text-decoration: none;
    
    margin: 12px;
    color: white;
    /* border: 2px solid red; */
}

#nav li a:hover{
    color: white;
    background-color: black;
}

                                  /* this lets the user know what current page they are on  */
#currentpage{
    border-bottom: 2px solid white;
}


                                         /* id for the  showcase announcement */

#openingimg{
    background-image: url("../images/opening.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:600px;
    text-align: center;
    color: white;
  
}


 a {
    text-decoration: none;
}

.miniwriteups{
    font-size: 25px;
    margin-top: -40px;
    margin:0 auto 0 auto;
    width:50%;
}

                        /* title for the showcase */
.imgtitle{
    font-size: 80px;
    padding-top: 200px;
}

                        /* This section is for clothing discounts */
#discountsection{
    text-align: center;
    font-size: 40px;
    background-color: black;
    color: white;
  padding: 10px;
}


                        /* a display grid for the discount section  */
#discounts{
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style-type: none;
    margin: auto;
    width: 90%;
   
}

#discounts img{
    width: 100%;
    box-sizing: border-box;
}


#shirt{
    grid-column: 1 / span 1;
    /* border: 2px solid green; */
    height: 100%;
    
}

#trouser{
    grid-row: 1/ span 1;
    grid-column: 2/ span 1;
    /* border: 2px solid red; */
}


#jewelry{
    grid-row: 2/ span 1;
    grid-column: 2/ span 1;
    /* border: 2px solid blue; */
}


                                                /* This section is for the stylists page  */
.stylist-title{
    /* float: right; */
    text-align: center;
    font-size: 120px;
    color: white;
    padding-top: 340px;
}

#stylist{
    background-image: url("../images/stylist4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:1000px;
    margin-bottom: 20px;
    text-align: center;
  
   
}
                                        /* stylist description */

.stylist-desc{
    /* float: right; */
    font-size: 25px;
    /* padding: 20px; */
    width: 60%;
    color: white;
    margin: auto;
    width: 70%;
    text-align: left;
    
}
                                    /* css layout for buttons */
.button{
    display: inline-block;
    text-decoration: none;
    padding:15px;
    border-radius: 10px;
    color:black;
    background-color: white;
    /* text-align: center; */
    margin-top: 20px;
}

.button:hover{
    color: white;
    background-color: grey;
    transition: 0.3s ease;
}


                                                /* this is to display text when you hover above the images */
.overlay{
    position: absolute;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    transition: .5s ease;
    opacity:0;
    text-align: center;
    padding-top: 220px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 70px;
   
}

#discounts li{
    position: relative;
}

#discounts li a:visited{
    color: white;
}

#discounts li:hover .overlay{
    opacity: 1;
  }

                                        /* footer section  */
  .footer {
    display: flex;
    justify-content: space-around;
    background-color: black;
    color: white;
    border-top: 1px solid white;
   
  }
  
  .footer a{
    text-decoration: none;
    color: white;
  }

  .footer > div {
    margin: 10px;
    text-align: center;
    /* line-height: 75px; */
    font-size: 20px;
  }


                                                    /* the mini navigation menu in the footer  */
#nav2{
    list-style-type: none;
    margin: 0;
}

#nav2 li a{
    text-decoration: none;
}


                                                        /* Responsove design for screens less than 600px */

@media only screen and (max-width:600px){
    #nav{
        font-size: 10px;
        padding: 10px;
    }

   
    #openingimg{
        
        height:300px;
       
    }

    .imgtitle{
        font-size: 20px;
        padding-top: 70px;
    }

    .miniwriteups{
        font-size: 10px;
        margin-top: 20px;
       
    }

    .button{
        padding:10px;
        margin-top: 10px;
        font-size: 5px;
    }



    .stylist-title{
        font-size: 30px;
    
        padding-top: 100px;
    }
    
    #stylist{
        
        height:300px;
        /* margin-bottom: 20px; */
    }


    .stylist-desc{
   
        font-size: 10px;
        /* padding: 20px; */
        /* width: 60%; */
    }

    #discountsection{
    
        font-size: 15px;
     
    }
    
    
    .footer > div {
        font-size: 8px;
      }
    

}