body{
	font-family: 'Shrikhand', serif;
	color: #000;
	background-color: white;
	overflow: hidden;
	text-align: center;
}

 .color {
      animation: colorchange 33s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 33s; /* Chrome and Safari */
	  animation-iteration-count: infinite;
	  opacity: 0.7;
    }

    @keyframes colorchange
    {
      0%   {color: red;}
      25%  {color: yellow;}
      50%  {color: blue;}
      75%  {color: green;}
      100% {color: red;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {color: red;}
      25%  {color: yellow;}
      50%  {color: blue;}
      75%  {color: green;}
      100% {color: red;}
    }


a:link, a:visited, a:hover, a:active{
    text-decoration: none;
	color: black;
}
a.legal:link{
    text-decoration: none;
	color: white;
}
button {
    border: none;
    color: red;
    text-decoration: none;
    display: inline-block;
	padding: 1px;
}
#inside {
	text-align: center;
	width: 100vmax;
}
#name {
	display: inline;
	position: relative;
	font: 15vmax Shrikhand;
	color: rgba(0,0,255,0.5); 
	z-index: -1
}

#name:after {
	content: "angel!ca";
	position: absolute; left: 0.5vw; top: 0.6vh;
	      animation: colorchange 9s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 9s; /* Chrome and Safari */
	  animation-iteration-count: infinite;
	  opacity: 0.5;
    }

    @keyframes colorchange
    {
      0%   {color: red;}
      25%  {color: yellow;}
      50%  {color: blue;}
      75%  {color: green;}
      100% {color: red;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {color: red;}
      25%  {color: yellow;}
      50%  {color: blue;}
      75%  {color: green;}
      100% {color: red;}   
}

.space{
    letter-spacing: -2.11vw;
}
.fix{
    letter-spacing: 0.06vw;
}
#social{
	width: 100vmax;
	position: relative; top: 12.5vmax; right: -22.5vmax
}
#out{
	font-size: 4vw;
	position: relative; top: 21vmax;
}

.pad {
	padding: 10px;
} 

.fwd {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.fwd:hover, .fwd:focus, .fwd:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}
.bwd {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bwd:hover, .bwd:focus, .bwd:active {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}
@-webkit-keyframes bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bob:hover, .bob:focus, .bob:active {
  -webkit-animation-name: bob-float, bob;
  animation-name: bob-float, bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
#legals{
    font-weight: bold;
	font-size: small;
	color: white;
	position: fixed;
    bottom: 20px;
}