/* animations starts */

@keyframes headerwali {
  0% {
    background-image: linear-gradient(
      to right,
      rgb(81, 82, 75),
      rgb(80, 16, 77)
    );
  }
  25% {
    background-image: linear-gradient(
      to right,
      rgb(51, 19, 19),
      rgb(107, 107, 97)
    );
  }
  50% {
    background-image: linear-gradient(
      to right,
      rgb(78, 94, 77),
      rgb(20, 23, 48)
    );
  }
  100% {
    background-image: linear-gradient(
      to right,
      rgb(25, 80, 39),
      rgb(97, 97, 96)
    );
  }
}

@keyframes hurryupwali {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shadow {
  0% {
    box-shadow: 2px 3px 5px rgb(83, 79, 79);
  }
  25% {
    box-shadow: 2px -3px 8px rgb(36, 32, 32);
  }
  50% {
    box-shadow: 0px 3px 2px rgb(66, 160, 121);
  }
  100% {
    box-shadow: -6px -3px 4px red;
  }
}

body {
  margin: 0px;
  background-image: linear-gradient(
      to bottom,
      rgba(187, 187, 187, 0.73),
      #0e2f40
    ),
    url("images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Comic Neue", cursive !important;
  font-weight: 700 !important;
}

#body {
  color: white;

  /* height: 2000px; */
}

#timer {
  height: 50px;
  background-image: linear-gradient(to right, red, yellow);
  position: fixed;
  top: 0;
  width: 100%;
  animation-name: headerwali;
  animation-duration: 4s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  font-family: "Orbitron", sans-serif;
}

#time {
  margin: 0px;
  text-align: center;
  padding-top: 1em;
  color: wheat;
}

#inner1 {
  /* background-color: yellow; */
  /* height: 500px; */
  padding: 30px;
}
#inner2 {
  /* background-color: violet; */
  /* height: 500px; */
  padding: 30px;
}

#detail {
  background-color: #0715134f;
  /* height: 470px; */
  box-shadow: 2px 3px 4px red;
  animation-name: shadow;
  /* animation-duration: 4s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; */
  padding: 30xp 0px;
}

#buy {
  background-color: #0715134f;
  /* height: 470px; */
  padding: 30xp 0px;
  box-shadow: 2px 3px 4px red;
  animation-name: shadow;
  animation-duration: 1s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.grandimg {
  max-width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.hurryup {
  animation-name: hurryupwali;
  animation-duration: 1s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  font-family: "Permanent Marker", cursive;
  color: orange;
}