/* random css stuff  */


/* dark green zig zag background */

 body {

background:
linear-gradient(135deg, #0d0d0c  25%, transparent 25%) -50px 0,
linear-gradient(225deg, #0d0d0c 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #0d0d0c 25%, transparent 25%),
linear-gradient(45deg, #0d0d0c  25%, transparent 25%);
background-size: 100px 100px;
background-color: #0b1200 ;

}

/* dark green & black  stripes background */

body {
 background-color: #000;
background-image: linear-gradient(transparent 50%, rgb(0, 20, 0) 50%);
background-size: 50px 50px;
}



/* green button  */

.button {
  background-color: #003300;
  border: 1px solid#006400;
  color: lime;
  padding: 4px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 2px 2px;
  cursor: pointer;
 border-radius: 4px;

}.button:hover {
  background-color: #3e8e41;
border-radius: 2px;
  color: red;
}  




/* hr yellow dash  */
.ydash {
  border-top: 4px dashed yellow;
  border-radius: 2px;
  width: 80%;
}


/* trippy  */


.trippy {
    animation-name: animate-trippy;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes animate-trippy {
    0% {
        filter: hue-rotate(0deg) saturate(3);
    }
    80% {
        filter: hue-rotate(360deg) saturate(2);
    }
}

/* rotate  */

.rotate {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


/* zoom  */

* {
  box-sizing: border-box;
}

.zoom {
  padding: 0;
  background-color: none;
  transition: transform .2s;
  
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(2.0); /* IE 9 */
  -webkit-transform: scale(2.0); /* Safari 3-8 */
  transform: scale(2.0); 
}

/*  spinning */


@keyframes spinning {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
  }
  .spinhov:hover {
    animation-name: spinning;
    animation-duration: 1s;
    animation-iteration-count: 1;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: ease-in-out;
  }
 
  .spin {
    animation-name: spinning;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: linear;
  }

/* spin3D  */

 @keyframes spin3D {
    from { transform: rotateY(0deg) }
    to { transform: rotateY(360deg) }
  }
  .spinhov3D:hover {
    animation-name: spin3D;
    animation-duration: 1s;
    animation-iteration-count: 1;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: ease-in-out;
  }