/* period of class and # for ID */

#ending {color: white; font-size: 33px;}
  @keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}
 #div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 2s;
    animation-iteration-count: 8;
}  
   

#smaller {height: 200px; width: 200px;}
#borderimg:hover { border: 20px solid transparent;
padding: 15px;
  border-image: url(https://codecraftworks.dev/web/mAhB0sfbPGutSs8nitAT/assets/possum_source_is.webp) 30 round}
#borderimg { 
  font-size: 30px;
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://codecraftworks.dev/web/mAhB0sfbPGutSs8nitAT/assets/possum_source_is.webp) 30 round;
}
#section3a {color: orange; border: 3px solid tan;}

.div2  {
  height: 90px;
  width: 90px;
  background-color: red;
  border: 3px solid green;
  color:white;
  
}
.div2:hover {translate: 100px 20px;
 }
  
.div1 {
  color: white;
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 10s;
}

.div1:hover {
  width: 300px;
  border: 2px solid black;
}
#style4:hover {  transform: rotate(45deg);
  transform-origin: 20% 40%; color: white; font-size: 40px;}
#style3:hover { transform: rotateY(150deg); color: green; font-size: 30px;}
#style2:hover { transform: rotateX(150deg); color: blue; font-size: 25px;
   }
#style1 {background-color: orange; font-size: 33px;}
.listo { list-style-type: upper-roman; font-size: 20px; background-color: magenta; border: 2px dashed white;}
.button {color:white; background-color:blue; font-size: 22px;  border: 5px solid black; }
.button:hover {font-size: 30px; color: yellow;}
h1 {color:blue;}
#styled_heading {font: New York Times;
text-align: center;
  color: Purple;
 background-image: linear-gradient(to bottom, red, yellow);
 border: 10px dashed black;}

.sh:hover {
  background-color: yellow;
  font-size: 40px;
    font: Arial;
  text-shadow: 2px 2px;
   outline: 5px dotted green;
}
main {background-image: linear-gradient(to bottom, tan, gold, green, grey);}