<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>cinematic text effect</title>
    <style>



        body{

            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #fdfcfd;
            text-align: center;

            display: none;
            width: 100vw;
            font-weight: 800;
            overflow: hidden;
            font-family: tahoma
        }


        .fly{
            font-size: 7em;
            margin: 35vh auto;
            height: 20vh;
            text-transform: uppercase;
        }

        .fly span {

            display: block;
            font-size: .4em;
            opacity: .8;
        }

        .fly div{
            position: absolute;
            margin: 2vh 0;
            opacity: 0;
            left: 10vw;
            width: 80vw;
            animation: switch 32s linear;

        }




            .fly div:nth-child(1){
                animation-delay: 83s;
            }

            .fly div:nth-child(2){
                animation-delay: 92s;
            }
            .fly div:nth-child(3){
                animation-delay: 107s;
            }
            .fly div:nth-child(4){
                animation-delay: 115s;
                animation-duration: 50s;
            }
            .fly div:nth-child(5){
                animation-delay: 130s;
                animation-duration: 50s;
            }
            .fly div:nth-child(6){
                animation-delay: 135s;
            }
            .fly div:nth-child(7){
                animation-delay: 140s;
            }
            .fly div:nth-child(8){
                animation-delay: 145s;
            }
            .fly div:nth-child(9){
                animation-delay: 150s;
            }


            @keyframes switch {
                0%{
                    opacity:  0;
                    filter: blur(20px); transform: scale(12);
                }

                3%{
                    opacity:  1;
                    filter: blur(0); transform: scale(1);
                }

                10%{
                    opacity:  1;
                    filter: blur(0); transform: scale(0.9);
                }
                13%{
                    opacity:  0;
                    filter: blur(10px); transform: scale(0.1);
                }
                100%{
                    opacity:  0;
                    
                }



                
            }

            

    </style>
</head>
<body>



    <div class="fly">
        <div>HOMELAND ROLEPLAY<span>PRESENTA</span></div>

        <div><span>UNA NUOVA DIMENSIONE</span></div>
        <div><span>CONCEPITA E SVILUPPATO DA:</span>HOMELAND DEVELOPMENT TEAM</div>

        <div><span>CEO</span>K4M1</div>

        <div><span>FOUNDER</span>SHOI-LILLO</div>
        <div>INNOVAZIONE<br>IMMERSIONE<br><span>È CIÒ CHE CI CONTRADDISTINGUE</span></div>
        <div><span>NUOVI SCRIPT</span>NUOVE MAPPE</div>
        <div>TUTTO QUESTO SOLO SU<br><span>HOMELAND ROLEPLAY</span></div>

        <div><span>TI RINGRANZIAMO PER AVERCI SCELTO</span>BUON DIVERTIMENTO</div>

    </div>

    <script src="./app.js"></script>
    
</body>
</html>