@import url(//fonts.googleapis.com/css?family=Vibur);

body {
margin: 0;
background: #000;
color: #fff;
}

.matrix {
width: 100%;
margin: 0 auto;
}

p {
font-size: 1.3em;
text-orientation: upright;
writing-mode: vertical-rl;
display: inline-block;
}

p span {
animation: matrix 1.5s linear infinite;
opacity: 0;
}

/* Rain Animation  */
@keyframes matrix {
0% {
    color: #fff;
    opacity: 1;
}
5% {
    color: #2bc235;
    opacity: 1;
}
100% {
    opacity: 0;
}
}

#container {
position: relative;
border: 1px solid black;
overflow: auto;
width:400px;
height:200px;
}
canvas {
position: absolute;
left: 0;
top: 0;
width:100%;
height:100%;
}
#overlay {
position: absolute;
text-align: center;
left: 0;
top: 35%;
width: 100%;
height: 250px;
}
.logo b{
font: 200 12vh "Vibur";
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 0.8em #f944ff, 0 0 0.2em #f944ff, 0 0 0.1em #f944ff, 0 10px 3px #000;
}
.logo b span{
animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2){
animation: blink linear infinite 3s;
}
@keyframes blink {
78% {
    color: inherit;
    text-shadow: inherit;
}
79%{
    color: #333;
}
80% {
    
    text-shadow: none;
}
81% {
    color: inherit;
    text-shadow: inherit;
}
82% {
    color: #333;
    text-shadow: none;
}
83% {
    color: inherit;
    text-shadow: inherit;
}
92% {
    color: #333;
    text-shadow: none;
}
92.5% {
    color: inherit;
    text-shadow: inherit;
}
}

.mejs__overlay-button {
	background-image: url("/mediaelement/build/mejs-controls.svg");
}
.mejs__overlay-loading-bg-img {
	background-image: url("/mediaelement/build/mejs-controls.svg");
}
.mejs__button > button {
	background-image: url("/mediaelement/build/mejs-controls.svg");
}