/* ORIGINAL TASK PUPILS STARTED WITH
Full credit to code.org for task */

img {
  border: 8px solid #ffffff;
  width: 150px;
  height: 150px;
}
/* adjusting the webpages background color  */
body{
  background-color: #d8dfda;
  color:#28282B;
  text-align: center;
  vertical-align: super;
  font-family: 'Serif';
}
  h1 {
    font-size: 28px;
    color: #333333;
    text-align: center;
    margin-top: 20px;
  }

  .container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: left;
  }

  button {
    background-color: #0066ff;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
  }
}
p {
font-color: #28282B;
  font-size: 20px;
}
    img {
        transform: rotate(15deg);
        filter: grayscale(50%);
        transition: transform 0.3s, filter 0.3s;
    }

    img:hover {
        transform: rotate(-15deg);
        filter: grayscale(0%);
    }

    p {
        text-shadow: 2px 2px 4px #a6a6a6;
    }