@import url("https://fonts.googleapis.com/css?family=Kaushan+Script");

:root {
  --mainCream: #ffffdd;
  --mainYellow: rgb(249, 197, 148);
  --mainWhite: #fff;
  --mainBlack: #000;
  --yellowTrans: rgba(249, 228, 148, 0.5);
  --mainGrey: rgb(238, 238, 238);
  --mainBrown: #3b2819;
  --oldBrown: #a52a2a;
}

body {
  font-family: "Kaushan Script", cursive;
  background: var(--mainWhite);
  color: var(--mainBlack);
}
/* nav links */

nav{
  background-color: var(--mainBrown);
}

header{
  background-color: var(--mainBrown);
}

.header-banner{
  margin-bottom: 10rem;
  
}

.header-h1{
  color: var(--mainCream);
}

.header-logo{
  width: 120px;
  height: 120px;
}

.logo-wrapper{
  position: relative;
  margin-top: 23rem;
}

.navbar-toggler {
  outline: none !important;
}

.navbar-logo{
  width: 52px;
  height: 52px;
}

.about-logo{
  width: 200px;
  height: 200px;
}

.navbar-brand{
  color: var(--mainBlack);
  font-size: 1.6rem;
}
.toggler-icon {
  font-size: 1.6rem;
  color: var(--mainCream);
}
.nav-link {
  color: var(--mainCream);
  font-size: 1.2rem;
  transition: all 0.5s ease-in-out;
}
.nav-link:hover {
  color: var(--mainBlack);
}
/* end of nav links */
/* info icons */

/* end of info icons */
/* banner */

.max-height {
  min-height: calc(100vh - 76px);
  background: 
    url("../img/back4.jpg") center/cover fixed no-repeat;
  position: relative;
}
.banner {
  color: var(--mainWhite);
  margin-top: -4rem;
}
.banner-title {
  color: var(--mainBrown);
  font-size: 3rem;
}
.banner-link {
  font-size: 1.3rem;
  color: var(--mainBlack);
  border: 0.2rem solid var(--mainBlack);
  border-radius: 8px;
}
.banner-link:hover {
  background: var(--mainBrown);
  color: var(--mainWhite);
}
/* endo of banner */

/* cart buttons */
.btn-pink {
  color: var(--mainPink) !important;
  border-color: var(--mainPink) !important;
}
.btn-black {
  color: var(--mainBlack) !important;
  border-color: var(--mainBlack) !important;
}
.btn-black:hover {
  color: var(--mainWhite) !important;
  background: var(--mainBrown) !important;
}
.btn-pink:hover {
  background: var(--mainPink) !important;
  color: var(--mainBlack) !important;
}
/* end of cart buttons */

/* about */
.about-img__container {
  position: relative;
}

.about-img__container::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: -1.3rem;
  width: 100%;
  height: 100%;
  outline: 0.5rem solid var(--mainYellow);
  z-index: -1;
  transition: all 1s ease-in-out;
}
.about-img__container:hover:before {
  top: 0;
  left: 0;
}

/*end of  about */

/* store items */
.store {
  background: var(--mainGrey);
  border-radius: 15px;
  padding: 1px;
}

.filter-btn{
  font-size: .8rem;
}


.store-info{
  color: var(--oldBrown);
  font-size: .7rem;
}

.store-item-name,.store-item-value{
  color: var(--mainBrown) !important;
  font-size: 1rem !important;
}

.img-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.store-img {
  transition: all 1s ease-in-out;
}
.store-top{
  border-radius: 1.2rem;
}

.img-container:hover .store-img {
  transform: scale(1.2);
}
.store-item-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.75rem;
  background: var(--mainYellow);
  border-top-left-radius: 1rem;
  transition: all 1s ease-in-out;
  transform: translate(100%, 100%);
}
.img-container:hover .store-item-icon {
  transform: translate(0, 0);
}
.store-item-icon:hover {
  color: var(--mainWhite);
}
.store-item-value {
  color: --mainYellow;
  font-family: "Kaushan Script", cursive;
}
/*end of  store items */

footer{
  background-color: var(--mainBrown);
  padding: 3rem;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.circle-icon {
  padding:10px;
  color: var(--mainCream);
  border: 0.1rem solid var(--mainCream);
  border-radius: 50%;
  cursor: pointer;
}

.circle-icon:hover{
  background-color: var(--mainCream);
  color: var(--mainBrown);
  transition: ease-in-out 0.4s;
}

.h3-header{
  font-family: "Palatino Linotype"; 
  font-weight: 300;
  color: var(--mainCream);
}

.footer-hr{
  border-top: 1px solid rgb(212, 202, 202);
}
.footer-a{
  font-family: "Palatino Linotype"; 
  color: var(--mainCream);
  font-weight: 300;
  font-size: .8rem;
}

.f-icon{
  color: var(--mainCream);
}

.footer-a:hover{
  text-decoration: underline;
  color: var(--mainCream);
}

.footer-p{
  font-family: "Palatino Linotype"; 
  color: rgb(218, 214, 214);
  font-weight: 300;
  font-size: .9rem;
}

.copyright{
  font-family: "Palatino Linotype"; 
  color: rgb(185, 184, 184);
  font-size: .7rem;
  text-align: center;
}

.tl-font{
  font-family: "Courier New"; 
  font-weight: bold;
}