* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow: hidden;
}

canvas {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.caps {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: as 8s linear infinite;
}

.caps img {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes as {
    0% {
        opacity: 0;
    }
    10% {
        opacity: .3;
    }
    20% {
        opacity: .1;
    }
    30% {
        opacity: .5;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: .8;
    }
    55% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
}

.frame {
    z-index: 3;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */

}

.frame div {
    position: absolute;
    left: 0;
    top: -20%;
    width: 100%;
    height: 20%;
    background-color: rgba(0, 0, 0, .12);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    animation: asd 12s linear infinite;
}

.frame div:nth-child(1) {
    animation-delay: 0;
}

.frame div:nth-child(2) {
    animation-delay: 4s;
}

.frame div:nth-child(3) {
    animation-delay: 8s;
}

@keyframes asd {
    0% {
        top: -20%;
    }
    100% {
        top: 100%;
    }
}

h1 {
    z-index: 3;
    position: absolute;
    font: bold 200px/200px Arial, sans-serif;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    width: 100%;
    margin-left: -50%;
    height: 200px;
    text-align: center;
    color: transparent;
    text-shadow: 0 0 30px rgba(0, 0, 0, .5);
    animation: asdd 2s linear infinite;
}

@keyframes asdd {
    0% {
        text-shadow: 0 0 30px rgba(0, 0, 0, .5);
    }
    33% {
        text-shadow: 0 0 10px rgba(0, 0, 0, .4);
    }
    66% {
        text-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    100% {
        text-shadow: 0 0 40px rgba(0, 0, 0, .8);
    }
}