aprilFools.css

﻿/*
  aprilFools.css
  Written by Wes Bos
  Modified by Nick Karamoff

  I assume no responsibility for angry co-workers or lost productivity 

  Put these CSS definitons into your co-workers Custom.css file.
  
  They will be applied to every website they visit as well as their developer tools.
*/


/*
  Turn every website upside down
*/
body {
  transform: rotate(180deg);
}

/*
  blur every website for a split second every 30 seconds
*/
body {
  animation: blur 30s infinite;
}

/*
  Spin every Website
*/ 
body {
  animation: spin 5s linear infinite;
}

/*
  Flip all images upside down
*/
img {
  transform: rotate(180deg);
}

/*
  COMIC SANS EVERYTHING
*/

body, p, body p, body div p {
  font-family: 'Comic Sans MS', cursive !important;
}

/*
  Spin all images
*/ 
img {
  animation: spin 1s linear infinite;
}

/*
  Hide every 2nd paragraph element on a page
*/
p:nth-child(2) {
  display:none !important;
}

/*
  Permanent cursor wait
*/ 
html {
  cursor:wait !important; 
}

/*
  hide the cursor all together
*/
html {
  cursor:none !important;
}

/*
  slowly grow text
*/
p {
  animation: grow 120s ease-in;
}


/* Dev Tools */                                     

/*
  Spin dev tools round and round
*/
#-webkit-web-inspector {
 -webkit-animation: spin 1s linear infinite; 
}


/*
  Flip dev tools upside down
*/ 
#-webkit-web-inspector {
 -webkit-transform:rotate(180deg);
}


/* Hide the close button */
#-webkit-web-inspector .toolbar-item.close-left {
  display:none !important;
}


/* Make console text all blurry */
#-webkit-web-inspector .console-group-messages {
  text-shadow: 0 0 3px rgba(0,0,0,.5) !important;
}

#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title {
  text-shadow: 0 0 3px rgba(255,0,0,.5) !important;
}

#-webkit-web-inspector .console-user-command > .console-message-text {
  text-shadow: 0 0 3px rgba(0,128,255,.5) !important;
}

#-webkit-web-inspector .console-group-messages,
#-webkit-web-inspector .console-user-command > .console-message-text,
#-webkit-web-inspector .console-formatted-null,
#-webkit-web-inspector .console-formatted-undefined,
#-webkit-web-inspector .console-debug-level .console-message-text,
#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title,
#-webkit-web-inspector .console-group-messages .section .header .title,
#-webkit-web-inspector .console-formatted-object,
#-webkit-web-inspector .console-formatted-node,
#-webkit-web-inspector .console-formatted-array,
#-webkit-web-inspector .section .properties .name,
#-webkit-web-inspector .event-properties .name,
#-webkit-web-inspector .console-formatted-object .name,
#-webkit-web-inspector .console-formatted-number,
#-webkit-web-inspector .console-formatted-string,
#-webkit-web-inspector #console-messages a {
  color: transparent !important;
}


/* HTML PRIDE! */
html {
  animation: rainbow 8s infinite;
}


/*
  Make every website fall over!
*/
html, body {
  height: 100%;
}

html {
  perspective: 1000;
}

body {
  transform-origin: bottom center;
  transform: rotateX(-90deg);
  animation: fall 1.5s ease-in;
}


/*
	Insert a phrase every paragraph
*/
p:before {
   content: "YOLO ";
}


/* New tricks by Nick Karamoff */

/*
  Flip every paragraph upside down
*/
p {
  transform: rotate(180deg);
}


/*
  Flip every header upside down
*/
h1, h2, h3, h4, h5, h6 {
  transform: rotate(180deg);
}


/*
  Mirror the whole webpage
*/
body {
  transform: scale(-1, 1);
}

/*
  Transparent paragraphs
*/
p {
  color: transparent;
}

/*
  "Very good design" combo (blue bg, red text, Comic Sans)
*/
body, p, h1, h2, h3, h4, h5, h6 {
  color: red;
  background-color: blue;
  font-family: "Comic Sans", cursive;
}

/*
  Deactivate all the links
*/
a {
  pointer-events: none;
  cursor: default;
}

/* 
  Unlinkify links (standart formatting, but still clickable)
*/
a {
  text-decoration: none;
  color: inherit;
  cursor: default;
}

/*
  Links not allowed
*/
a {
  cursor: not-allowed;
}

/*
  Everything's a link!
*/
body {
  cursor: pointer;
}


/* Animations */

/*
  Everything that is moving is powered from here, so just copy this whole chunk
*/

@keyframes blur {
  0%   { filter: blur(0px); }
  49%   { filter: blur(0px); }
  50%   { filter: blur(1px); }
  51%   { filter: blur(0px); }
  100%   { filter: blur(0px); }
}

@-webkit-keyframes spin {
  0%   { -webkit-transform: rotate(0deg); }
  100%   { -webkit-transform: rotate(360deg); }
}

@keyframes rainbow {
  100% { filter: hue-rotate(360deg); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100%   { transform: rotate(360deg); }
}

@keyframes fall {
  0%   { transform: none; }
  100%   { transform: rotateX(-90deg); }
}

@keyframes grow {
  0%   { font-size: none; }
  100%   { font-size: 80pt; }
}