body {
    background-color: violet;
    margin: auto;
    text-align: center;
   }

    

.div1 {
border-style: solid;
text-align:justify; left: auto;
margin-left: 80px;
margin-right: 100px;
border-width: 5px;
background-color: lightblue;  
margin-bottom: 20px;
  }

  .div2 {
    border-style: groove;
    border-width: 10px; 
    margin-left: 80px;
    margin-right: 100px;
    background-color: plum;
    animation-name: CSSanimation;
    animation-duration: 5s;
  }

  @keyframes CSSanimation {
    from {background-color: khaki;}
    to {background-color: plum;}
  }

  h2 {
    text-align: center;
    color: crimson;
  }

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

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

 .div3 {
  border-style: dotted;
  border-color: whitesmoke;
  margin-left: 80px;
  margin-right: 100px;
  margin-top: 30px;
  transition: background-color 3s;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

  .div3:hover {
    background-color: magenta;
  }
    
  .div4 {
    border-style: ridge;
    margin-left: 80px;
    margin-right: 100px;
    border-width: 5px;
    margin-top: 30px;
    background-color: darkmagenta;
    animation-name: div4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    font-family:Arial, Helvetica, sans-serif;
  }
 
  @keyframes div4 {
    0% {background-color: lightblue;}
    25% {background-color: plum;}
    50% {background-color: magenta;}
    100% {background-color: darkmagenta;}
  }

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

  img {
    width: 5%;
    height: 5%;
  }