h1{
      color: darkcyan;
      font-family: "Press Start 2P";
      font-style: italic;
      font-weight: bold;
      text-decoration: white dotted underline; 
      border-top-style: dotted;
      border-top-width: 10px;
      border-top-color: white;
      border-bottom-style:dotted;
      border-left-style:solid;
      border-right-style:double;
    }
    
    .even{
      background: linear-gradient(to right, lightgreen, purple);
      background-repeat: no-repeat;
      background-attachment: fixed;
      color:blue;
      font-family: "Jacquard 12";
      font-size: 28px;
      border-style:double;
      border-width: 5px;
      border-color: darkmagenta;
      border-radius: 10px;
      padding: 5px;

    }
    #p4{
      color:red;
    }
    .even{
      color:red;
    }
    .odd{
      color:white;
    }
    
    body{
    background-image: url("/Images/Cupid poster a4.jpg");
    background-color: lightblue;
    background-blend-mode: lighten;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    }
    #box1{
      border :5px solid;
      width: 250px;
      height: 250;
      font-size: 22px;
      background: lightblue;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
    }
    #box2{
          border :5px solid;
      width: 250px;
      height: 250;
      font-size: 22px;
      background: lightpink;
      margin-left: auto;
      margin-right: auto;
    }      
.box3{
  width: 100px;
  height: 100px;
  border: 1px solid;
  font-size:40px;
  text-align: center;
  background: tomato;
  
  float: left;
  
}

#boxtest1{
  border: 1px solid;
  height: 300px;
  width: 300px;
  background-color: skyblue;
  
  position: fixed;  
  
  top: 0px;
  right: 0px;
  
}
#boxtest2{
  border: 1px solid;
  height: 100px;
  width: 100px;
  background-color: tomato;
  
  position: absolute;
  
  top:100px;
  left:100px;
}

a:link{
  color:lawngreen;
}
a:visited{
  color:gold;
}
a:hover{
  color:tomato;
}
a:active{
  color:teal;
}
button:hover{
  background-color: green;
}
button:active{
  color: brown;
}
/*
li:nth-child(1){
  background-color:yellow;
*/
li:nth-child(even){
  background-color:yellow;
}
li:nth-child(odd){
  background-color:green;
}
li:nth-child(3n){
  color:blue;
}
h3{
  text-shadow: 0px 0px 5px yellow, 0px -5px 5px red;
}
h3:hover{
    box-shadow: 5px 5px 5px black;
}

#boxtest3{
  border: 4px solid;
  width: 250px;
  height: 250px;
  font-size: 225px;
  text-align: center;
  background:lightskyblue;
  
  transform: translateX(50px);
  transform: translateY(50px);
  transform: translate(50px, 50px);
  transform: rotateX(180deg);
  transform: rotateY(180deg);
  transform: rotateZ(180deg);
  transform: scaleX(2);
  transform: scaleY(2);
  transform: scale(2, 2);
  transform: skewX(45deg);
  transform: skewY(45deg);
  transform: skew(20deg, 20deg);
  
  transform: matrix(1, 0, 0, 1, 0, 0);
  
}

#boxtest4{
  width: 250px;
  height: 250px;
  background:red;
  font-size: 225px;
  text-align: center;
  
  
  /*
  animation: mySlide;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-timing-function: ease-in;
      ease-in
      linear
      ease-out
  animation-duration: 5s;
  */
  animation: 3s linear 0s infinite running myRotate;
  animation: 3s linear 0s infinite running myOpacity;
  animation: 3s linear 0s infinite running myScale;
  animation: 3s linear 0s infinite running myColorChange;
}
#boxtest4:active{
    animation: 3s linear 0s infinite running mySlide;
}

@keyframes mySlide{
  from{margin-left: 0%;}
  to{margin-left: 100%;}
}

@keyframes myRotate{
    100%{transform: rotateZ(360deg)};
}

@keyframes myOpacity{
    50%{opacity: 0;}
}

@keyframes myScale{
    50%{transform: scale(0.5, 0.5);}
}

@keyframes myColorChange{
    20%{background-color: orange;}
    40%{background-color: yellow;}
    60%{background-color: green;}
    80%{background-color: blue;}
    100%{background-color: purple;}
}