/*Styles*/
body,html {
    height: 100%;
    background-color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
}

.background-image {
    background-image: url(background.jpg);

    height: 100%;
    -webkit-filter: blur(8px);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    animation: intro 2s;
}

h1, h2 {
    font-family: sans-serif;
    color: rgb(255, 255, 255);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -110%);
}

h2 {
    font-size: 2vw;
}

h1 {
    opacity: 0;
    font-size: 5vw;
    animation: logo 2s 12s forwards;
    color: #FFFFFF;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
}

#text-1, #text-2, #text-3 {
    width: 0;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    
}

#text-1 {
    animation: text-dialog 3s 2s forwards;
}

#text-2 {
    animation: text-dialog 3s 6s forwards;
}

#text-3 {
    animation: text-dialog 3s 10s forwards;
}


/*Keyframes*/
@keyframes intro {
    from {opacity: 0; filter: blur(0px);}
    to {opacity: 1; filter: blur(8px);}
}

@keyframes logo {
    from {opacity: 0; font-size: 0vw;}
    to {opacity: 1; font-size: 5vw;}
}

@keyframes text-dialog{
    0% {width: 0; opacity: 0.4;}
    40% {width: 23%; opacity: 1;}
    80% {width: 23%; opacity: 1;}
    100% {width: 23%; opacity: 0;}
}