/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #6D7562;
  color: #36384F;
  font-family: courier, monospace;
  font-weight: 400;
  text-align: center;
  animation: bodybg 60s ease 0s infinite alternate running;
  -moz-animation: bodybg 60s ease 0s infinite alternate running;
  -webkit-animation: bodybg 60s ease 0s infinite alternate running;
  -o-animation: bodybg 60s ease 0s infinite alternate running;
}
@keyframes bodybg {
  from {background-color: #6D7562;}
  to {background-color: #FFF;}
}

#card {
  margin-top: 72px;
  display: inline-block;
  background: white;
  background: rgba(255,255,255,0.25);
  padding: 25px 36px;
  border-radius: 3px;
  box-shadow: 
    0px 0px 30px rgba(255, 255, 255, 0.25),
    0px 0px 30px rgba(255, 255, 255, 0.25),
    0px 0px 40px rgba(255, 255, 255, 0.25),
    0px 0px 50px rgba(255, 255, 255, 0.25),
    0px 0px 20px rgba(255, 255, 255, 0.25);
  opacity: 0.9;
  max-width: 80%;
}

#card h1 {
  position: absolute;
  top: 5px;
  left: 0px;
  width: 100%;
  text-shadow: 0px 0px 14px rgba(255,255,255,0.59), 0px 0px 32px rgba(254,255,255,0.4), 0px 0px 48px rgba(255,255,245,0.33), 0px 0px 167px rgba(255,255,254,0.33);
	color: rgba(255,255,255,0.22);
	animation: _h1 6s ease 0s infinite alternate running;
  -moz-animation: _h1 6s ease 0s infinite alternate running;
  -webkit-animation: _h1 6s ease 0s infinite alternate running;
  -o-animation: _h1 6s ease 0s infinite alternate running;
}

@keyframes _h1 {
  from {text-shadow: 0px 0px 14px rgba(255,255,255,0.59), 0px 0px 32px rgba(254,255,255,0.4), 0px 0px 48px rgba(255,255,245,0.33), 0px 0px 167px rgba(255,255,254,0.33);}
  to {text-shadow: 0px 0px 34px rgba(255,255,255,0.7), 0px 0px 12px rgba(254,255,255,0.5), 0px 0px 78px rgba(255,255,245,0.4), 0px 0px 267px rgba(255,255,254,0.63);}
}

p {
  opacity: 0.5;
}

h1 {
  color: #C2C2C2;
  color: rgba(109,117,98,0.5);
  font-weight: 100;
  font-size: 3em;
  font-variant: small-caps;
  opacity: 0.5;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.333), 0 0 2px rgba(109,117,98,0.5);
}

ul {
  list-style-type: none;
  margin: 0;
  display: block;
  text-align: left;
  padding: 0 15px;
}

ul li {
  padding: 2px;
  color: #C2C2C2;
  color: rgba(109,117,98,0.5);
  opacity: 0.5;
  font-size: 1.25em;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.333), 0 0 2px rgba(109,117,98,0.5);
}

ul li a {
  padding: 1px;
  display: inline-block;
  opacity: 1;
  font-size: .8em;
  text-shadow: none;
}

a {
  text-decoration: none;
  color: #364D4F;
  border-bottom: dotted 1px #eee;
}
a:hover,a:active,a:focus {
  color: #4F3645;
  border-bottom solid 1px #bbb;
}

.text p {
 
  text-align:left; 
  
}

.center {
  display: block;
  text-align:center;
  opacity: 0.35;
}