/* Your code here */
html {
  font-size: 10px;
}
body {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
}
section {
  size: 100%;
  text-align: center;
  margin: 3em;
  background-size: 100%;
}
img {
  max-width: 50%;
  padding: 4em;
}
h1 {
  text-transform: capitalize;
  color: aliceblue;
  margin: 1em;
}
@media (min-width: 901px) {
  main {
    background-image: linear-gradient(140deg, black, red);
  }
  #violetrose,
  #pinkrose {
    display: none;
  }
}

@media (min-width: 501px) and (max-width: 900px) {
  main {
    background-image: linear-gradient(to right, black, blue);
  }
  #redrose,
  #pinkrose {
    display: none;
  }
}

@media (min-width: 0px) and (max-width: 500px) {
  main {
    background-image: linear-gradient(hotpink, #d8eefd);
  }
  #redrose,
  #violetrose {
    display: none;
  }
}