body{ 
    text-align: center;
    margin: auto;
    background-color: whitesmoke;
    border-style: solid;
    margin-right: 150px;
    margin-left: 100px;
    margin-top: 200px;
    margin-bottom: 200px;
    border-color: antiquewhite;
}

 a:link {
color: white;
  }
  a:visited {
    color: blue;
  }
  a:hover {
    color: yellow
  }

  img {
    width: 5%;
    height: 5%;
    border-radius: 20%;
  }

  p {
  text-align: justify; left: auto;
  text-indent: 60px;
  margin-left: 50px;
  margin-right: 90px;
 }

  h3 {
    text-align: justify; left: auto;
    margin-left: 50px; 
    font-weight: lighter;
  }

  .div1 {
    border-style: groove;
    border-width: 0px;
    margin-right: 100px;
    margin-left: 80px;
    margin-bottom: 30px;
    margin-top: 30px;   
  }

  

  .div1:hover {
    animation-name: div1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  

  
  @keyframes div1 {
   0% {border-width: 0px;}
    10% {border-width: 1px;}
    20% {border-width: 2px;}
    30% {border-width: 3px;} 
    40% {border-width: 4px;}
    50% {border-width: 5px;}
    60% {border-width: 6px;}
    70% {border-width: 7px;}
    80% {border-width: 8px;}
    90% {border-width: 9px;}
    100% {border-width: 10px;}
  }

  

  .div2 {
    border-style: groove;
    border-width: 0px;
     margin-right: 100px;
    margin-left: 80px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: fantasy;
  }

  .div2:hover {
     animation-name: div2;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    }

  @keyframes div2 {
     10% {border-width: 1px;}
    20% {border-width: 2px;}
    30% {border-width: 3px;} 
    40% {border-width: 4px;}
    50% {border-width: 5px;}
    60% {border-width: 6px;}
    70% {border-width: 7px;}
    80% {border-width: 8px;}
    90% {border-width: 9px;}
    100% {border-width: 10px;}
    100% {transform: rotate(360deg);}
  }

  .div3 {
      border-style: groove;
      border-width: 0px;
     margin-right: 100px;
    margin-left: 80px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: cursive;
    color: brown;
  }

  .div3:hover {
     animation-name: div3;
    animation-duration: 4s;
    animation-fill-mode: forwards;
  }

  @keyframes div3 {
     10% {border-width: 1px;}
    20% {border-width: 2px;}
    30% {border-width: 3px;} 
    40% {border-width: 4px;}
    50% {border-width: 5px;}
    60% {border-width: 6px;}
    70% {border-width: 7px;}
    80% {border-width: 8px;}
    90% {border-width: 9px;}
    100% {border-width: 10px;}
    100% {transform: rotate(360deg);}
    14.3% {background-color: red;}
    28.5% {background-color: orange;}
    42.8% {background-color: yellow;}
    57% {background-color: green;}
    71.3% {background-color: blue;}
    85.5% {background-color: indigo;}
    100% {background-color: violet;}


  }

  .div4 {
     border-style: groove;
     border-width: 0px;
     margin-right: 100px;
    margin-left: 80px;
    margin-bottom: 30px;
    margin-top: 30px; 
  }

  .div4:hover {
     animation-name: div4;
    animation-duration: 4s;
    animation-fill-mode: forwards;
  }

  @keyframes div4  {
     10% {border-width: 1px;}
    20% {border-width: 2px;}
    30% {border-width: 3px;} 
    40% {border-width: 4px;}
    50% {border-width: 5px;}
    60% {border-width: 6px;}
    70% {border-width: 7px;}
    80% {border-width: 8px;}
    90% {border-width: 9px;}
    100% {border-width: 10px;}
    100% {transform: rotate(360deg);}
    14.3% {background-color: red;}
    28.5% {background-color: orange;}
    42.8% {background-color: yellow;}
    57% {background-color: green;}
    71.3% {background-color: blue;}
    85.5% {background-color: indigo;}
    100% {background-color: violet;}
14.3% {color: violet;}
    28.5% {color: indigo;}
    42.8% {color: blue;}
    57% {color: lightgreen;}
    71.3% {color: yellow;}
    85.5% {color: orange;}
    100% {color: red;}
    14.3% {font-family: 'Courier New', Courier, monospace;}
    28.5% {font-family: Arial, Helvetica, sans-serif;}
    42.8% {font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
    57% {font-family: Verdana, Geneva, Tahoma, sans-serif;}
    71.3% {font-family: cursive;}
    85.5% {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
    100% {font-family: sans-serif;}
  }