body{
    margin: 0;
    padding: 0;
    font-family: Rajdhani , Courier, monospace;
}

.img-container{
    display: flex;
    justify-content: space-between;
}

.img-container > img{
    width: 100%;
    max-width: 200px;
    margin-left: 2.5rem;
}

nav{
    background-color: #8f483f91;
    padding: 1px;
    color: rgb(240, 240, 240);
    
}

nav > ul{
    display: flex;
    justify-content: center;
    margin: 0;
    height: 5%;
    align-items: center;
}

 li{
    list-style-type: none;
}

#middle-nav{
    margin-left: 2rem;
    margin-right: 2rem;
}

.content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    margin:0;
    background-color: #d8d3d44d;
}

.content-extra{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
    background-color: #8f483f91;
}

footer{
    display: flex;
    justify-content: center;
    background-color: #403229ce;
}

.product{
    width: 100%;
    overflow: hidden; 
    justify-self: center;
    min-width: 300px;
}

.content > ul {
    margin: auto;
    font-size: 24px;
    background-color: #fff;
    -webkit-box-shadow: -7px 14px 20px 2px rgba(0,0,0,0.5); 
    box-shadow: -7px 14px 20px 2px rgba(0,0,0,0.5);
    padding-right: 2%;
}

.middle-detail{
    padding-top: 30%;
    padding-bottom: 30%;
}

h3{
    display: flex;
    justify-content: center;

}

.content-item{
    width: 70%;
}

.nav-item{
    padding: 0 1em;
    height: 100%;
}

.nav-item:hover{
    background-color: #8f483f;
    height: 100%;
    padding: 0 1em;
    transition: .5s;
}

a { 
    color: inherit;
    text-decoration: none;
 } 

 .login, .register{
    display:inline-block;
    padding:0.7em 1.4em;
    margin:0 0.3em 0.3em 0;
    border-radius:0.15em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    text-transform:uppercase;
    font-weight:400;
    color:#FFFFFF;
    background-color:#ad8770;
    box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
    text-align:center;
 }