MediaWiki:Wikia.css

/***********************************************************************/ /***********************************************************************/ /************************** Table of Contents **************************/ /***********************************************************************/ /***********************************************************************/ /*   Section 1 - Table of Contents Section 2 - Top Configuration Section 2.1 - Imports Section 2.1.1 - Contribs Buttons Section 2.1.2 - Fonts Section 3 - CSS Styling Section 3.1 - Common HTML Styling Section 3.1.1 - Tags Section 3.2 - File/User Page Tabs Section 3.3 - Infobox Styling Section 3.3.1 - All Infoboxes — General Section 3.3.2 - All Infoboxes — Titles & Headers Section 3.3.3 - All Infoboxes — Images Section 3.3.4 - All Infoboxes — Data Section 3.3.5 - All Infoboxes — Navigation Section 3.3.6 - All Infoboxes — Borders Section 3.3.7 - All Infoboxes — Animations/Effects Section 3.4 - Page Fonts Section 3.5 - Main Page Styling Section 3.6 - Username Styling Section 3.6.1 - Chur21 Section 3.6.2 - EpicDragon Section 3.6.3 - FLATtheFISH Section 3.6.4 - MattyB420 Section 3.6.5 - Raicchen Section 3.6.6 - ThePokegeek5000 Section 3.6.7 - Trilogy7 Section 3.6.8 - ScrubyDub2222 Section 3.6.9 - XXxKARMAxXx Section 4 - Bottom Configuration Section 4.1 - Keyframes

/***********************************************************************/ /***********************************************************************/ /************************** Top Configuration **************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /******************************* Imports *******************************/ /***********************************************************************/

/* Contribs Buttons */ @import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ContribsButtons.css|u:dev:MediaWiki:CBD.css");/**/

/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Allerta+Stencil|Gloria+Hallelujah|Jura|Noto+Serif|Righteous|Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Signika|Ubuntu:300,300i,400,400i,500,500i,700,700i|Ultra');/**/ /* Note:Jura is the actual game's logo, Roboto Condesend is the game's actual text */

/***********************************************************************/ /***********************************************************************/ /***************************** CSS Styling *****************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /************************* Common HTML Styling *************************/ /***********************************************************************/

/* Tags */ code { background-color: #DDDDDD; }

/***********************************************************************/ /************************* File/User Page Tabs *************************/ /***********************************************************************/

ul.tabs { display: flex; flex-direction: row; border-bottom: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }

.tabs li { border-bottom: 4px solid #888; box-shadow: 0 2px 0 #5F5F5F; color: #888888; cursor: pointer; float: left; font-family: Ubuntu; font-size: .875rem; font-weight: bold; height: 36px; text-align: center; text-transform: uppercase; flex: 1 auto; margin: 0; transition: filter 0.25s ease-out }

.tabs li:hover { filter: brightness(1.25); }

.tabs li a { color: inherit; border: none !important; }

.tabs li:hover a { text-decoration: none; text-shadow: none; }

.tabs li.selected { border-bottom: 4px solid currentColor; box-shadow: 0 2px 0 #888888; color: currentColor; }

.tabs li.selected a { cursor: pointer; background: none; color: inherit; }/**/

/***********************************************************************/ /*************************** Infobox Styling ***************************/ /***********************************************************************/ /* All Infoboxes — General */ .portable-infobox.pi-background { width: 290px; margin-bottom: 6px; border-radius: 3px; box-shadow: 0 3px 0 rgba(0,0,0,0.2); }

.portable-infobox .pi-data-label, .portable-infobox .pi-data-value, .portable-infobox .pi-caption { -epub-hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; adobe-hyphenate: none; }

.portable-infobox .pi-data-label abbr { border-bottom: 1px dotted; }/**/

/* All Infoboxes — Titles & Headers */ .portable-infobox .pi-header, .portable-infobox .pi-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

.portable-infobox .pi-title { padding: 8px 14px; }

.portable-infobox .pi-collapse .pi-header:first-child::after { border-width: 3px 3px 0 0; border-radius: 2px; }/**/

/* All Infoboxes — Images */ .portable-infobox .pi-image-thumbnail { max-width: 100%; height: auto; }

.portable-infobox .pi-caption { font-style: italic; font-size: 12px; color: rgba(153, 153, 153, 0.75); text-align: center; }

.portable-infobox .pi-image-collection .pi-image-collection-tabs { text-align: center; border-top-width: 4px; padding-top: 3px; padding-bottom: 6px; }

.portable-infobox .pi-image-collection-tabs .current { box-shadow: 0 3px 1px 0 rgba(0,0,0,0.1); }

.portable-infobox .pi-image-collection-tabs .pi-tab-link { font-weight: bold; }/**/

/* All Infoboxes — Data */ .portable-infobox .pi-data { padding-top: 0; padding-bottom: 0; }

.portable-infobox .pi-data-label { padding-top: 6px; padding-bottom: 3px; }

.portable-infobox .pi-horizontal-group .pi-data-label, .portable-infobox .pi-data-label.pi-smart-data-label, .portable-infobox.pi-layout-stacked .pi-data-label { padding-bottom: 3px; }

.portable-infobox .pi-data-value { padding-bottom: 6px; }

.portable-infobox.pi-layout-default .pi-data-value { padding-top: 6px; }/**/

/* All Infoboxes — Navigation */ .portable-infobox .pi-navigation { background-color: inherit; font-weight: inherit; color: inherit; text-align: center; }/**/

/* All Infoboxes — Borders */ .pi-border-color { border-color: rgba(0, 0, 0, 0.05); }

.portable-infobox .pi-image-collection-tabs, .portable-infobox .pi-item:not(.pi-group), .portable-infobox .pi-horizontal-group, .portable-infobox .pi-navigation { border-style: solid; border-width: 0 4px 0 4px; border-color: rgba(0, 0, 0, 0.05); }

.portable-infobox > .pi-item:not(.pi-group):first-child { border-top: 4px solid rgba(0, 0, 0, 0.05); }

.portable-infobox > .pi-navigation:last-child, .portable-infobox > .pi-item:last-child { border-bottom: 4px solid rgba(0, 0, 0, 0.05); border-radius: 0 0 3px 3px; }

.portable-infobox .pi-header.pi-item-spacing, .portable-infobox .pi-title.pi-item-spacing { border-style: solid; border-width: 0 4px 0 4px; border-color: rgba(0, 0, 0, 0.2); }

.portable-infobox .pi-group:first-child .pi-item:first-child, .portable-infobox > .pi-item:first-child:not(.pi-group) { border-top-width: 4px; border-radius: 3px 3px 0 0; }

.portable-infobox .pi-image-collection .pi-image-collection-tab-content .pi-image.pi-item, .portable-infobox .pi-header + .pi-image-collection .pi-image-collection-tabs, .portable-infobox .pi-title + .pi-image-collection .pi-image-collection-tabs { border-top-width: 0; }

.portable-infobox .pi-collapse-closed .pi-header.pi-item-spacing { border-bottom-width: 4px; }

.portable-infobox .pi-collapse-closed.pi-group:last-of-type .pi-header.pi-item-spacing { border-radius: 0 0 3px 3px; }

.portable-infobox .pi-collapse-closed.pi-group:only-child .pi-header.pi-item-spacing { border-radius: 3px; }

.portable-infobox .pi-image { border-color: rgba(0, 0, 0, 0.05); }

.portable-infobox .pi-collapse-closed.pi-collapse { border-bottom: none; }/**/

/* All Infoboxes — Animations/Effects */ .portable-infobox .pi-smart-data-label:nth-child(odd), .portable-infobox .pi-smart-data-value:nth-child(odd) { background-color: #d4e2c0; }

.portable-infobox .pi-image-collection-tabs, .portable-infobox .pi-item:not(.pi-group), .portable-infobox .pi-horizontal-group, .portable-infobox .pi-image-collection-tabs, .portable-infobox .pi-navigation, .portable-infobox .pi-header, .portable-infobox .pi-title { transition: all 0.4s cubic-bezier(0.42, 0, 0.13, 3.00); }

.portable-infobox .pi-tab-link { transition: all 0.3s; }

.portable-infobox .pi-image-collection-tabs:hover, .portable-infobox .pi-item:not(.pi-group):hover, .portable-infobox .pi-horizontal-group:hover, .portable-infobox .pi-image-collection-tabs:hover, .portable-infobox .pi-navigation:hover { border-color: rgba(0, 0, 0, 0.2); }

.portable-infobox .pi-header:hover, .portable-infobox .pi-title:hover { -webkit-filter: brightness(90%); filter: brightness(90%); }/**/

/***********************************************************************/ /****************************** Page Fonts *****************************/ /***********************************************************************/ .WikiaPage { font-family: Roboto; }

.SpeechBubble .speech-bubble-message h1, .WikiaArticle h1 { font-weight: bold; font-family: "RobotoCondensed-Bold", "Roboto Condensed", "Helvetica", "Arial", sans-serif; }

.SpeechBubble .speech-bubble-message h2, .WikiaArticle h2 { font-weight: bold; font-family: "RobotoCondensed-Bold", "Roboto Condensed", "Helvetica", "Arial", sans-serif; }

.SpeechBubble .speech-bubble-message h3, .SpeechBubble .speech-bubble-message h4, .SpeechBubble .speech-bubble-message h5, .SpeechBubble .speech-bubble-message h6, .WikiaArticle h3, .WikiaArticle h4, .WikiaArticle h5, .WikiaArticle h6 { font-family: "Roboto Condensed", "Helvetica", "Arial", sans-serif; }/**/

/***********************************************************************/ /************************** Main Page Styling **************************/ /***********************************************************************/ .mp-module { background-color: #83af50; border-bottom: 2px solid #5b7a38; border-radius: 5px; box-shadow: inset 0 -2px 0 #5b7a38; box-sizing: border-box; color: white; margin-bottom: 20px; margin-left: auto; margin-right: auto; padding: 8px 12px; text-shadow: 0 1px 2px rgba(0,0,0,.25); transition: all 0.3s; width: 90%; }

.mp-module:hover { box-shadow: inset 0 -2px 0 #5b7a38, 0 0 0 7px #a7cf5f, 0 0 0 12px #c2da88; }

.mp-module a { color: #e7ffbb; }

table.mp-module { padding: 0 5px 0 0; }

.mp-module-main { width: 100%; box-sizing: border-box; padding: 0 12px; background-color: #d4e2c0; border: 4px solid rgba(0,0,0,0.05); border-radius: 3px; box-shadow: 0 3px 0 rgba(0,0,0,0.2); margin-bottom: 20px; }

.mp-module-main > h2:first-child { margin-top: 12px; margin-bottom: 8px; }

.mp-module-main > h2:first-child a { color: #3a3a3a; }

.mp-module-sidebar { width: calc(100% - 12px); margin-left: 0; }

.mp-module-teal { background-color: #50afab; border-bottom: 2px solid #387c79; box-shadow: inset 0 -2px #387c79; }

.mp-module-teal:hover { box-shadow: inset 0 -2px #387c79, 0 0 0 7px #77d0af, 0 0 0 12px #aaddb3; }

.mp-module-teal a { color: #bffaee; }/**/

/***********************************************************************/ /*************************** Username Styling **************************/ /***********************************************************************/

/* Chur21 */ .wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":Chur21"], .Wall .edited-by a.subtle[href$="Wall:Chur21"], font-family:"Comic Sans MS", sans-serif; font-size:100%; font-variant:normal; font-weight:bold; background:-webkit-linear-gradient(330deg, #348C19, #3FD611); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":Chur21"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/Chur21"] {

.SpeechBubble .edited-by a[href$="User:Chur21"]:after, .Wall .edited-by a.subtle[href$="Wall:Chur21"]:after { content:" Churcuzzy"; font-family:"Comic Sans MS", sans-serif; font-size:12px; font-variant:small-caps; font-weight:bold; }/**/

img[alt="Chur21"].avatar:hover, li[data-user="Chur21"] .avatar:hover { animation-name:firePulse; animation-duration:1s; animation-iteration-count:infinite; border-radius:100%; }/**/

/* EpicDragon */ .wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":EpicDragon"], .Wall .edited-by a.subtle[href$="Wall:EpicDragon"], font-family:"Gloria Hallelujah", sans-serif; font-size:110%; font-variant:normal; background:linear-gradient(330deg, #70FFF7, #000000); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":EpicDragon"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/EpicDragon"] {

.SpeechBubble .edited-by a[href$="User:EpicDragon"]:after, .Wall .edited-by a.subtle[href$="Wall:EpicDragon"]:after { content:" [Potato]"; font-family:"Gloria Hallelujah", sans-serif; font-size:12px; font-variant:small-caps; }/**/

img[alt="EpicDragon"].avatar:hover, li[data-user="EpicDragon"] .avatar:hover { animation-name:firePulse; animation-duration:1s; animation-iteration-count:infinite; animation-timing-function:linear; border-radius:100%; }/**/

/* FLATtheFISH */ .wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":FLATtheFISH"], .Wall .edited-by a.subtle[href$="Wall:FLATtheFISH"], font-family:"Impact", sans-serif; font-size:110%; font-variant:normal; background:linear-gradient(330deg, #42F4F4, #197A7F); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":FLATtheFISH"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/FLATtheFISH"] {

.SpeechBubble .edited-by a[href$="User:FLATtheFISH"]:after, .Wall .edited-by a.subtle[href$="Wall:FLATtheFISH"]:after { content:" Stingray'); DROP TABLE users;--";   font-family:"Impact", sans-serif;    font-size:12px;    font-variant:small-caps; }/**/

/* MattyB420 */ .Wall .edited-by a.subtle[href$="Wall:MattyB420"], font-family:"Ultra", sans-serif; font-size:100%; font-variant:normal; background:linear-gradient(330deg, #00FFFF, #4E2987, #CD2990); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":MattyB420"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/MattyB420"] {

.SpeechBubble .edited-by a[href$="User:MattyB420"]:after, .Wall .edited-by a.subtle[href$="Wall:MattyB420"]:after { content:" Content Mod"; font-family:"Ultra", sans-serif; font-size:12px; font-variant:small-caps; }/**/

/* Osome oli */ .Wall .edited-by a.subtle[href$="Wall:Osome_oli"], font-family:"Impact", sans-serif; font-size:100%; font-variant:normal; background:linear-gradient(330deg, #FF9900, #FF0099); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":Osome_oli"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/Osome_oli"] {

.SpeechBubble .edited-by a[href$="User:Osome_oli"]:after, .Wall .edited-by a.subtle[href$="Wall:Osome_oli"]:after { content:" Discord Manager"; font-family:"Impact", sans-serif; font-size:12px; font-variant:small-caps; }/**/

img[alt="Osome oli"].avatar:hover, li[data-user="Osome oli"] .avatar:hover { animation-name:rainbowAvatar; animation-duration:4s; animation-iteration-count:infinite; animation-timing-function:linear; border-radius:100%; }/**/

/* Raicchen */ .Wall .edited-by a.subtle[href$="Wall:Raicchen"], font-family:"Allerta Stencil", Verdana, sans-serif; font-size:110%; font-variant:normal; background:linear-gradient(330deg, #0026FF, #FF00FF); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":Raicchen"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/Raicchen"] {

.SpeechBubble .edited-by a[href$="User:Raicchen"]:after, .Wall .edited-by a.subtle[href$="Wall:Raicchen"]:after { content:" Content Mod"; font-family:"Allerta Stencil", Verdana, sans-serif; font-size:12px; font-variant:small-caps; }/**/

img[alt="Raicchen"].avatar:hover, li[data-user="Raicchen"] .avatar:hover { animation-name:avspin; animation-direction:alternate; animation-duration:0.8s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; border-radius:100%; }/**/

/* ThePokegeek5000 */ .wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":ThePokegeek5000"], .Wall .edited-by a.subtle[href$="Wall:ThePokegeek5000"], font-family:"Righteous", Helvetica, sans-serif; font-size:110%; font-variant:normal; background:-webkit-linear-gradient(330deg, #FF0000, #990000, #990099, #000099, #0000FF); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":ThePokegeek5000"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/ThePokegeek5000"] {

.SpeechBubble .edited-by a[href$="User:ThePokegeek5000"]:after, .Wall .edited-by a.subtle[href$="Wall:ThePokegeek5000"]:after { content:" [Code] Overlord"; font-family:"Righteous", Helvetica, sans-serif; font-size:12px; font-variant:small-caps; }/**/

img[alt="ThePokegeek5000"].avatar:hover, li[data-user="ThePokegeek5000"] .avatar:hover { animation-name:firePulse; animation-duration:1s; animation-iteration-count:infinite; border-radius:100%; }/**/

.comments li[data-user="ThePokegeek5000"] blockquote { font-family: sans-serif; border-style: ridge; border-color: #FF0000 #00FF99 #0000FF #00FF00; border-width: 10px 10px 10px 10px;/* T R B L */ }/**/

/* Trilogy7 */ .Wall .edited-by a.subtle[href$="Wall:Trilogy7"], font-family:"Signika", sans-serif; font-size:110%; font-variant:normal; background:linear-gradient(330deg, #11AAFF, #24E6E1,  #68F68B); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":Trilogy7"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/Trilogy7"] {

.SpeechBubble .edited-by a[href$="User:Trilogy7"]:after, .Wall .edited-by a.subtle[href$="Wall:Trilogy7"]:after { content:" THE HOLY MOD"; font-family:"Signika", sans-serif; font-size:12px; font-variant:small-caps; }/**/

img[alt="Trilogy7"].avatar:hover, li[data-user="Trilogy7"] .avatar:hover { animation-name:avspin; animation-direction:alternate; animation-duration:2s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; border-radius:100%; }/**/

/* ScrubyDub2222 */ .Wall .edited-by a.subtle[href$="Wall:ScrubyDub2222"], font-family:sans-serif; font-size:110%; font-variant:normal; background:linear-gradient(330deg, #7A42F4, #228924); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":ScrubyDub2222"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/ScrubyDub2222"] {

.SpeechBubble .edited-by a[href$="User:ScrubyDub2222"]:after, .Wall .edited-by a.subtle[href$="Wall:ScrubyDub2222"]:after { content:" Admin"; font-family:sans-serif; font-size:12px; font-variant:small-caps; }/**/

/* XXxKARMAxXx */ .Wall .edited-by a.subtle[href$="Wall:XXxKARMAxXx"], font-family:"Noto Serif", sans-serif; font-size:100%; font-variant:normal; background:linear-gradient(330deg, #FF1C1C, #FF8282,  #FFFCFC); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$=":XXxKARMAxXx"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub):not(.tally) > a[href$="/XXxKARMAxXx"] {

.SpeechBubble .edited-by a[href$="User:XXxKARMAxXx"]:after, .Wall .edited-by a.subtle[href$="Wall:XXxKARMAxXx"]:after { content:" [Content Mod]"; font-family:"Noto Serif", sans-serif; font-size:12px; font-variant:small-caps; }/**/

/***********************************************************************/ /***********************************************************************/ /************************ Bottom Configuration *************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /****************************** Keyframes ******************************/ /***********************************************************************/

@keyframes avspin { 0% {       transform:rotate(0deg); }   to { transform:rotate(720deg); } }

@keyframes firePulse { 0% {       background-color:#D45500; box-shadow:0 0 9px #333333; }   50% {        background-color:#FF5C00; box-shadow:0 0 18px #FF5C00; }   to { background-color:#D45500; box-shadow:0 0 9px #333333; } }

@keyframes pulseKeybind { 0% {       background-color:#000000; }   50% {        background-color:#50AFAB; }   to { background-color:#000000; } }

@keyframes rainbow { 0% {       background-color:#FF00BB; }   14.2857142857% {        background-color:#FF0000; }   28.5714285714% {        background-color:#FFFF00; }   42.8571428571% {        background-color:#00FF00; }   57.1428571429% {        background-color:#00FFFF; }   71.4285714286% {        background-color:#0000FF; }   85.7142857143% {        background-color:#BB00FF; }   to { background-color:#FF00BB; } }

@keyframes rainbowAvatar { 0% {       background-color:#FF00BB; box-shadow:0 0 12px #FF00BB; }   14.2857142857% {        background-color:#FF0000; box-shadow:0 0 12px #FF0000; }   28.5714285714% {        background-color:#FFFF00; box-shadow:0 0 12px #FFFF00; }   42.8571428571% {        background-color:#00FF00; box-shadow:0 0 12px #00FF00; }   57.1428571429% {        background-color:#00FFFF; box-shadow:0 0 12px #00FFFF; }   71.4285714286% {        background-color:#0000FF; box-shadow:0 0 12px #0000FF; }   85.7142857143% {        background-color:#BB00FF; box-shadow:0 0 12px #BB00FF; }   to { background-color:#FF00BB; box-shadow:0 0 12px #FF00BB; } }

@keyframes sidespin { 0% {       transform:rotateY(0deg); }   to { transform:rotateY(129600deg); } }/**/