/* This is a CSS comment */

body {
  background-color: rgb(255, 255, 255); /* Sets the background color of the entire page */
  font-family: Arial, sans-serif; /* Sets the default font for the page */
}

h1 {
  color: navy; /* Sets the text color of all <h1> elements */
  text-align: center; /* Centers the text within <h1> elements */
}

p {
  font-size: 16px; /* Sets the font size of all <p> elements */
  line-height: 1.5; /* Sets the line spacing for paragraphs */
}

.my-class {
  border: 1px solid black; /* Adds a black border to elements with class "my-class" */
  padding: 10px; /* Adds 10 pixels of padding inside the border */
}

#my-id {
  width: 200px; /* Sets the width of the element with id "my-id" */
  margin: 20px auto; /* Centers the element horizontally with 20px top/bottom margin */
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation {
  from { background-color: red; transform: translateX(0); }
  to { background-color: yellow; transform: translateX(200px); }
}