body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
}
header {
    background-color: #fffbf7;
    color: #fff;
    text-align: center;
    font-family: 'Exo 2', sans-serif;
    position: relative;
}

.logo {
    margin-top:20px;
    margin-bottom:20px;
    max-width: 80px; 

}

.logo-container {
    position: absolute;
    top: 20px;
    right: 40px;
    display: flex;
}

/* User account and cart icon */
.additional-logo {
    max-width: 30px;
    max-height:30px;
    margin-left: 10px;
    margin-right:20px;
    cursor: pointer;
}

/* Navigation bar */
nav {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #9f9a94; 
    padding: 10px;
}
nav a {
    color: #fff;
    font-size:20px;
    font-weight:700;
    text-decoration: none;
    padding: 10px;
    margin: 0px 28px;
    transition: color 0.3s;
            }
nav a:hover {
    color: gray; 
}

/* Span beside cart icon */
.market-span {
    color: black;
    margin-left: 0px;
}

.black-text {
    color: black;
    font-size:20px;
}


@media screen and (max-width: 500px) {
    header {
        font-size: 14px;/
    }

    .logo-container {
        top: 10px;
        right: 10px; 
    }

    .logo {
        margin-top:20px;
        margin-bottom:20px;
        max-width: 50px; 
    }

    .additional-logo {
        max-width: 20px;
        max-height:20px;
        margin-right: 5px;
    }

    .black-text{
        font-size:12px;
    }

    nav {
        display: flex; 
        justify-content: center;
        background-color: #9f9a94;
        padding: 2px;
    }

    nav a {
        margin: 0;
        font-size:14px;
        padding:6px;
    }
}