html, body {
  background-image: url('/Visuals/Images/StillSea.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: #e0ebff;
  font-family: "Emilys Candy", sans-serif;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  width: 100%;
  min-height: 50rem;
}


/* ---------------------------------------------- */



.Title {
  font-size: 2rem;
  color: white;
  text-align: center;
  margin: 0 auto;
  margin-top: 2rem;
  max-width: 95vw; 
}


/* ---------------------------------------------- */



.Main {
  color: white;
  font-size: 1.4rem;
  max-width: 85vw;
  margin: 0 auto;
  padding: 1rem;
  text-align: left;

}


/* ---------------------------------------------- */


a {
 color: lightblue; 
 text-decoration: none; 
}

a:visisted {
 color: pink;
 text-decoration: none; 
 font-weight: bold;
 
}

a:hover { 
  text-decoration: underline;
}


/* ---------------------------------------------- */



.List { /* The lists appearing in My Poems and My Stories */
  font-size: 1.4rem;
  margin: 0 auto;
  text-align: left;
  padding: 0;
  text-decoration: none;
  max-width: 78vw;
  padding-left: 35vw;
}



/* ---------------------------------------------- */


/* Bounce effect for My Stories */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); 
  }
  20% {
    transform: translateY(-1rem); 
  }
  40% {
    transform: translateY(0); 
  }
  60% {
    transform: translateY(-0.5rem); 
  }
  80% {
    transform: translateY(0); 
  }
}

.my-stories img {
  width: 1.8rem;
  height: auto;
  margin-right: 0.8rem;
  vertical-align: middle;
  transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.my-stories a:hover img {
  animation: bounce 0.6s ease;
}


/* ---------------------------------------------- */



/* Spin effect for My Poems */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.my-poems img {
  width: 1.8rem;
  height: auto;
  margin-right: 0.8rem;
  vertical-align: middle;
  transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}


.my-poems a:hover img {
  animation: spin 0.5s linear;
}


/* ---------------------------------------------- */

/* Flip effect for My Journals */
@keyframes flip {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(180deg); 
  }
}

.my-journals img {
  width: 1.7rem;
  height: auto;
  margin-right: 0.8rem;
  vertical-align: middle;
  transform: rotateX(0deg); 
  transition: transform 0.5s ease-in-out; 
}


.my-journals a:hover img {
  transform: rotateX(180deg); 
}