@import url('https://fonts.googleapis.com/css?family=Patua+One&display=swap');

#canvas{
	position: absolute;
	
}
body {
	background: url("../images/22.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 700px;
    margin: 0;
    padding: 0;
}
section
{
    position: relative;
    width: 70%;
    height:10%;
    margin: 0 auto;
    opacity: 0.8;
}
section:before {
	content:'';
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right,#f00,#f00,#0f0,#0ff,#ff0,#0ff);
	mix-blend-mode: color;
	pointer-events: none;
}
section h1 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #ddd;
	font-size: 3em;
	font-family: 'Patua One', cursive;
	letter-spacing: 0.1em;
	text-align: center;
	width: 100%;
}
section h1 span {
	opacity: 0;
	display: inline-block;
	animation: animate 1s linear forwards;
	

}
video {
	object-fit: cover;
}
h1 span:nth-child(1){
	animation-delay: 0.5s;

}
h1 span:nth-child(2){
	animation-delay: 1s;
}
h1 span:nth-child(3){
	animation-delay: 1.5s;
}
h1 span:nth-child(4){
	animation-delay: 2s;
}
h1 span:nth-child(5){
	animation-delay: 2.25s;
}
h1 span:nth-child(6){
	animation-delay: 2.50s;
}
h1 span:nth-child(7){
	animation-delay: 2.75s;
}
h1 span:nth-child(8){
	animation-delay: 3s;
}
h1 span:nth-child(9){
	animation-delay: 3.25s;
}
h1 span:nth-child(10){
	animation-delay: 3.50s;
}
h1 span:nth-child(11){
	animation-delay: 3.75s;
}
h1 span:nth-child(12){
	animation-delay: 4s;
}
h1 span:nth-child(13){
	animation-delay: 4.25s;
}
h1 span:nth-child(14){
	animation-delay: 4.50s;
}
h1 span:nth-child(15){
	animation-delay: 4.75s;
}
h1 span:nth-child(16){
	animation-delay: 5s;
}

@keyframes animate
{
    0%
    {
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(10px);
    }
    100%
    {
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0);
    }

}

.sec h3 {
	color: transparent;
	font-size: 2em;
    font-family: 'Patua One', cursive;
    /*color: #e84118;*/
	-webkit-text-stroke: 1px #546de5;
	text-transform: uppercase;
}
.wrap-login100 {
  width: 390px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  opacity: 0.8;

  box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
}
.wrap-login101{
	width: 30%;
	border: 0px solid #485460;
	border-radius: 2px;
	position: absolute;
	top: 33%;
	left: 55%;
	text-align: center;
	overflow: hidden;
	animation-duration: 4s;
	animation-delay: 4s;
	animation-iteration-count: 1;
}
.wrapper {
  background: rgba(0,0,0,0.4);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 90%;
  left: 50%;
  width: 100%;
  height: 120%;
  box-shadow: 0 15px 25px rgba(0,0,0,.4);

}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 80px 0;
  height: 400px;
  text-align: center;
  border: 0px solid red;
  margin-top: 140px;
}