/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: darkblue;
  color: red;
  font-family: "Comic Sans MS", "Comic sans", cursive;
  background-image: url("https://as2.ftcdn.net/v2/jpg/00/81/55/69/1000_F_81556974_8sF8cKszJaRfBGd5sDt1RXE2QbzDtQqs.jpg");
}
h1 {
  background-color: crimson;
  color: lime;
  font-size: 17px;
  filter: drop-shadow(20px 10px 50px black);
}
marquee {
  font-size: 67px;
}
li {
  transform: rotateY(30deg);
}

.fire-text {
  font-family: 'Comic Sans MS', cursive;
  font-size: 72px;
  color: orange;
  text-transform: uppercase;
  animation: flame 0.1s infinite;
}

@keyframes flame {
  0% {
    text-shadow:
      0 0 2px yellow,
      0 0 5px orange,
      0 0 10px red,
      0 0 15px darkred;
  }
  50% {
    text-shadow:
      0 0 3px yellow,
      0 0 7px orange,
      0 0 12px red,
      0 0 18px darkred;
  }
  100% {
    text-shadow:
      0 0 2px yellow,
      0 0 5px orange,
      0 0 10px red,
      0 0 15px darkred;
  }
}

.btn  {
  font-family: "Impact";
  position: relative;
  width: 180px;
  height: 80px;
  top: 30px;
  left: 800px;
  border-radius: 15px;
  background: linear-gradient(90deg, white, yellow, orange);
  border: 4px linear-gradient(60deg, white, darkgreen);
}
.btn:hover {
  transform: translateY(-7px) scale(1.05);
  filter: hue-rotate(-3deg);
}

#btn3 {
  font-family: "Comic Sans MS", cursive;
  position: relative;
  top: 0px;
  left: 400px;
  width: 120px;
  height: 40px;
  border-radius: 25px;
  background: linear-gradient(180deg, white, lime, green);
  cursor: pointer;
  z-index: 2
}
.download {
  position: absolute;
  background: linear-gradient(45deg, orange, hotpink);
  top: 15px;
  left: 10px;
  width: 600px;
  height: 350px;
  border-radius: 30px;
  z-index: 1;
}
.download:hover {
  transform: translateY(10px) ease;
}
.h2 {
  position: absolute;
  font-size: 80px;
  font-family: cursive;
  color: linear-gradient(90deg, white, yellow, orange, pink, purple);
  animation: float 0.8s infinite ease-in-out;
  z-index: 2;
}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0px); }
}
img {
  z-index: 3;
}
#woman {
  position: absolute;
  top: 150px;
  left: 60px;
  width: 250px;
  height: 250px;
}
#old-men {
  position: absolute;
  top: 150px;
  left: 320px;
  width: 250px;
  height: 250px;
}