/*Importing fonts*/
@import url('https://fonts.cdnfonts.com/css/batman-forever');
@import url('https://fonts.cdnfonts.com/css/creamy-chalk');

/*styles for different classes in the page*/
body{
    background-color: rgb(253, 250, 250);
    
}

/*style for the product images*/
.gallery img{
    max-width: 100%;
    height: 300px;
    object-fit: fill;
    margin-top: 20px;
    padding-bottom: 00%;
    transition: ease-out 0.5s;
}

/*hover effect for the product images*/
.gallery img:hover{
    opacity: 100%;
}

/*settings for the gallery class*/
.gallery{
    padding: 80px 0px;
}

/*style for the menu*/
.menu{
   padding-top: 30px;
   font-size: large; 
   background-color: rgb(243, 86, 13);
}

/*style for the hyperlink texts*/
a {
    margin: 7%;
    align-items: center;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: rgb(27, 27, 26);
    transition: ease-in 0.3s;
}

/*hover effect for the hyperlink texts*/
a:hover {
    color: rgb(250, 249, 247);
}
ul {
    list-style-type: none;
    display: inline;  
}

/*stye for the store name*/
.name{
    font-size: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-family: 'Creamy Chalk', sans-serif;
    color: antiquewhite;
}

/*style for the store name section*/
.design{
    background-color: chocolate;
    background-image: url("images/12.jpg");
    background-blend-mode: overlay;
}

/*style for the navigation section*/
nav{
    align-items: center;
    display: inline;
}

/*style for the product name*/
.product_name{
    color: rgb(255, 140, 0);
    display: inline;
}

/*style for the product price*/
.product_price{
    color: rgb(36, 34, 32);
    display: inline;   
}

/*style for the buy button*/
.checkout{
    margin-top: 5px;
    margin-bottom: 50px;
    height: 25px;
    width: 200px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    outline: none;
    border-radius: 15px;
    border-color: chocolate;
    transition: ease 0.3s;
    background-color: chocolate;
}

/*hover effect for the buy button*/
.checkout:hover{
    box-shadow: inset 200px 0 0 0 rgb(240, 238, 236);
    cursor: pointer;
    color: rgb(241, 82, 7);
}

/*settings for the store logo*/
.logo img {
    width: 50px;
    height: 50px;
    mix-blend-mode: multiply;
}


/*style for the footer section*/
footer{
    background-color: chocolate;
    padding-top: 50px;
    padding-bottom: 30px;
}

/*style for the input box*/
input{
    display: flex;
    float: inline;
    align-items: center;
    border-color: rgb(253, 152, 1);
    border-radius: 10px;
    margin-bottom: 20px;
}

/*style for the input box name*/
.title{
    display: flex;
    margin-right: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
}

/*style for submit button*/

.submit{
    float: left;
    height: 35px;
    width: 100px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    outline: none;
    border-radius: 15px;
    border-color: chocolate;
    transition: ease 0.3s;
    background-color: rgb(243, 243, 243);
    margin-top: 20px;
    margin-bottom: 50px;
}

.submit:hover{
    color: chocolate;
}