This page contains a collection of all the CSS themes for my game's pages. It gets asked, so I'm sharing them all.
You are free to use these however you will, in as much of a messy state as some of these are...
I will be updating this page regularly whenever I customize a page and feel like it would be of interest.

Here they are...

Misc Tips

* Hack to upload extra images to use in your CSS


Itch.io lets you upload images via the "header" and "background" upload widget. You can use this field to upload images, copy the image URL after uploading, and then delete the image to keep uploading other images. Images stay as long as you keep the URL. The uploaded images (URL) can be used in your CSS styling. Video example...



I use this for all my pages. For example, uploading cursors, foreground images, overlays, extra header graphics to animate...
Images uploaded this way, and used in the CSS this way don't seem to delete so it has been safe to use so far.

* Replacing the "Download Now" button with a graphic...




The following lets you replace the "Download Now" button with a graphic (instead of text)...
/*download button*/
	.buy_btn{
	  visibility: hidden;
	}
	.buy_btn::after{
	  content: url('https://img.itch.zone/aW1nLzQ4MTk3NzEuZ2lm/original/fsF%2FbT.gif');
	  visibility: visible;
	}
	


Note that you can use the CSS ::before and ::after to insert extra graphical or text elements to any part of the page. I did this to add extra header or footer images for some of my pages. If you use ::before or ::after any further styling can be applied (like position:fixed, etc...).

* Customizing the text in the "Download Now" button...



This lets you change the text in the "Download Now" button to be anything you want...

/*download button*/
	.buy_btn{
	  visibility: hidden;
	}
	.buy_btn::after{
	  content: "DOWNLOAD THIS MONSTROSITY!";
	  visibility: visible;
	  background-color: salmon;
	  padding: 25px;
	  border-radius: 15px;
	}
	


Electric Zine Maker 2.0 Theme




A demo of the theme can be viewed here.

A very cute theme that features a custom curser that changes when hovering over links and button elements, with an extra header graphic animating back and forth in the background. The page's background is also animated, to simulate water. The text has some cute styling, with fancy borders around elements. Hovering over links and buttons animates them, and so does hovering over most important images.
The "download now" button is customized, and animates.
The comments widget, and comments, are animated, with more custom styling applied to that area.

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

	body *{
	  cursor: url('https://img.itch.zone/aW1nLzUyOTkzNjAucG5n/original/bjP%2FpN.png'), auto;
	}

	.user_formatted *{
	  color: #FF9AFF
	  font-size: 40px;
	}
	.user_formatted{
	  background-color: #438CA2;

	  background-image:url('https://img.itch.zone/aW1nLzUyOTk2NzEuZ2lm/original/poP%2Fjb.gif');
	  background-repeat: repeat-x;

	  font-size: 50px;

	  padding: 10px;

	  /*border: 3px solid black;*/
	  box-shadow: 10px 10px 0px black;
	border: 4px solid;

	  border: 10px solid;  
	  border-image:   url('https://img.itch.zone/aW1nLzE1Mzg0MDcuZ2lm/original/2AkSWw.gif');
		border-image-slice: 4;
		border-image-repeat: round;
	}

	.right_col img{
		border: 10px solid;  
		border-image:   url('https://img.itch.zone/aW1nLzE1Mzg0MDcuZ2lm/original/2AkSWw.gif');
		border-image-slice: 4;
		border-image-repeat: round;
		background-color: rgba(0, 0, 0, .7);

		animation: rotation 1s ease-out alternate infinite;
	}

	.main img:hover{
	  animation: shake .1s linear infinite;
	  cursor: url('https://img.itch.zone/aW1nLzUyOTkzNzAucG5n/original/fsFN9G.png'), auto;
	}

	a{
	  cursor: url('https://img.itch.zone/aW1nLzUyOTkzNzAucG5n/original/fsFN9G.png'), auto;
	}

	.buy_btn:hover{
	  cursor: url('https://img.itch.zone/aW1nLzUyOTkzNzAucG5n/original/fsFN9G.png'), auto;

	  animation: shake .1s linear infinite;
	}

	.inner_column *{
	  font-family: 'Patrick Hand', sans-serif;
	  font-size: 35px;
	}

	/*link styling only in colum*/
	.column a{
	   color: white;
	   text-shadow:
	    -1px -1px 0 #000,
	    1px -1px 0 #000,
	    -1px 1px 0 #000,
	    1px 1px 0 #000,
	    3px 3px 0 #000;
	}

	.main{
	  background-image:url('https://img.itch.zone/aW1nLzUyOTkyOTQuZ2lm/original/z93WxX.gif');
	  /*background-size: 100% 100%;*/
	  animation: anim_back 20s ease infinite;
	}

	/*header background*/
	.main::before{
	  content: "Help me, my name is Igor and I am trapped in this corner! D:";
	  color:white;
	  position: fixed;
	  width: 100%;
	height: 320px;
	  left: 0px;
	  top: 0px;
	background-image:url('https://img.itch.zone/aW1nLzUyOTkzMDcuZ2lm/original/TdI2VI.gif');
	  animation: anim_back 30s ease infinite;
	}

	.header{
	  /*height: 320px;*/
	}

	/*download button*/
	.buy_btn{
	  animation:button_spin 3s linear infinite;
	  visibility: hidden;
	}
	.buy_btn::after{
	  content: "Download me!";
	  visibility: visible;
	  background-color: #FF66B4;
	  padding: 10px;
	  border-radius: 15px;
	  font-size: 30px;
	}

	.download_links:hover{
		animation: shake .2s linear infinite;
	}


	/*picking apart the comments box...*/
	.redactor-box *{
	  font-size: 30px;
	}
	.redactor-toolbar-box{
	  height: 60px;
	}

	#redactor-uuid-1{
	  color: black;
	  background-color: white;
	}
	.community_post_list_widget *{
	  animation: rotation 2s ease-out alternate infinite;
	}
	.inline_reply *{
	  color: white;
	}

	a.direct_download_btn{
	  color: hotpink;
	  font-size: 30px;
	  font-family: 'Patrick Hand', sans-serif;
	}
	.direct_download_btn *{
	  color: white;
	}

	/*animations*/

	@keyframes anim_back{ 
	  0% {
	    background-position: 0% 50%;
	  }
	  50% {
	    background-position: 100% 50%;
	  }
	  100% {
	    background-position: 0% 50%;
	  }
	}

	@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); }
	}

	/*animation:spin 4s linear infinite;*/
	@keyframes button_spin { 
	  0% { 
	   transform: rotate(0deg) scale(1);
	  } 20% { 
	   transform: rotate(6deg) scale(1); 
	  } 50% {
	   transform: rotate(0deg) scale(1);
	  } 80% {
	   transform: rotate(-6deg) scale(1);
	  } 100% {
	   transform: rotate(0deg) scale(1);
	  }
	}

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


A Present For You




You can see a functional theme here.
A simple theme with absolutely every element ripped out except for the page's title, and the "download now" button is replaced with an image. There's a simple page "overlay" extra graphic added (confetti) that's over all the other elements. You could replace this with snow or clouds...

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

	.header{
	  font-family: 'Amatic SC', sans;
	  font-size: 40px;

	  margin-right: 50%;

	  color: white;

	  /*https://markdotto.com/playground/3d-text/*/
	  text-shadow: 0 1px 0 #ccc,
	               0 2px 0 #c9c9c9,
	               0 3px 0 #bbb,
	               0 4px 0 #b9b9b9,
	               0 5px 0 #aaa,
	               0 6px 1px rgba(0,0,0,.1),
	               0 0 5px rgba(0,0,0,.1),
	               0 1px 3px rgba(0,0,0,.3),
	               0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.25),
	               0 10px 10px rgba(0,0,0,.2),
	               0 20px 20px rgba(0,0,0,.15);

	}




	/*download button*/
	.buy_btn{
	  visibility: hidden;
	}
	.buy_btn::after{
	  content: url('https://img.itch.zone/aW1nLzQ4MzM2OTAucG5n/original/%2FkkYLv.png');

	  visibility: visible;

	  position: fixed;
	  margin: auto;
	  margin-top: 20%;
	  width: 50%;

	  animation:button_spin 5s ease-in-out infinite;
	}

	.header{
	  position: fixed;
	  pointer-events:none;
	  /*width: 100%;
	  height: 100%;
	  left: 0px;
	  object-fit: cover;*/
	}

	.header_buy_row, .right_col, .more_information_toggle, #download, .uploads, .buy_message{
	  visibility: hidden;
	  position: fixed;
	  left: -1000px;
	  right: -1000px;
	  pointer-events:none;
	}


	/*insert extra graphic*/
	.main::before{
	  content: url('https://img.itch.zone/aW1nLzQ4MzM3MDUuZ2lm/original/JgR5z%2B.gif');
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  /*tile it*/
	  background-image: url("https://img.itch.zone/aW1nLzQ4MzM3MDUuZ2lm/original/JgR5z%2B.gif");
	}

	/*animation:spin 4s linear infinite;*/
	@keyframes button_spin { 
	  0% {
	   transform: rotate(0deg) scale(1);
	  } 20% {
	  transform: rotate(6deg) scale(1.2);  
	  } 50% {
	  transform: rotate(0deg) scale(1);
	  } 80% {
	   transform: rotate(-6deg) scale(1.2);
	  } 100% {
	  transform: rotate(0deg) scale(1);
	  }
	}
	


A Stray Cat




You can see a functional theme here.
This is a simple theme with everything stripped out, and the "download now" button replaced with an image. The page description is used more as a small caption that's placed in the bottom right corner. No other elements are visible.

You need to upload you own background graphic.

Good to use for mysterious pages.

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

	.header, .formatted_description{
	  font-family: 'Amatic SC', sans;
	  font-size: 30px;

	  margin-right: 50%;

	  color: white;

	  /*https://markdotto.com/playground/3d-text/*/
	  text-shadow: 0 1px 0 #ccc,
	               0 2px 0 #c9c9c9,
	               0 3px 0 #bbb,
	               0 4px 0 #b9b9b9,
	               0 5px 0 #aaa,
	               0 6px 1px rgba(0,0,0,.1),
	               0 0 5px rgba(0,0,0,.1),
	               0 1px 3px rgba(0,0,0,.3),
	               0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.25),
	               0 10px 10px rgba(0,0,0,.2),
	               0 20px 20px rgba(0,0,0,.15);

	}

	.formatted_description{
	  position:fixed;
	  right: 0px;
	  bottom: 0px;
	pointer-events: none;
	width: 150px;
	text-align: right;
	}


	/*download button*/
	.buy_btn{
	  visibility: hidden;
	}
	.buy_btn::after{
	  content: url('https://img.itch.zone/aW1nLzUwMTc5MzcuZ2lm/original/wIUjJb.gif');

	  visibility: visible;

	  position: fixed;
	  margin: auto;
	  margin-top: 20%;
	  width: 50%;

	  animation:button_spin 5s ease-in-out infinite;
	}

	.header{
	  position: fixed;
	  pointer-events:none;
	  /*width: 100%;
	  height: 100%;
	  left: 0px;
	  object-fit: cover;*/
	}

	.header_buy_row, .right_col, .more_information_toggle, #download, .uploads, .buy_message{
	  visibility: hidden;
	  position: fixed;
	  left: -1000px;
	  right: -1000px;
	  pointer-events:none;
	}


	/*insert extra graphic*/
	/*.main::before{
	  content: url('https://img.itch.zone/aW1nLzQ4MzM3MDUuZ2lm/original/JgR5z%2B.gif');
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  background-image: url("https://img.itch.zone/aW1nLzQ4MzM3MDUuZ2lm/original/JgR5z%2B.gif");

	z-index: 100;
	pointer-events: none;
	}*/

	/*animation:spin 4s linear infinite;*/
	@keyframes button_spin { 
	  0% {
	   transform: rotate(0deg) scale(1);
	  } 20% {
	  transform: rotate(6deg) scale(1.2);  
	  } 50% {
	  transform: rotate(0deg) scale(1);
	  } 80% {
	   transform: rotate(-6deg) scale(1.2);
	  } 100% {
	  transform: rotate(0deg) scale(1);
	  }
	}
	


Anatomically Incorrect Dinosaurs



You can see a functional version of the theme here.
A very simple theme that has everything stripped out except for the game's description and the download button.
You need to upload a title and background image.
The text in the "Download Now!" button is customizable! No more boring download buttons!
This theme is not mobile friendly. It was built for a "secret" desktop thing.

Features:
* Customize the text in the "Download Now" button
* Very simple. Everything is stripped out except for the game description.


Requirements:
* Upload a header graphic (title)
* Upload a background graphic (everything else will be set to invisible)
* You cannot have screenshots or any media in the "right column" area, otherwise the theme gets thrown out.

/*disable screenshots and video colum*/
	.right_col *{
	  visibility: hidden;
	  pointer-events: none;
	}

	/*download button*/
	.buy_btn{
	  animation:button_spin 3s ease-out infinite;
	  visibility: hidden;
	}
	.buy_btn::after{
	  content: "DOWNLOAD THIS MONSTROSITY!";
	  visibility: visible;
	  background-color: salmon;
	  padding: 25px;
	  border-radius: 15px;
	}

	/*buy button just above the text field*/
	.buy_row{
	  position: fixed;
	  right: 2%;
	  top: 39%;
	  z-index: 100;
	}

	/*disable everything else in the left colum that's not the buy button*/
	.more_information_toggle *{
	  visibility: hidden;
	  pointer-events: none;
	}
	.header_buy_row{
	  visibility: hidden;
	  pointer-events: none;
	}
	.buy_message{
	  visibility: hidden;
	  pointer-events: none;
	}
	.uploads *{
	  visibility: hidden;
	  pointer-events: none;
	}
	/*hide "buy" text*/
	#download{
	  visibility: hidden;
	  pointer-events: none;
	}

	/*description box*/
	.formatted_description {
	  z-index: 50;
	  color: black;
	  background-color: white;
	  padding: 10px;
	  /*font-family: 'Bangers', sans;*/
	  /*transform: rotate(-10deg);*/
	  font-size: 20px;
	  position: absolute;
	  width: 400px;
	  right: 2%;
	  top: 50%;

	  border: 2px solid black;
	  box-shadow: 20px 20px black;

	/*slightly skewed*/
	 transform: rotate(-2deg);
	  -webkit-transform: rotate(-2deg);
	  -moz-transform: rotate(-2deg);
	}

	.main{
	  background-position: center;
	  background-size: contain;
	}

	/*animations*/

	/*animation:spin 4s linear infinite;*/
	@keyframes button_spin { 
	  0% { 
	   transform: rotate(0deg) scale(1);
	  } 20% { 
	   transform: rotate(6deg) scale(1.2); 
	  } 50% {
	   transform: rotate(0deg) scale(1);
	  } 80% {
	   transform: rotate(-6deg) scale(1.2);
	  } 100% {
	   transform: rotate(0deg) scale(1);
	  }
	}
	

Mackerelmedia Fish ARG


You can see the functional version of the theme here.
This is a fairly versatile theme WITH a customized devlog section.
The comment box is rotating! This makes the comments a fun and popular place to be.
The background image is stretched to fill the entire page body. This is for the "wave" effect.
There's a fancy animated gif frame surrounding the page.
Images shake on rollover (a cute animation).




@import url('https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap');

	*{
	   font-family: 'Do Hyeon', sans-serif;
	}

	.user_formatted *{
	  display: inline;
	  background: black;
	text-shadow: 1.2px 1px #FF00FF;
	}

	.inner_column{
	border: 3px solid;
	  padding: 15px;    
	  border-image: url('https://img.itch.zone/aW1nLzEyMTMwNjguZ2lm/original/Fr0DPe.gif');
	  border-image-slice: 4;
	  border-image-repeat: round;
	background-image: url("https://img.itch.zone/aW1nLzMxOTMwNTYuZ2lm/original/6SOt9D.gif");
	height: 100%;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	}

	.game_devlog_post_page *{
	  background-color:black;
	}

	.game_comments_widget{
	  width: 500px;
	  height: 200px;
	  animation: spin 15s infinite linear;
	  transform-origin: 50% 50%;
	}

	.more_information_toggle:hover{
	  animation: an_shake .2s linear infinite;
	}

	.buy_btn{
	  animation: an_shake .5s linear infinite;
	}

	.download_links:hover{
	  animation: an_shake .1s linear infinite;
	}

	a:hover{
	 animation: an_shake .1s linear infinite;
	}

	.formatted_description{
	animation: an_shake 15s linear infinite;
	}

	.main img:hover{
	  animation: an_shake .2s linear infinite;
	}

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

	@keyframes an_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, 1px) rotate(0deg); }
	}
	




SHARED_ANXIETIES_WITH_A_FRIEND_ON_YOUR_BIRTHDAY.exe


This is a simple theme.
It strips out all elements from the page EXCEPT for the user description (the description about your game that you input when you're uploading), the title (header), and the download button.
Cursor is a giant mouse.
All elements are animated, including the 'download' pop up.
It features an element that is floating left to right (in this page's case a goldfish, if you download the themes the goldfish is provided in the 'images' folder).
The floating pet is ONE of the screenshots. You can upload only one, and it uses that as an animated element. I advise that you upload only one because that's how this theme is built.
The uploaded background is scaled to full size of the page. If you don't like this theme, but would like to know how to make the background scale the size of the page, you can use that much.


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

	body *{

	  background-size:100% 100%;

	  cursor: url('https://img.itch.zone/aW1nLzI2MTAyMzkucG5n/original/NE6WT6.png'), auto;

	}

	/*the point is to hide everything on the page, but hiding this might be a bad idea...*/
	.user_tools *{
	 visibility: hidden;
	}

	h2, .header, .page_widget{

	font-family: 'Gaegu', Verdana, Geneva, sans-serif;

	  color: white;

	  font-size: 20px;

	  text-shadow:
	   -1px -1px 0 #00E0EF,  
	    1px -1px 0 #00E0EF,
	    -1px 1px 0 #14A1AD,
	     1px 1px 0 #14A1AD;
	}

	/*header is footer :D*/
	.header{
	  position: fixed;
	  bottom: 40px;

	  left: 20%;

	  pointer-events: none;
	  background:none;

	  font-family: 'Gaegu', Verdana, Geneva, sans-serif;

	  font-size: 20px;

	animation: floating 1.5s linear infinite;
	}

	.user_formatted *{
	  position: fixed;
	  margin-left: 50%;
	  margin-right: 5%;

	  font-size: 25px;

	  animation: floating 1s linear infinite;

	}

	/*turn footer upside down*/
	.footer *{
	  font-size: 14px;
	  color: white;
	  background:none;
	  transform: rotate(180deg);
	}

	/*the buy game pop-up window*/
	.buy_game_lightbox_widget, .lightbox_widget, .buy_lightbox *{
	  background: #00E0EF;
	  color: white;
	  cursor: auto;
	  animation: floating 10s linear infinite;
	}

	.download_links:hover{
	  animation: floating .5s linear infinite;
	}

	.add_btn *{
	  background: none;
	}

	.submit_buttons *{
	  background: none;
	}

	.game_info_panel_widget, .more_information_toggle, .uploads{
	  visibility: hidden;
	  background:none;
	}

	.header_buy_row {
	  visibility: hidden;
	  background:none;
	}

	#download{
	  visibility: hidden;
	}

	/*only the download now button is visible and it's centered + hovering...*/
	.buy_row {
	  position: fixed;
	  left: 50%;
	  top: 50%;
	  min-width: 500px;
	  background:none;
	}

	.buy_message{
	  background:none;
	  visibility: hidden;
	}

	.buy_btn {
	  animation:button_spin 2000ms linear infinite;
	  background:none;
	}

	.action_btn *{
		font-size: 20px;
		background:none;
	}

	/*scrolling fish*/
	.right_col *{
	  position: absolute;
	  right: 100%;
	  width: 100%;
	  top: 40%;
	}
	.screenshot_list *{
	  animation: swim 10s linear infinite;
	}

	/*  CSS ANIMATIONS  */

	/*animation:spin 4s linear infinite;*/
	@keyframes button_spin { 
	   from{
	   transform: rotate(0deg) scale(2);
	  }to { 
	   transform: rotate(360deg) scale(2); 
	  }
	}

	@keyframes swim {
	  0% { right: 0; }
	  100% { right: -250%; }
	}

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


Electric Zine Maker


This is the old Electric Zine Maker theme. It's no longer in use.
banner text has interesting styling and animation
background is huge and animated to float behind everything
download now moves
cute frame around images



@import url('https://fonts.googleapis.com/css?family=Acme|Luckiest+Guy|Patrick+Hand');

.header{
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 30pt;
	color: white;
	background-image: url('https://img.itch.zone/aW1nLzIwOTc1MDQucG5n/original/tpmuvL.png');
	background-color: #FF00FF;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	animation: anim_back 10s linear infinite;
}

.left_col, .column{
	font-size: 20pt;
	color: white;
}

.main{
	cursor: url('https://img.itch.zone/aW1nLzIwOTc1MDcuZ2lm/original/AbaFUs.gif') 25 25, auto;
	background-image:url('https://img.itch.zone/aW1nLzE3Mjg1MjAucG5n/original/F0P8fx.png');
	background-size: 1000% 1000%;
	animation: anim_back 30s linear infinite;
}

.wrapper{
	background-color:black;
}

.left_col *{
	font-family: 'Acme', sans-serif;
	font-size: 35px;
	color: #FFC753;
	animation: rotation 5s ease-out alternate infinite;
}

.game_comments_widget *{
	font-size: 20px;
}

.user_formatted *{
	font-family: 'Patrick Hand', sans-serif;
	font-size: 40px;
	color: #FFC753;
	
	background: linear-gradient(to right, #49FE79 5%, #FFF200 20%, #FF9AFF 40%, #49FE79 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	animation: rotation 1s ease-out alternate infinite;
}


.main img{
	border: 10px solid;  
	border-image:   url('https://img.itch.zone/aW1nLzE1Mzg0MDcuZ2lm/original/2AkSWw.gif');
	border-image-slice: 4;
	border-image-repeat: round;
	background-color: rgba(0, 0, 0, .7);

	animation: rotation 1s ease-out alternate infinite;
}

.buy_btn {
	animation:button_spin 1s ease-out infinite;
	background:none;
}

a:hover{
	animation: an_shake .2s linear infinite;
}

/*.game_comments_widget:hover{
	animation: an_shake .05s linear infinite;
}*/

.more_information_toggle:hover{
	animation: an_shake .2s linear infinite;
}

.main img:hover{
	animation: an_shake .2s linear infinite;
}

.download_links:hover{
	animation: an_shake .2s linear infinite;
}

/*animations*/

@keyframes button_spin { 
  0% { 
   transform: rotate(0deg) scale(1.2);
  } 20% { 
   transform: rotate(6deg) scale(1); 
  } 50% {
   transform: rotate(0deg) scale(1.2);
  } 80% {
   transform: rotate(-6deg) scale(1);
  } 100% {
   transform: rotate(0deg) scale(1.2);
  }
}

@keyframes anim_back{ 
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes an_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); }
}

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


A_DESKTOP_LOVE_STORY


links have an interesting hover effect
devlog is also themed
page is animated
heart cursor

@import url('https://fonts.googleapis.com/css?family=Staatliches|ZCOOL+KuaiLe');

body *{

  cursor: url('https://img.itch.zone/aW1nLzE3Mjg1NzMuZ2lm/original/n%2F1tD%2F.gif'), auto;

}

a{
  cursor: url('https://img.itch.zone/aW1nLzE3Mjg1NzQuZ2lm/original/YkTbnU.gif'), auto;
}

img:hover{
  cursor: url('https://img.itch.zone/aW1nLzE3Mjg1NzQuZ2lm/original/YkTbnU.gif'), auto;
}

/*.main img:hover{
  -webkit-mask-image: url('https://img.itch.zone/aW1nLzE3Mjg1ODIuZ2lm/original/HVs0bU.gif');
  mask-image: url('https://img.itch.zone/aW1nLzE3Mjg1ODIuZ2lm/original/HVs0bU.gif');
  -webkit-mask-size: 2000px 1500px;
  mask-size: 2000px 1500px;
}*/

.main img{
	 animation: an_shake 7s linear infinite; 
}

.column, .game_devlog_post_page{
  font-family: 'Staatliches', monospace;
  font-size: 30px;

  color: white;

  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #FF33FF,
		-1px 1px 0 #000,
		1px 1px 0 #6600FF;

}

/*devlog*/
.split_columns{
  display: inline;
  background: #FDAEDD;
  padding: 20px;

  font-size: 35px;

  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

a, h2{
  display: inline;
  background-image:url('https://img.itch.zone/aW1nLzE3Mjg0NTAucG5n/original/%2B%2BA8XY.png');
  background-color: rgba(255, 255, 255, 0);
  animation: anim_back .8s linear infinite;
}

.formatted_description{
  font-family: 'Staatliches', monospace;
  font-size: 40px;
  color: white;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.header{

  padding: 40px;

  font-family: 'ZCOOL KuaiLe', monospace;
  font-size: 30px;
  color: #FFD5EC;

  /*background-image:url('https://img.itch.zone/aW1nLzE3Mjg0NTAucG5n/original/%2B%2BA8XY.png');*/

  /*background-image:url('https://img.itch.zone/aW1nLzE3Mjg0NzIucG5n/original/syButB.png');*/

  background-image: url('https://img.itch.zone/aW1nLzE3Mjg0NjcucG5n/original/7HWtvF.png');

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

  animation: anim_back 5s ease infinite;

}

#inner_column{
  background-image:url('https://img.itch.zone/aW1nLzE3Mjg0NTMucG5n/original/8xq4RN.png');

background-size: 200% 100%;

  animation: anim_back 10s ease infinite;

}

.wrapper{

  /*background-image:url('https://img.itch.zone/aW1nLzE3Mjg0NTAucG5n/original/%2B%2BA8XY.png');*/

  background-image:url('https://img.itch.zone/aW1nLzE3Mjg1MjAucG5n/original/F0P8fx.png');

  /*background-image:url('https://img.itch.zone/aW1nLzE3Mjg1MjQucG5n/original/WpS%2BHd.png');*/

  /*background: linear-gradient(124deg, #FF00FF, #FFCCFF, #FF0099, #9999FF, #FF9999, #66CCFF, #FFCCCC, #FF33FF, #FF00FF);*/

  /*background-size: 1800% 1800%;*/

  background-color: #FCC5FE;
/*#FF00FF;*/

  animation: anim_back 10s ease infinite;

}

.input_row *{
  background: black;
  font-size: 20px;
}

.buy_btn {
  animation:button_spin 1.3s ease-out infinite;
  background:none;
}

.buy_btn:hover{
  cursor: url('https://img.itch.zone/aW1nLzE3Mjg1NzQuZ2lm/original/YkTbnU.gif'), auto;
}

.download_links:hover{
  animation: an_shake .1s linear infinite;
}

/*animations*/

@keyframes anim_back{ 
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*animation:spin 4s linear infinite;*/
@keyframes button_spin { 
  0% { 
   transform: rotate(0deg) scale(1);
  } 20% { 
   transform: rotate(6deg) scale(1.5); 
  } 50% {
   transform: rotate(0deg) scale(1);
  } 80% {
   transform: rotate(-6deg) scale(1.5);
  } 100% {
   transform: rotate(0deg) scale(1);
  }
}

@keyframes an_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); }
}


Everything is going to be OK



header is placed as a footer, for the fire effect
all elements move
background animated fade




@import url('https://fonts.googleapis.com/css?family=Barrio');
@import url('https://fonts.googleapis.com/css?family=Life+Savers');

/* messy css written in a very very tiny css field. it's so cute. it's just a baby. */

.inner_column{
  padding: 50px;
  border: 3px solid;
  padding: 15px;    
  border-image: url('https://img.itch.zone/aW1nLzEyMTMwNjguZ2lm/original/Fr0DPe.gif');
  border-image-slice: 4;
  border-image-repeat: round;
  background-color: rgba(0, 0, 0, .7);

  box-shadow: 30px 30px 0px black;
}

.main p, h2{
  display: inline;
  background: black;
}

.user_formatted *{
  display: inline;
  background: black;
}

.wrapper{
  animation: colorloop 5s infinite;
}

.main *{
  font-family: 'Life Savers';
  text-shadow: 1.2px 1px #FF00FF;
}

.screenshot{
  animation: rotation 0.5s ease-out alternate infinite;
  border: 3px solid;
  border-image: url('https://img.itch.zone/aW1nLzEyMTMwNjguZ2lm/original/Fr0DPe.gif');
  border-image-slice: 4;
  border-image-repeat: round;
}

.main a {
  font-family: 'Barrio';
  color: black;
  display: inline;
  background: black;
  animation: colorloop 2s infinite;
}

.columns{
  animation: rotation_subtle 1s ease-out alternate infinite;
}

.buy_row, .more_information_toggle, .header_buy_row, .game_comments_widget{
  animation: floating 5s infinite;
}

.game_devlog{
  animation: floating 2s infinite;
}

.uploads{
  animation: floating 1s infinite;
}

.header{
  position: fixed;
  bottom:0;
  left:0;
  z-index: 10;
  pointer-events: none;
}

@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 rotation_subtle {
  0% {
	transform: rotate(-.02deg);
  } 100% {
	transform: rotate(.02deg);
  }
}

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


Cyberpet Graveyard



everything on the page is gone except for download now
the description text is used as a header (skull)
banner is footer
the download now page is themed really cute
not ideal, but great for a one-off type page




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

body *{
	
  /*background: url("https://img.itch.zone/aW1nLzEzNDEzNjEuZ2lm/original/i5bndv.gif") no-repeat center center fixed;*/
  /*background: url("https://img.itch.zone/aW1nLzEzNDUwOTUuZ2lm/original/VUP4aw.gif") no-repeat center center fixed;*/
  /*background: url("https://img.itch.zone/aW1nLzEzNDUwOTcuZ2lm/original/Lms%2FVl.gif") no-repeat center center fixed;*/
  background: url("https://img.itch.zone/aW1nLzEzNDUxMDYuZ2lm/original/cMeE6q.gif") no-repeat center center fixed;

  background-size: cover;
  background-color: black;

  cursor: url('https://img.itch.zone/aW1nLzEzNDMyOTYuZ2lm/original/qiGtZ%2F.gif'), auto;
  
  font-family: 'Gaegu', Verdana, Geneva, sans-serif;
  font-size: 40px;

  color:white;

  text-shadow:
   -1px -1px 0 #FF3DB7,  
    1px -1px 0 #FF3DB7,
    -1px 1px 0 #FF3DB7,
     1px 1px 0 #FF3DB7;
}

.right_col *{
  visibility: hidden;
  background:none;
}

.header{
  position: fixed;
  bottom: 0px;
  right: 0px;
  pointer-events: none;
  background:none;
}

.footer *{
  font-size: 20px;
  color: white;
  background:none;
}

.buy_game_lightbox_widget, .lightbox_widget, .buy_lightbox *{
  background: #FF99CC;
  color: white;
}

.add_btn *{
  background: none;
}

.submit_buttons *{
  background: none;
}

.main h2, p, img{
  background:none;
}

.game_info_panel_widget, .more_information_toggle, .uploads{
  visibility: hidden;
  background:none;
}

.header_buy_row {
  visibility: hidden;
  background:none;
}

.user_formatted *{
  position:fixed;
  top: 0px;
  left: 0px;
  background:none;
  pointer-events: none;
}

#download{
  visibility: hidden;
}

.buy_row {
  position: fixed;
  left: 50%;
  top: 50%;
  min-width: 500px;
  background:none;
}

.buy_row *{
  background:none;
}

.buy_btn {
  animation:button_spin 1.3s ease-out infinite;
  background:none;
}

.buy_message{
  background:none;
  visibility: hidden;
}

.action_btn *{
	font-size: 20px;
	background:none;
}

.user_tools *{
	background:none;
}

/*animation:spin 4s linear infinite;*/
@keyframes button_spin { 
  0% { 
   transform: rotate(0deg) scale(1.5);
  } 20% { 
   transform: rotate(6deg) scale(2); 
  } 50% {
   transform: rotate(0deg) scale(1.5);
  } 80% {
   transform: rotate(-6deg) scale(2);
  } 100% {
   transform: rotate(0deg) scale(1.5);
  }
}


Electric File Monitor



mask effect for description that is an animated rainbow
buy now shakes
mouse over shakes
comments shake on over



@import url('https://fonts.googleapis.com/css?family=Patua+One|Purple+Purse|Zilla+Slab+Highlight');

body *{
	
  /*background: url("https://img.itch.zone/aW1nLzE1Mzg0MDcuZ2lm/original/2AkSWw.gif") no-repeat center center fixed;*/

/*https://img.itch.zone/aW1nLzE1Mzg0MTEuZ2lm/original/1S%2FJXu.gif*/

  background-size: cover;
  /*background-color: black;*/

  cursor: url('https://img.itch.zone/aW1nLzEzNDMyOTYuZ2lm/original/qiGtZ%2F.gif'), auto;

}

.main *{
  font-size: 22px;
  color: #ACADDE;
font-family: 'Patua One', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.main a{
  color: #FF74C2;
}

.main a:hover{
  animation: an_shake .2s linear infinite;
}

#view_game_footer a{
  color: #FF74C2;
}

.header:hover{
  animation: an_shake .2s linear infinite;
}

.header *{

  font-size: 75px;

font-family: 'Purple Purse', "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  text-shadow: -2px 0 #FF71C8, 0 2px #FFC753, 2px 0 #FF71C8, 0 -2px #FFC753;

  background: linear-gradient(to right, #FFC753 20%, #FF71C8 40%, #ABAEDF 60%, #FFC753 80%);
  background-size: 200% auto;

  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.main img{
border: 10px solid;  
border-image:   url('https://img.itch.zone/aW1nLzE1Mzg0MDcuZ2lm/original/2AkSWw.gif');
border-image-slice: 4;
border-image-repeat: round;
background-color: rgba(0, 0, 0, .7);

}

.main img:hover{
  animation: an_shake .2s linear infinite;
}

.user_formatted *{
  font-family: 'Zilla Slab Highlight', "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  font-size: 35px;
  color: #FFC753;

  padding: 10px;

  background: linear-gradient(to right, #FFC753 20%, #FF71C8 40%, #ABAEDF 60%, #FFC753 80%);
  background-size: 200% auto;

  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: an_glow 3s linear infinite;

}

.more_information_toggle:hover{
  animation: an_shake .2s linear infinite;
}

.buy_btn{
  animation: an_shake .5s linear infinite;
}

.game_comments_widget:hover{
  animation: an_shake .05s linear infinite;
}

.lightbox_widget *{
  cursor: auto;
}

.download_links:hover{
  animation: an_shake .1s linear infinite;
}

@keyframes an_glow {
  to {
  background-position: 200% center;
  }
}

@keyframes an_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); }
}


ARMAGAD


banner is footer (monkey)
comments are weirdly animated to discourage leaving comments
things move, strange theme, but fun
download now window looks cool



@import url('https://fonts.googleapis.com/css?family=Bangers|Bowlby+One+SC|Luckiest+Guy');

*{
  cursor: url('https://img.itch.zone/aW1nLzEyNDQxOTgucG5n/original/%2BJCV33.png'), auto;
}

.main {
  animation:colors_back 5s infinite;
}

.game_page_primary_column *{
   /*animation:anim2 5s infinite;*/
}

/*.page_widget, .header_buy_row *{
  animation:anim2 10s infinite;
}*/

#inner_column *{
  
  /*text outlines*/
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;

}

.community_post_form_widget, .community_post *{

  color: white;
  font-size: 40px;
  
  text-shadow:
   -1px -1px 0 black,  
    1px -1px 0 black,
    -1px 1px 0 black,
     1px 1px 0 black;

  display: inline;
  background: black;

}

.community_post_form_widget, .game_comments_widget *{
  animation:anim1 5s infinite;
}

.right_col *{
  animation:anim3 1s infinite;
}

h2, #download, .header_buy_row, .more_information_toggle, .buy_row, .uploads *{
  /*other types of text*/
  font-family: 'Bangers', monospace;

  font-size: 50px;

  color: yellow;

  -webkit-text-stroke: 1px black;
   text-shadow:
       3px 5px 0 #000,
     -2px -2px 0 #000,  
      2px -2px 0 #000,
      -2px 2px 0 #000,
       2px 2px 0 #000;

  animation: colors 2s infinite;
}

p, section, .breadcrumbs, .post_meta, .formatted_description *{
  
  font-family: 'Luckiest Guy', monospace;
  font-size: 40px;
  animation: colors_plain 10s infinite;
  
  display: inline;
  background: black;

  /*outline*/
  
 -webkit-text-stroke: 1px black;
}

h1, h, h2, h3, .button_message, .buy_message *{
  animation: colors 0.5s infinite;
  font-size: 50px;
  color: red;
  text-shadow: none;
}

.button, buy_btn *{
  animation: colors 2s infinite;
  font-family: 'Bowlby One SC', monospace;
  color: pink;
}

.header *{
  position: fixed;
  bottom:0;
  right:0;
  z-index: 10;
  pointer-events: none;
}

@keyframes colors
{
  0%   {color: red;}
  25%  {color: orange;}
  50%  {color: red;}
  75%  {color: yellow;}
  100% {color: red;}
}

@keyframes colors_plain
{
  0%   {color: white;}
  25%  {color: orange;}
  50%  {color: white;}
  75%  {color: yellow;}
  100% {color: white;}
}

@keyframes colors_back
{
  0%   {background-color: black;}
  25%  {background-color: #000066;}
  50%  {background-color: black;}
  75%  {background-color: #330000;}
  100% {background-color: black;}
}

@keyframes anim1 {
  0% {
    transform:translateY(0px)
  } 
  50% {
    transform:translateY(120px)
  }
  100% {
    transform:translateY(0px)
  }
}

@keyframes anim2 {
  0% {
    transform:scale(1)
  } 
  50% {
    transform:scale(1.01)
  }
  100% {
    transform:scale(1)
  }
}

@keyframes anim3 {
  0% {
    transform:skewY(0deg)
  } 
  50% {
    transform:skewY(2deg)
  }
  0% {
    transform:skewY(0deg)
  }
}


GOGOFISH


strangely broken (intentional)
frame around paragraphs to make it all look windowed
download now is animated
nuclear explotion in the background



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

body *{
	
  background: url("https://img.itch.zone/aW1nLzEzOTQ3NzkuZ2lm/original/K8Weo7.gif") no-repeat center center fixed;

  background-size: cover;
  background-color: black;

  cursor: url('https://img.itch.zone/aW1nLzEzNDMyOTYuZ2lm/original/qiGtZ%2F.gif'), auto;
  
  font-family: 'Kirang Haerang', Verdana, Geneva, sans-serif;
  font-size: 40px;

  color: #FFF15D;

  text-shadow:
   -1px -1px 0 #AE0000,  
    1px -1px 0 #AE0000,
    -1px 1px 0 #AE0000,
     1px 1px 0 #AE0000;
}

.buy_row, .header_buy_row *{
  background: black;
}

.main a{
  color: black;

  text-shadow:
 -1px -1px 0 red,  
  1px -1px 0 yellow,
  -1px 1px 0 red,
   1px 1px 0 orange;
}

.user_formatted *{
  padding: 10px;

  border: 3px solid;  
  border-image:   url('https://img.itch.zone/aW1nLzEzOTQ3NzYuZ2lm/original/joMfZ0.gif');
  border-image-slice: 4;
  border-image-repeat: round;
  background-color: rgba(0, 0, 0, .7);
  box-shadow: 30px 30px 0px black;

  background: black;
}

.buy_btn {
  animation:button_spin 1.3s ease-out infinite;
}

.main img{
border: 3px solid;  
border-image:   url('https://img.itch.zone/aW1nLzEzOTQ3NzYuZ2lm/original/joMfZ0.gif');
border-image-slice: 4;
border-image-repeat: round;
background-color: rgba(0, 0, 0, .7);
box-shadow: 30px 30px 0px black;
}

.buy_game_lightbox_widget, .buy_form *{
  background: black;
}

.buy_game_lightbox_widget h2{
  background: black;
}

.add_btn *{
  background: none;
}

.choose_payment *{
  background: none;
}

/*animation:spin 4s linear infinite;*/
@keyframes button_spin { 
  0% { 
   transform: rotate(0deg) scale(1.5);
  } 20% { 
   transform: rotate(6deg) scale(2); 
  } 50% {
   transform: rotate(0deg) scale(1.5);
  } 80% {
   transform: rotate(-6deg) scale(2);
  } 100% {
   transform: rotate(0deg) scale(1.5);
  }
}


FR2OGGY (ONLY ONE SURVIVES)



banner is footer (lava)
background is lava
comments are really large (intentional to make commenting hard)
fun font use to make it kind of like a horror movie poster




@import url('https://fonts.googleapis.com/css?family=Creepster|Fontdiner+Swanky');

*{
  cursor: url('https://img.itch.zone/aW1nLzEyNDQxOTgucG5n/original/%2BJCV33.png'), auto;
}

* a{
cursor: pointer;
}

#wrapper *{
  font-size: 50px;
  font-family: 'Creepster', monospace;
  text-shadow: 1px 1px 1px yellow, 1px 2px orange, 1px 3px red, 3px 4px 1px black, 0px 0px 4px black;

}


.buy_btn{
 font-family: monospace;
  cursor: pointer;
}


.header{
  position: fixed;
  bottom: -30px;
  left:0;
background-image: url("https://img.itch.zone/aW1nLzEyNDQyOTEuZ2lm/original/cBh%2FCf.gif");
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

.column{
  animation: rotation_subtle 2s ease-out alternate infinite;
}

.screenshot {
  /*first set of border*/
outline: 3px solid #0000AE;
box-shadow: 0px 0px 0px 5px #A9A9A9;
/*funky set of border*/
border: 2px solid white;
border-image-slice: 1;
border-image-repeat: round;

animation: rotation_subtle .5s ease-out alternate infinite;
}

.header_buy_row *{
  animation: rotation .1s ease-out alternate infinite;
color: yellow;

font-size: 70px;
}

.footer{
  color: orange;
}

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


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


A very STINKY mystery FILE



probably one of my weirdest
comments are a carousel! hop on for the ride! commenters love it!
page is swinging
download now is rotating
has attracted flies



h1{
  background-image: url("https://img.itch.zone/aW1nLzExNjMxNDAuZ2lm/original/AZPcV9.gif");
  filter: invert(100%);
}

.header{
  width: 540px;
  height: 90px;
  animation: spin 5s infinite linear;
  transform-origin: 45% 50%;
  padding: 90px;
}

.buy_btn{
  width: 200px;
  height: 90px;
  animation: spin 3s infinite linear;
  transform-origin: 50% 50%;
   z-index: 5;
}

.screenshot_list{
  animation: spin 15s infinite linear;
  filter: blur(2px) grayscale(.5) opacity(0.5);
}

.wrapper{
  animation: rocking 5s infinite linear;
  background-color: rgba(255, 255, 255, .1);

height: 100%;

  background-image: url("https://img.itch.zone/aW1nLzExNjMxNDAuZ2lm/original/AZPcV9.gif");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.inner_column{
  /*transparent*/
  background-color: rgba(255, 255, 255, 0.7);
/*fly gif border*/
 border: 50px solid transparent;
    border-image: url(https://img.itch.zone/aW1nLzExNjMxNDAuZ2lm/original/AZPcV9.gif) 40%;
}

.game_comments_widget{
  width: 500px;
  height: 200px;
  animation: spin 15s infinite linear;
  transform-origin: 50% 50%;
}

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

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


HELP ME



as the title implies
things are upside down
generally weird and intentionally broken




@import url('https://fonts.googleapis.com/css?family=Barrio');
@import url('https://fonts.googleapis.com/css?family=Life+Savers');

.wrapper *{
  transform: scale(-1);
  padding: 18px;
}

.inner_column{
padding: 150px;
}

#download{
  transform: scale(20);
padding:50px;
}

.buy_row *{
 transform: scale(1);
  padding: 50px;
}


.user_formatted *{
  box-shadow: 50px 10px 0px #fa5ced;
  padding: 50px;
  transform: scale(1);
}



.main *{
  font-family: 'Life Savers';
}

.main a {
  font-family: 'Barrio';
  color: #f994ef;
}

.game_comments_widget * {
  font-size: 20px;
  transform: scale(1);
  transition: all 5ms;
}

.game_comments_widget:hover{
  /*transform: scale(-1);
  transition: all 5ms;*/
}

.main a:hover{
  color: #FFFFFF;
  transition: all 30ms;
}

.button *{
  transform: scale(1);
  transition: all 30ms;
}

.button:hover{
  transform: scale(-1.2);
  transition: all 10ms;
}