body{
    background-color: dimgray;          /* Color of the page */
}

/* Styling the menu-bar */
#menu-bar{
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    background-color: black;
    color: purple;
    display: flex; 
    flex-direction: row; 
    justify-content:flex-end; 
    padding-top: 4px;
    padding-bottom: 2px; 
}

/* Hover styling for links on menu-bar */
#menu-bar a:hover {
    text-decoration: none;
    color: fuchsia;
    background-color: bisque;
}

/* Logo styling */
#logo{
    display: flex; 
    flex-direction: row; 
    align-items:baseline;
    margin-right: auto;
    font-size: 30px;
}

/* Logo image resizing */
#logo img{
    height: 60px;
    width: 210px;
}

/* Hyperlinks styling */
a{
    margin: 5px;
    padding: 5px;
}

.container{
    padding: 20px;
}

/* Styling Headings */
h1{
    font-family: fantasy, sans-serif;
    color: fuchsia;   
    }

h3{
    color: darkgreen;
    text-emphasis-style: triangle;
}

/* Layout style of the products */
.products{
  display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Styling the product cards on which the products appear */
.product-card{
    background-color:aliceblue;
    padding: 15px;
    border-radius: 10px;
    width: 200px;
    text-align: center;
    transition: all 0.3s ease;
}

.product-card:hover{
    transform: translateY(-20px); /* When user hovers the mouse over the product card, it moves slightly up */
}

/* Styling the appearance of the images on the product cards */
.product-card img{
    width: 100%;
    height: 150px;
    object-fit: contain;
}

/* styling the appearance of the images on individual product pages */
.gallery img{
    width: 200px;
    border-radius: 8px;
}

/* Styling paragraphs */
p2{
    color: orange;  /* indicates that the stock is not enough */
}

p3{
    color: springgreen; /* indicates that there is sufficient stock */
}

p4{
    color: red;   /* inicates that the stock is very low or sold out */
}


li{
    list-style-type: square; /* Changes the list bullets to squares */
}

/* Table styling */
table{
    border-collapse: collapse;
    border: solid 2px;
    background-color: dodgerblue;
}

td{
    border: solid 2px;
    border-collapse: collapse;
}

/* Styling the Buy Now and Send buttons */ 
button{
    box-sizing: border-box;
    font-size: 20px;
    background-color: darkgreen;
    border-radius: 4px;
}