*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.cards{
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px;
}
.cards .card{
    background-color: #704b29;
    border-radius: 10px;
    position: relative;
}
.cards .card figure{
    width: 90%;
    height: 150px !important;
    margin-left: 5%;
    overflow: hidden;
}
.cards .card img{
    width: 100%;
    object-fit: contain;
}
.cards .card:hover{
    transform: scale(1.05);
    transition: 0.3s;
    box-shadow: 0px 0px 10px 5px #453312;
}
body{
    background-color: #f1f0f0;
    font-family: 'Times New Roman', Times, serif;
}

header{
    background-color: #2f230c !important;
    border-radius: 1px 1px 30px 1px;
    color: #f1f0f0;
    box-shadow: 0px 0px 10px 5px rgba(69, 51, 18, 0.5);
}
.leftCont{
    border-radius: 50px 1px;
    box-shadow: 0px 0px 10px 5px rgba(69, 51, 18, 0.5);
}
.footer{
    border-radius: 50px 1px;
    box-shadow: 0px 0px 10px 5px rgba(69, 51, 18, 0.5) !important;
}
.cards .card h3{
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
}
.cards .card p{
    color: #f1f0f0c0;
}
.cards .card figcaption{
    text-align: center;
    width: 100%; 
    margin-top: 155px;
    line-height: 0.1;
    position: absolute;
    color: #f1f0f0;

}

.leftCont a{
    text-decoration: none;
    color: #281d13;
}
.container{
    animation-name: change;
    animation-duration: 3s;
    transition: 3s ease;
}
@keyframes change{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}



#loginButton {
  flex: 1 1 auto !important;
  padding: 10px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transition: 0.5s !important;
  background-size: 200% auto !important;
  box-shadow: 0 0 20px #eee !important;
  border-radius: 10px !important;
  color: #281d13 !important;
 }

#loginButton:hover {
  background-position: right center !important;
}

#loginButton {
  background-image: linear-gradient(to right, #ffecd2 0%, #704b29 51%, #ffecd2 100%) !important;
}

#cart{
    background-color: #f1f0f0;
    border: 1px solid #453312 !important;
    color: #704b29 !important;
}
#cart:hover{
    background-color: #f1f0f0d6 !important;
    box-shadow: 0px 0px 10px 2px #2f230cbd !important;
}