/* 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." */

.content {
  max-width: 800px;
  margin: 50px auto;
  text-align: center;

  /* Add these new lines */
  background-color: rgba(22, 19, 19, 0.9); /* A semi-transparent white */
  padding: 20px;                              /* Adds 20px of space on all sides inside the box */
}

body {
  background-image: url('Green_Rock.gif');
  background-repeat: repeat;
}

img {
  width: 400px; /* Sets the image width to 400 pixels */
  height: auto;   /* The height will adjust automatically to keep the proportions correct */
}
h1 {
  color: #bf2424; /* A dark blue color using a hex code */
  font-family: Times New Roman, serif; /* Uses Georgia font, or a default serif font if Georgia isn't available */

}

h2 {
  color: #bf2424; /* A dark blue color using a hex code */
  font-family: Times New Roman, serif; /* Uses Georgia font, or a default serif font if Georgia isn't available */

}


p {
  color: #fafafa
; /* A dark gray color */
  font-size: 20px; /* Sets the font size to 20 pixels */
  font-family: Times New Roman, sans-serif; /* Uses Arial, or a default sans-serif font */
}
.side-gif {
  position: fixed; /* This is the key property! It fixes the element to the viewport. */
  top: 300px;      /* Adjust this to move the GIFs up or down the page. */
  width: 120px;    /* Set a specific width for your GIFs. */
  height: auto;    /* Height will adjust automatically. */
}

.left-gif {
  left: 170px; /* This sets the distance from the left edge of the screen. */
}

.right-gif {
  right: 170px; /* This sets the distance from the right edge of the screen. */
}