* {
  box-sizing: border-box;
}
h2{
  font-family: "Pattaya", sans-serif;
}
p{
  font-family: "Gamja Flower", cursive;
}
#img-container {
  margin-bottom: 100px;
  padding: 35px 35px;
  width: 100%;
  height: 100%;
  position: relative;
}

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
.content {
  position: relative;
}

.content h2 {
  margin-top: 100px;
  margin-left: 650px;
  color: #20B2AA	;
  font-size: 6.5em;
  position: absolute;
  transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #808080;
}

.content h2:nth-child(2) {
  color: right, #ffbf02, #ed0082;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%, 100% {
    clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}

#welcome {
  font-family: 'Roboto', sans-serif;
}

#img-container span {
  font-family: 'Roboto', sans-serif;
  position: absolute;
  transition: .9s;
  color: rgb(11, 10, 19);
  /* padding: 10px; */
  text-align: center;
  padding-bottom: 200px;
  padding-top: 200px;
  width: 2000px;
}
#img-container .one2 {
  font-size: 90px;
  font-family: 'Roboto', sans-serif;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* font-size: 20px; */
  transition-delay: 1.5s;
}

#img-container .two {
  bottom: 0;
  left: 0;
  opacity: 0;
  transition-delay: 1.2s
}

#img-container .three {
  bottom: 0;
  right: 0;
  opacity: 0;
  transition-delay: .9s
}

#img-container:hover img {
  opacity: .5;
  transition-delay: .2s;
}

#img-container:hover .one2 {
  opacity: 1;
  transition-delay: .4s;
  transition-duration: 0.6s
}

#img-container:hover .two {
  opacity: 1;
  transition-delay: .6s;
  transition-duration: .6s
}

#img-container:hover .three {
  opacity: 1;
  transition-delay: .9s;
  transition-duration: .6s
}

#img-container img {
  transition-delay: 1.8s;
  transition-duration: .8s;
  width: 100%;
  height: 100%
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  background: #009688;
}

.fas {
  font-size: xx-large;
}

.back p {
  float: right;
  padding-left: 100px;
  padding-bottom: 10px;
}

.pic {
  /* display: inline; */
  box-shadow: 0 4px 4px 4px rgba(226, 53, 53, 0.2);
}

@import url("https://fonts.googleapis.com/css?family=Questrial");
html {
  min-height: 100%;
}


#renderContainer{
width: 100%;
height: 100%;
}

#box {
  width: 100%;
  height: 100%;
}

#card-container {
  margin-right: 50px;
  border-radius: 50px;
  position: relative;
  margin: 55px;
  padding-left: 50px;
  width: 300px;
  height: 300px;
  z-index: 1;
  float: left;
  perspective: 1000px;
  margin-bottom: 160px;
}

h2 {
  
  /* padding-left: 0px; */
  margin-left: 38px;
  font-size: 25px;
  padding-top: 10px;
  padding-bottom: 2px;
  /* text-align: center; */
  color: black;
}

h3 {
  padding: 5px;
  margin-left: 130px;
  /* margin-bottom: 20px; */
  color: rgb(223, 16, 16);
  font-size: 35px;
  /* text-align: center; */
}

.addToCart {
  margin-left: 140px;
  border: none2;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 70px;
  font-size: 18px;
}

img {
  border-radius: 50px;
  width: 300px;
  height: 300px;
}

#card, #card2, #card3 {
  border-radius: 50px;
  width: 100%;
  height: 100%;
  margin: 0%;
  transform-style: preserve-3d;
  transition: all 0.8s linear;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

#card:hover {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3);
}

#card2:hover {
  transform: rotateY(-180deg);
  box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3);
}

#card3:hover {
  transform: rotateX(180deg);
  box-shadow: 5px -5px 15px rgba(0, 0, 0, 0.3);
}

#card3 .back {
  transform: rotateX(-180deg);
}

.face {
  border-radius: 50px;
  position: absolute;
  width: 100%;
  height: 100%;
  /* backface-visibility: hidden; */
}

.back {
  border-radius: 50px;
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  opacity: .9;
  background: #F9F3E4;
}
.back button{
  opacity: 2;
}
h1, p {
  font-family: "Questrial", sans-serif;
  letter-spacing: 2px;
}

h1 {
  font-size: 1.8em;
  padding-top: 15px;
  color: #7c1b33;
}

p {
  padding-top: 50px;
  font-size: 45px;
}

.date {
  color: #D0B2AF;
}

#bottomButton {
  margin-top: 10px;
  margin-left: 100px;
  border: solid red;

}
.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 65vh;
  width: 100vw;
}

.item {
  border-radius: 50px;
  align-items: center;
  display: flex;
  height: 400px;
  justify-content: center;
  position: relative;
  width: 1200px;
  z-index: 0;
}
.item img {
  object-fit: cover;
  height: 400px;
  width: 1200px;
}
.item::before, .item::after {
  border-radius: 50px;

  background-image: linear-gradient(-180deg, #8c45fd 0%, #7520ff 97%);
  content: "";
  height: 100%;
  position: absolute;
  transition: all 0.2s;
  transition-delay: 0.2s;
  transform: translateY(0px) translateX(0px);
  width: 100%;
  z-index: -1;
}
.item::after {
  background-image: linear-gradient(0deg, #7f77e9 0%, #e96188 97%);
}
.item:hover {
  animation-name: hoverPop;
  animation-duration: 0.4s;
  animation-fill-direction: forward;
}
.item:hover img {
  box-shadow: 2px 2px 4px 0px rgba(10, 12, 15, 0.27);
  box-shadow: 0px 0px 30px 0px rgba(10, 12, 15, 0.27);
}
.item:hover::before {
  animation: slick-hover-2 3s 0.4s linear infinite;
  transform: translateY(-20px) translateX(-20px);
}
.item:hover::after {
  animation: slick-hover 3s 0.4s linear infinite reverse;
  transform: translateY(20px) translateX(20px);
}

@keyframes hoverPop {
  0%, 100% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.05);
  }
  66% {
    transform: scale(0.9);
  }
}
@keyframes slick-hover {
  0.00% {
    transform: translateY(20px) translateX(20px);
  }
  16.67% {
    transform: translateY(-13px) translateX(-9px);
  }
  33.33% {
    transform: translateY(4px) translateX(12px);
  }
  50.00% {
    transform: translateY(20px) translateX(-20px);
  }
  66.67% {
    transform: translateY(-3px) translateX(8px);
  }
  83.33% {
    transform: translateY(-15px) translateX(-11px);
  }
  100.00% {
    transform: translateY(20px) translateX(20px);
  }
}
@keyframes slick-hover-2 {
  0.00% {
    transform: translateY(-20px) translateX(-20px);
  }
  16.67% {
    transform: translateY(3px) translateX(-5px);
  }
  33.33% {
    transform: translateY(18px) translateX(-10px);
  }
  50.00% {
    transform: translateY(-20px) translateX(20px);
  }
  66.67% {
    transform: translateY(15px) translateX(-4px);
  }
  83.33% {
    transform: translateY(-1px) translateX(15px);
  }
  100.00% {
    transform: translateY(-20px) translateX(-20px);
  }
}

.deconstructed {
  position: relative;
  margin-left: 200px;
  height: 2.71em;
  color: transparent;
  font-family: 'Cambay', sans-serif;
  font-size: 10vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 4.03em;
}

.deconstructed > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #9dc6ec;
  pointer-events: none2;
}

.deconstructed > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
  mask-image: linear-gradient(black 25%, transparent 25%);
  animation: deconstructed1 5s infinite;
}

.deconstructed > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  animation: deconstructed2 5s infinite;
}

.deconstructed > div:nth-child(3) {
   -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  animation: deconstructed3 5s infinite;
}

.deconstructed > div:nth-child(4) {
   -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
  mask-image: linear-gradient(transparent 75%, black 75%);
  animation: deconstructed4 5s infinite;
}

@keyframes deconstructed1 {
  0% {
    transform: translateX(100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
  100% {
    transform: translateX(-120%);
  }
}

@keyframes deconstructed2 {
  0% {
    transform: translateX(100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(-125%);
  }
}

@keyframes deconstructed3 {
  0% {
    transform: translateX(100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-130%);
  }
}

@keyframes deconstructed4 {
  0% {
    transform: translateX(100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-135%);
  }
}