@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch');

body{
  /*swap the image url out with any other cursor you want, make sure it's small*/
  cursor: url("https://img.itch.zone/aW1hZ2UyL3VzZXIvMzk4MjIvODg5MzQ5LnBuZw==/35x35%23/zbPcOp.png"), auto;

  text-shadow: 1px 1px #FF00FF;
  font-family: 'Cabin Sketch', monospace;
  
}

a{
  /*swap the image url out with any other cursor you want, make sure it's small*/
  cursor: url("https://img.itch.zone/aW1hZ2UyL3VzZXIvMzk4MjIvODg5MzQ5LnBuZw==/35x35%23/zbPcOp.png"), auto;
  font-size: 25px;
}

.header{
  animation: rotation 0.3s ease-out alternate infinite;
}

.footer{
  animation: rotation 0.2s ease-out alternate infinite;
}

.profile_column{
  animation: rotation 0.1s ease-out alternate infinite;
}

.game_grid_widget{
  animation: rotation 0.6s ease-in alternate infinite,
  colorloop_blck 2s infinite;
}

.game_cell{
  animation: rotation 0.6s ease-out alternate infinite;
  background-color:black;
}

.collection_row{
  animation: rotation 0.5s ease-out alternate infinite,
  colorloop_blck 5s infinite;
}

.user_page{
  background-color: black;
  animation: colorloop 5s infinite;
}

.game_grid_widget{
  background-color: black;
  /*border*/
  outline: 5px solid #0000AE;
  box-shadow: 0px 0px 0px 5px #A9A9A9;
  /*border*/
  border: 5px solid white;
  /*barely visible touch of color*/
  /*text-shadow: 1px 1px #FF00FF;*/
  /*dropshadow*/
  box-shadow: 30px 30px 0px black;
  /*fonts here*/
  font-size: 20px;
  
}

/*animations*/

@keyframes colorloop_blck{
  0% { background-color: black; }
  50% { background-color: #000066; }
  100% { background-color: black; }
}

@keyframes colorloop {
  0% { background-color: #FF00FF; }
  20% { background-color: #FF99FF; }
  40% { background-color: #CC00FF; }
  60% { background-color: #CC99FF; }
  80% { background-color: #9900FF; }
  100% { background-color: #FF00FF; }
}

@keyframes rotation {
  0% {
    transform: rotate(-.7deg);
  } 100% {
    transform: rotate(.7deg);
  }
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    to   { transform: translate(0, -0px); }    
}

body{
  animation: spin 200s infinite;
}

.game_cell{
  animation: spin 50s alternate infinite;
}

.footer{
  animation: spin 70s infinite;
}

.header{
  animation: spin 10s infinite;
}

.profile_column{
  animation: spin 10s infinite;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes rocking {
  0% {
    transform: rotate(5deg);
  } 50% {
    transform: rotate(-5deg);
  } 100% {
    transform: rotate(5deg);
}

body{
  filter: blur(2px);
}

.header{
    filter: blur(5px);
}

body{
  transform: scaleY(-1);
}

.game_cell:hover{
 transform: scale(-1);
  transition: all 50ms;
};

body{
  transform: scale(.2);
  transform-origin: 50% 50%;
}