style.css

:root {
    --bg-color: #F3EEEA;
    --hd-ft-color: #776B5D;
    --p-color: antiquewhite;
}

* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9 rem; /* Fixed font-size */
}

/* Start Body Styling */
body {
    background-color: var(--bg-color) ;
    margin: 0px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 50px 50px auto auto auto auto 50px;
    grid-template-areas:
        "header header header header header header header header"
        "logo logo navbar navbar navbar navbar navbar navbar"
        "section1 section1 section1 section1 section1 section1 section1 section1"
        "section2 section2 section2 section2 section2 section2 section2 section2"
        "section3 section3 section3 section3 section3 section3 section3 section3"
        "section4 section4 section4 section4 section4 section4 section4 section4"
        "footer footer footer footer footer footer footer footer";
}

/* End Body Styling */

.header, .logo, nav, main, footer
{
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Start Header Style */
.header {
    grid-area: header;
    background-color: var(--hd-ft-color);
    grid-column: span 8;
    padding: 10px;
    color: var(--p-color);
}
.adv
{
    width: 70%;
    color: var(--p-color);
    font-weight: bold;
    font-style: italic;
    text-align: center;
}
.dropdown
{
    background-color: var(--hd-ft-color);
    border: none;
    border-radius: 10px;
}
.dropdown .toggler
{
    color: var(--p-color);
    font-size: 12px;
}
.dropdown-menu .dropdown-item
{
    font-size: 12px;
    color: var(--hd-ft-color);
}
/* End Header Style */

/* Additional styles for other grid areas */
.logo {
    grid-area: logo;
    grid-column: span 2;
    background-color: var(--bg-color);
    /* border-right: 0.5px solid #ccc8c4; */
    color: #776B5D;
    font-weight: bold;
    font-style: italic;
}

nav {
    grid-area: navbar;
    grid-column: span 6;
    background-color: var(--bg-color);
}
.search #search{
    background-color: transparent;
    border: 0.5px solid #ccc8c4;
}
.search #search::placeholder{
    padding: 2px;
    font-style: italic;
}
.nav-underline
{
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

.nav-underline li
{
    margin-right: 20px;
}
.nav-underline li a
{
    text-decoration: none;
    color: var(--hd-ft-color);
}
.nav-underline li a:hover {
    color: #B0A695;
}
.nav-underline li .act {
    color: var(--hd-ft-color);
    font-weight: bolder;
}
.nav-underline li .act:hover {
    color: #B0A695;
}
#search
{
    margin: 0 30px 0 100px;
    border-radius: 10px;
    border: none;
    padding: 5px 10px;
}
nav .btn-light
{
    margin-right: 10px;
    color: var(--hd-ft-color);
    background-color: #EBE3D5;
}
.bi-cart3, .bi-person-circle
{
    margin-left: 30px;
}
.bi-cart3
{
    color: var(--hd-ft-color);
}
nav .btn-link
{
    text-decoration: none;
    color: var(--hd-ft-color);
}
.dropdown-menu .profile
{
    display: inline;
    font-size: 12px;
}
.first-section {
    grid-area: section1;
    display: grid;
    grid-template-columns: 1.5fr 6.5fr; /* Adjust as needed */
    grid-template-areas: "aside article";
    background-color: var(--bg-color);
    border-top: 0.5px solid #ccc8c4;
    height: auto; /* Adjust as needed */
}

.first-section aside {
    grid-area: aside;
    border-right: 0.5px solid #ccc8c4;
}

.first-section article {
    grid-area: article;
}
.categories
{
    margin: 15px 10px;
}
.categories .category
{
    list-style: none;
    margin-top: 10px;
}
.categories .category a
{
    text-decoration: none;
    color: var(--hd-ft-color);
}

footer {
    grid-area: footer;
    background-color: var(--hd-ft-color);
    grid-column: span 8;
}