homepage.css

@font-face {
  font-family: quickstarter;
  src: url(./assets/Quick\ Starter.ttf);
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  color: white;
}
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#parent {
  background: radial-gradient(
    circle,
    rgba(53, 53, 53, 1) 0%,
    rgba(32, 32, 32, 1) 40%
  );
  /* background-color: rgb(32,32,32); */
  display: flex;
  flex-direction: row;
  align-items: center;
  /* padding-top: 50%; */
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
#heading {
  /* margin-top: 40vh; */
  z-index: 2;
  text-align: end;
  font-size: 80px;
  background: linear-gradient(90deg, #f9dec9, #ffba86, #ffbb5c, #ff9b50);
  background-size: 300%;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-family: quickstarter;
  font-weight: 700;
  letter-spacing: 3px;
  animation: gradient-heading 15s linear infinite alternate;
}
@keyframes gradient-heading {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 300%;
  }
}
#gun {
  /* position: absolute; */
  z-index: 0;
  opacity: 0.4;
}
#gun img {
  height: 700px;
  width: 500px;
}
#touch {
  position: absolute;
  bottom: 2%;
  font-size: 18px;
  letter-spacing: 2px;
}
@media (max-width: 450px) {
  body {
    overflow: hidden;
  }
  #heading {
    font-size: 20px;
  }
  #gun img {
    width: 150px;
    height: 200px;
  }
  #touch {
    font-size: 12px;
    bottom: 5%;
  }
}
@media (min-width: 451px) and (max-width: 700px) {
  body {
    overflow: hidden;
  }
  #heading {
    font-size: 30px;
  }
  #gun img {
    width: 200px;
    height: 300px;
  }
  #touch {
    font-size: 12px;
    bottom: 5%;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  body {
    overflow: hidden;
  }
  #heading {
    font-size: 50px;
  }
  #gun img {
    width: 300px;
    height: 450px;
  }
  #touch {
    font-size: 12px;
    bottom: 5%;
  }
}