p {
  color: red;
}

/* Additional CSS rules */
body {
  background-color: lightgray;
}

h1 {
  font-size: 24px;
  color: blue;
}

.text {
  color: green;
}

#smiley {
  width: 400px;
  height: auto;
}

/* Media query to shrink smiley face to 300px when viewport is equal to or smaller than 400px */
@media only screen and (max-width: 400px) {
  #smiley {
    width: 300px;
  }
}

/* Media query to set smiley face's width to percentage when viewport is equal to or smaller than 300px */
@media only screen and (max-width: 300px) {
  #smiley {
    max-width: 300px;
    width: 100%;
  }
}