*{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body{
  background: #000;
}
.container{
  text-align: center;
  position:absolute;
  top:40%;
  left:50%;
  transform: translate(-50%,-50%);
}
.container span{

  text-transform:uppercase;
  display: block;
  width: 100%;
}

.text1{

padding-top:160px;
  color: white;
  font-size: 60px;
  font-weight:700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
animation: text 3s 1;
}

@media screen and (max-width: 660px) {
  .text1{
  	font-size:30px !important;
  }
}
 
.text2{

  width: 240px;
height:240px;

}
.text2:hover{
  background:white;
  border:1px white solid;
  border-radius: 20px;
}

@keyframes text{
	0%{
  		letter-spacing: 8px;
  		color: black;
  		margin-bottom:-240px;
	}
	30%{
  		letter-spacing: 18px;
  		color: white;
  		margin-bottom: -240px;
	}

	60%{
  		letter-spacing: 8px;
  		margin-bottom: -240px;
  		color: white;
	} 



}