body
{
    background-color: #000000;
    color: #FFFFFF;
}
@font-face {
   font-family: myFreescript;
   src: url(../fonts/FREESCPT.TTF);
}
@font-face {
   font-family: myHarrington;
   src: url(../fonts/HARRINGT.TTF);
}
.transparent
{ 
  background:rgba(131,170,243,0.7);
   border-radius: 25px;
}
.transparent_Header
{ 
  background:rgba(131,170,243,0.8);
   border-radius: 25px;
}

.area{
  text-align:center;
  color:#fff;
 
 
 
  animation:blur 3.1s ease-in infinite;
  text-shadow:0px 0px 0px #fff,
      0px 0px 0px #fff;
}

@keyframes blur{
  from{
      text-shadow:0px 0px 0px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;}
}

.hue {
  -webkit-animation: hue 3s infinite;
}

@-webkit-keyframes hue {
  0%, 100%  { -webkit-filter: hue-rotate(0deg); }
  50% { -webkit-filter: hue-rotate(180deg); }
}

.saturate {
  -webkit-animation: saturate 3s infinite;
}

@-webkit-keyframes saturate {
  0%, 100%  { -webkit-filter: saturate(none); }
  50% { -webkit-filter: saturate(10); }
}

@-webkit-keyframes changes {
0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;}
20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;}
30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;}
40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;}
50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;}
60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;}
70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;}
80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;}
90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;}
100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
}
@keyframes changes {
0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;}
20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;}
30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;}
40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;}
50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;}
60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;}
70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;}
80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;}
90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;}
100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
}
.changes {
-webkit-animation-name: changes;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: changes;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}


.glow {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}


/*.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}*/

/*.menu li {
    display: inline;
}*/


.tooltip {
position: relative; opacity: 0; color: #FFF;
top: -100px; left: 0px;
width: 180px; padding: 10px;
border-radius: 25px; -webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);
-webkit-transition: .5s; transition: .5s;
-webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}

.container:hover .tooltip {
opacity: 1; top: -225px;
-webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}

.fixedElement {
    position:fixed;
    top:0;
    left:400px;
    width:100%;
    z-index:100;
}

.round {

  border-radius: 50%;
  
}