body {
    background: radial-gradient(#27333d,#001b18);
}
.logo {
	margin-top:10px;
	position: relative;
	overflow: auto;
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
	/* top: 11px; */
	/* left: 46px; */
	margin: 0 auto;
	width: 500;
	top: 100px;
}	

.title {
    width: 500px;
    margin: 0 auto;
    position: relative;
    top: 100px;
    font-family: Montserrat Alternates;
    LETTER-SPACING: 10px;
    color: #27333d;
    text-shadow: 1px 1px #97ff98;
}

.animated {
	animation-duration: 2.5s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
@keyframes pulse {
	0% {transform: scale(1);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
}
@keyframes float {
	0% {
	
		transform: translatey(0px);
	}
	50% {
		
		transform: translatey(-20px);
	}
	100% {
		
		transform: translatey(0px);
	}
}

html{
  font: .9em 'Raleway',sans-serif;
  height: 100%;
  text-align: center;
  color: white;
}
p a{
  color: white;
}
.mask a{
  position: relative;
  display:block;
  width: 350px;
  height: 199px;
  text-align:center;
  margin: 0 auto;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
  /* top: 50%; */
}
.mask a{
  background-position: -315px 0;
}
.mask a:hover,
.mask a:focus{
  background-position: 10px 0;
  /*change speed to see in slow motion*/
  transition: all 1s;
}
.mask a::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255, 243, 160, 0) 90%,rgba(253, 255, 230, 0.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit;
  -webkit-mask: url('0505dy_Logo.jpg') center;
  mask: url('#mask-firefox');
}

.mask.pseudo {
    position: relative;
    top: 26%;
}