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

body {
 background: url("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3NvaGN3NmsyeDgzejE4bXZwMnh4NjB5dHpuM3llbjcxdHM0MXc3NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/UYBDCJjwOd9Re/giphy.gif") no-repeat center center fixed;
   background-size: cover; /* makes the GIF fill the screen */}

.gif-container {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;}

.gif-container img {
  width: 100%;
  border-radius: 20px;}

.intro {
  font-family: "Times New Roman", sans-serif; /* or another font you like */
  font-size: 20px;                    /* smaller than your title */
  color: #ffffff;                     /* soft pastel color */
  text-align: center;                  /* centered under the title */
  margin-top: 20px;                    /* space between title and intro */
  line-height: 1.5;                    /* makes it easier to read */
  text-shadow: 0 0 5px rgba(216,162,220,0.4); /* optional dreamy glow */}