/* 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-color: lightblue;
  font-family: 'Indie Flower', cursive;
  text-align: center;
  padding-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* full height of screen */
  margin: 0;
  flex-direction: column;
  color: lightgreen;
}
.blinkie {
  width: 200px;           /* makes your blinkie 200 pixels wide */
  height: auto;           /* keeps the height proportional */
  position: fixed;        /* fixes it in one spot on the screen */
  bottom: 20px;           /* 20 pixels up from the bottom */
  right: 20px;            /* 20 pixels from the right side */
  z-index: 1000;          /* makes sure it’s on top of other stuff */
  cursor: pointer;        /* changes cursor to a pointer when hovered */
  transition: transform 0.3s ease; /* smooth animation when hovered */
}

.blinkie:hover {
  transform: scale(1.1);  /* slightly grows when hovered */
}

h1 {
  color: lightgreen;
  font-family: 'Indie Flower', cursive;
}

p {
  color: lightgreen;
  font-family: 'Indie Flower', cursive;
}

.text-bg {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  margin: 50px auto;
  border-radius: 30px;
  text-align: center;
  max-width: 600px;
}
  font-family: 'Indie Flower', cursive;
  color: lightgreen;
}