.xx_animated {  xbackground-color: blue;
  animation-name: link;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  text-decoration : none;
  font-family: Verdana;}

@keyframes link {
  0%  {xbackground-color: yellow; color: red;}
  25%  {xbackground-color: yellow; color: #3366BB;}
  50%  {xbackground-color: yellow; color: red;}
  75%  {xbackground-color: blue; color: #3366BB;}
  100%  {xbackground-color: yellow; color: red;}
}

.rainbow-text {
  background-image: repeating-linear-gradient(90deg, blue, green, red, blue, green);
  text-align: center;
  xbackground-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 8s ease infinite;
}

@keyframes rainbow { 
    0%{background-position:0% 50%}
    50%{background-position:100% 25%}
    100%{background-position:0% 50%}
}

.cn {font-family: "Arial Unicode MS", "Lucida Sans Unicode", Tahoma, Arial;}
.cnXXS {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: xx-small;}
.cnXS {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: x-small;}
.cnS {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: small;}
.cnM {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: medium;}
.cnL {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: large;}
.cnXL {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: x-large;}
.cnXXL {font-family: "Arial Unicode MS", "Lucida Sans Unicode"; font-size: xx-large;}
.divcenter {width: 100%; margin: auto;}
.imgcenter {display: block; width: 100%; margin: auto;}
.red {color: #FF0000;}
.redb {color: #FF0000; font-weight: bold;}
.bi {font-style: italic; font-weight: bold;}
.blueb {color: #0000FF; font-weight: bold;}
.liteblueb {color: #3366BB; font-weight: bold;}
.ls {width: 30px; height: 28px;}
 .rbmain {border: 1px solid #216BFF; border-radius: 5px; font-size: smaller; padding: 5px; margin-left: 5px;} /* round corner box */
.rblb {border: 1px solid #3DABFF; border-radius: 5px; color: #3DABFF; font-size: smaller; padding: 5px; margin-left: 15px;} /* round corner box light blue smaller */
.rbly {border: 1px solid #E5DE04; border-radius: 5px; color: #E5DE04; font-size: smaller; padding: 5px; margin-left: 15px;} /* round corner box light blue smaller */
fomec {display: none;}

.select {font-family: "Verdana", "Arial Unicode MS", "Lucida Sans Unicode"; font-size: x-small;}

/* applies to images */
.sh3d {color:#000000; height:0; filter:dropshadow(6px, 6px, 6px, gray)}
.sh3d {filter: drop-shadow(8px 8px 10px gray);}
.sh3dred {color:red; height:0; filter:dropshadow(6px, 6px, 6px, , red)}

.shadow {text-shadow:4px 4px 4px black; font-weight: bold; color: #3366BB;}
.shadow a {font-size: smaller; font-weight: bold; color: #3366BB;}
.shadow a:hover {text-decoration: underline overline; color: #3366BB;}
.shadow a:visited {text-decoration: underline overline; color: #3366BB;}

span.cap {float: left; font-size: 1.7em; padding: 0 0.15em; margin: 0 0.15em 0 0; border: 3px outset #2e8b57;}
.sup {font-size: 75%; vertical-align: super; text-decoration: underline;}
.sub {font-size: 75%; vertical-align: sub}

.text-effect {overflow: hidden; position: relative; -webkit-filter: contrast(110%) brightness(190%); filter: contrast(110%) brightness(190%); text-align: center;}
.neon {position: relative; background: transparent;}
.neon::before, .neon::after { content: attr(data-text); -webkit-filter: blur(0.02em); filter: blur(0.02em); position: absolute; top: 0; left: 0; pointer-events: none;}
.neon::after { mix-blend-mode: difference;}
.gradient, .spotlight { position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; z-index: 10;}
.gradient { background: linear-gradient(45deg, red, blue); mix-blend-mode: multiply;}
.spotlight { -webkit-animation: light 5s infinite linear; animation: light 5s infinite linear; 
	background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%; top: -100%; left: -100%; mix-blend-mode: color-dodge;}
@-webkit-keyframes light { 100% { -webkit-transform: translate3d(50%, 50%, 0); transform: translate3d(50%, 50%, 0); }}
@keyframes light { 100% { -webkit-transform: translate3d(50%, 50%, 0); transform: translate3d(50%, 50%, 0); }}
.neon { font-family: Verdana, sans-serif; font-size:3vmin; text-align: center; margin: 0; text-decoration: none; letter-spacing: 10px;}
.neon:focus { outline: none; border: 1px dotted white;}

.text { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 70 330; stroke-dashoffset: 0; -webkit-animation: stroke 6s infinite linear; animation: stroke 6s infinite linear;}
.text:nth-child(5n + 1) { stroke: #F2385A; -webkit-animation-delay: -1.2s; animation-delay: -1.2s;}
.text:nth-child(5n + 2) { stroke: #F5A503; -webkit-animation-delay: -2.4s; animation-delay: -2.4s;}
.text:nth-child(5n + 3) { stroke: #E9F1DF; -webkit-animation-delay: -3.6s; animation-delay: -3.6s;}
.text:nth-child(5n + 4) { stroke: #56D9CD; -webkit-animation-delay: -4.8s; animation-delay: -4.8s;}
.text:nth-child(5n + 5) { stroke: #3AA1BF; -webkit-animation-delay: -6s; animation-delay: -6s;}
@-webkit-keyframes stroke {100% {stroke-dashoffset: -400;}}
@keyframes stroke {100% {stroke-dashoffset: -400;  }}
/* Other styles */
.animation {font: 7vmin Verdana, Arial; margin: 0; letter-spacing: 10px;}
svg {width: 100%; height: 100%;}


p#start {position: relative; width: 16em; font-size: 200%; font-weight: 400; margin: 20% auto; color: #4ee; opacity: 0; z-index: 1; -webkit-animation: intro 2s ease-out; -moz-animation: intro 2s ease-out; -ms-animation: intro 2s ease-out; -o-animation: intro 2s ease-out; animation: intro 2s ease-out;}
@-webkit-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }}
@-moz-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }}
@-ms-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }}
@-o-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }}
@keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }}
@-webkit-keyframes logo { 0% { -webkit-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -webkit-transform: scale(0.1); opacity: 0; }}
@-moz-keyframes logo { 0% { -moz-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -moz-transform: scale(0.1); opacity: 0; }}
@-ms-keyframes logo { 0% { -ms-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -ms-transform: scale(0.1); opacity: 0; }}
@-o-keyframes logo { 0% { -o-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -o-transform: scale(0.1); opacity: 0; }}
@keyframes logo { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(0.1); opacity: 0; }}
/* the interesting 3D scrolling stuff */
#titles { position: absolute; width: 18em; height: 50em; bottom: 0; left: 50%; margin-left: -9em; font-size: 350%; text-align: justify; overflow: hidden; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(300px) rotateX(25deg); -moz-transform: perspective(300px) rotateX(25deg); -ms-transform: perspective(300px) rotateX(25deg); -o-transform: perspective(300px) rotateX(25deg); transform: perspective(300px) rotateX(25deg);}
#titles:after { position: absolute; content: ' '; left: 0; right: 0; top: 0; bottom: 60%; background-image: -webkit-linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%); background-image: -moz-linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%); background-image: -ms-linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%); background-image: -o-linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%); background-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%); pointer-events: none;}
#titles p { text-align: justify; margin: 0.8em 0;}
#titles p.center { text-align: center;}
#titles a { color: #ff6; text-decoration: underline;}
#titlecontent { position: absolute; top: 100%; -webkit-animation: scroll 100s linear 4s infinite; -moz-animation: scroll 100s linear 4s infinite; -ms-animation: scroll 100s linear 4s infinite; -o-animation: scroll 100s linear 4s infinite; animation: scroll 100s linear 4s infinite;}
/* animation */
@-webkit-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; }}
@-moz-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; }}
@-ms-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; }}
@-o-keyframes scroll { 0% { top: 100%; } 100% { top: -170%; }}
@keyframes scroll { 0% { top: 100%; } 100% { top: -170%; }}

.circle {position:relative; width:18px; height:18px; border-radius:50%; margin-right:8px; background-color:#f0f0f0}
.circle:before {content:""; width:8px; height:8px; border-radius:50%; position:absolute; top:8px; left:7px; background-color:#fb0002}
.circle:after {
content:""; border-radius:50%; height:10px; width:10px; position:absolute; left:4px; top:4px; 
-webkit-animation:pulsate 1.5s ease-out;
animation:pulsate 1.5s ease-out;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
opacity:0; border:3px solid #fb0002;
}
@-webkit-keyframes pulsate {
0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}
30%{opacity:1;-webkit-transform:scale(.75);transform:scale(.75)}
to{opacity:0;-webkit-transform:scale(2.3);transform:scale(2.3)}
}
@keyframes pulsate {
0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}
30%{opacity:1;-webkit-transform:scale(.75);transform:scale(.75)}
to{opacity:0;-webkit-transform:scale(2.3);transform:scale(2.3)}
}

.blob { background: black; border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); margin: 10px;
	height: 5px; width: 5px; transform: scale(1); animation: pulse-black 2s infinite; }
.blob.red { background: rgba(255, 82, 82, 1); box-shadow: 0 0 0 0 rgba(255, 82, 82, 1); animation: pulse-red 2s infinite;}

@keyframes pulse-red {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}

.xx_animated {
  background: linear-gradient(to left, #ffffff 30%, #ffffff 50%, #ffffff 60%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  text-fill-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

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

.ww2-link {color:#FFE97F; background-color:#0026FF}


.facepalm {
  background: url(facepalm.png) center right no-repeat;
  padding-right: 18px;
  display: inline;
}