/* BASIC */

html, body {
  margin: 0;
  padding: 0;
  }

@font-face {
  font-family: DynaPuff;
  src: url(DynaPuff-VariableFont_wdth,wght.ttf);
}

body {
  font-family: DynaPuff;
  background-image:url("https://bettysgraphics.neocities.org/images/backgrounds/stars%201.gif");
  background-size:200px;
  background-color:orange;
  background-repeat: repeat;
  background-position:center;
  animation: moveIt 24s linear infinite;
  }
@keyframes moveIt {
  from {background-position: top ;}
  to {background-position: bottom ;}
  }

.page {
  width:70em;
  height:auto;
  padding:10px;
  margin:auto;
  text-align:center;
  }
  
button {
  background-color:black;
  color:red;
  margin:5px;
  font-family: DynaPuff;
  border:5px solid black;
  border-radius:5px;
  width:auto;
  height:25px;
  float:none;
  }
button:hover {
  background-color:red;
  color:black;
  border:5px solid red;
  animation: shake 0.5s;
  animation-iteration-count: infinite;
  }

/*TOP BOTTOM*/

.header {
  text-align:center;
  }
.footer {
  
  }
  
/*COLUMNS*/
* {
  box-sizing: border-box;
}

.columnleft {
  float: left;
  width: 68%;
  padding: 10px;
}
.columnmiddle {
  float: left;
  width: 2%;
  padding: 10px;
}
.columnright {
  float: left;
  width: 30%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

/*IMAGE SHAKE*/

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*PHOTO GALLERY*/
.responsivemasonry img {
  max-height:200px;
  float:none;
  }
  
/* below taken from https://stackoverflow.com/a/56401601/765271*/
.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {  
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform:  scale(2);
  cursor: zoom-out
}



























/* */