/* css for the about page */

body {
     /* used https://cssgradient.io for the gradient background colour syntax (accessed 3rd april 2023) */ 
    background: linear-gradient(153deg, rgba(8,6,46,1) 0%, rgba(59,34,82,1) 35%, rgba(101,80,121,1) 100%);

}

h1 {
    color: #FF82F3; 
    margin-top: 4%;
    text-align: center;
    padding-bottom: 2%;
    font-size: 30px;
    text-shadow: 4px 4px 6px black;
}

#HTP {
    margin-top: 10%;
}

p {
    font-size: 18px;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px black;
}

#ghost img {
    scale: 1.1;
    transform: rotate(5deg) translateY(-260px);
    left: -5%;
}

#cobweb1 {
    transform: translateY(-695px);
    float: right;
    margin-right: -1%;
}

#cobweb2 {
    position: absolute;
    transform: scaleX(-1); /* learnt syntax at: https://www.w3schools.com/howto/howto_css_flip_image.asp (accessed 3rd april 2023)*/
    top: 9%;
    margin-left: -1%;
}

#trap {
    position: absolute;
    width: 150px;
    height: 150px;
    right: 7%;
    top: 58%;
    animation: spin 15s infinite linear; 
}

@keyframes spin { /* animation for trap/obstacle to spin */ 
    0% {
          transform: rotate(0deg); 
      }
    50% {
          transform: rotate(180deg); 
      }
    100% {
          transform: rotate(360deg); 
      }
  }