@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");

* {
  font-family: cursive;
}


/*header
header{
    display: flex;
    justify-content: space-between;
    margin: 10px 10px 0 10px;
}
.ttt{
    font-family: "Luckiest Guy", cursive;
    color: #000000b9;
    letter-spacing: 8px;
    font-weight: 400;
    font-size: 40px
}
.ttt:hover{
    opacity: 0.7;
    font-size: 45px;
    letter-spacing: 9px;
}
.sa{
font-size: 25px;
margin-top: 10px;
color: black;
margin: 5px 30px;
transition-duration: 0.5s;

}
.profile{
    margin: 40px 0 0 0;
    text-align: center;
    cursor: pointer;
}
.fa-cart-shopping:hover{
    animation-name: sh;
    animation-duration: 0.5s;

}
@keyframes sh{
    0%{
        translate: 0 0;
    }
    50%{
        translate: 20px 0;
    }
    100%{
        translate: -20px 0;
    }
}
.navbar-expand-lg{
    margin-bottom: 20px;
    
}

.nav-link{
    color: black;
    margin: 5px 23px;
    font-weight: 500;
}


ul{
    border: none;
    border-bottom: solid 2px rgba(0, 0, 0, 0.307);
    
}*/

/*slide*/
.slid {
  
  width: 80%;
  height: 400px;
  background-image: url(picture/IMG_8939.JPG);
  margin: auto;
  border-radius: 40px;
  animation-name: sli;
  animation-duration: 50s;
  background-image: url(picture/landscape-mountains-minimalist-o7-1360x768.jpg);
  background-size: contain;
  background-position: center;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0.3s;
}
@keyframes sli {
  0% {
    background: url(picture/photo_2024-04-06_20-02-51.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  10% {
    background: url(picture/photo_2024-04-07_01-21-11.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  20% {
    background: url(picture/photo_2024-04-07_01-21-22.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  30% {
    background: url(picture/photo_2024-04-07_01-22-43.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  40% {
    background: url(picture/photo_2024-04-07_01-22-52.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  50% {
    background: url(picture/photo_2024-04-07_01-22-59.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  60% {
    background: url(picture/photo_2024-04-07_01-23-23.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  70% {
    background: url(picture/photo_2024-04-07_02-37-10.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  80% {
    background: url(picture/photo_2024-04-07_02-36-59.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  90% {
    background: url(picture/photo_2024-04-07_13-02-18.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
  100% {
    background: url(picture/photo_2024-04-07_13-02-23.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
  }
}
.slid:hover {
  animation-play-state: paused;
  cursor: pointer;
}
/*search*/

main #ser:focus {
  width: 530px;
  opacity: 1;
}
main {
  width: fit-content;
  margin: auto;
}
main .h2 {
  display: inline-block;
  margin: 30px 0;
  font-family: "Alfa Slab One", serif;
  letter-spacing: 3px;
}
#wr {
  color: #2d9596;
}
main #ser {
  margin: 30px 0;
  border-radius: 40px;
  padding: 16px;
  width: 450px;
  opacity: 0.8;
  border: none;
  outline: none;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.498);
  transition-duration: 0.3s;
}

/*Product*/

figure {
  height: 480px;
  width: 310px;
  background: white;
  margin: 20px 25px;
  border: none;
  border-radius: 15px;
  position: relative;
  transition-duration: 0.5s;
  padding: 5px;
}
figure:hover {
  scale: 1.05;
  box-shadow: 0 0 10px 5px #eee;
}

.mgmigo {
  object-fit: contain;
  width: 250px;
  height: 250px;
  margin: 15px;
}
.prduct {
  font-weight: bold;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.buttn {
  display: flex;
  justify-content: space-evenly;
  font-size: 27px;
  padding: 10px 0;
  margin: 0 30px 10px 30px;
  border: none;
  outline: none;
  cursor: pointer;
}
.kdit {
  width: fit-content;
  margin: auto;
  transition-duration: 3s;
}
sup {
  font-weight: 400;
  font-size: 12px;
}