body{
    background: url('flowers.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    font-family: 'Pacifico', cursive;
    overflow: hidden;
}
.butterfly{
    width: 200px;
    height: 100px;
    margin: 0 auto;
    perspective: 400px;
    animation:fly 12s linear infinite;
}
/* First .butterfly element */
.butterfly.butterfly-1{
    margin-left: 20vw;
    animation: fly 15s linear infinite reverse;
}
/* Last .butterfly element */
.butterfly.butterfly-3{
    margin-right: 20vw;
    animation: fly 8s linear infinite reverse;
}
.butterfly dev{
    float: left;
}
.wing{
    color: white;
    font-weight: bold;
    height: 140px;
    width: 80px;
    background: url('butterfly.png');
    background-repeat: no-repeat;
    background-size: 200%;
}
.wing.left{
    transform-origin: 100% 50%;
    float: left;
    animation: wingl 0.3s linear infinite;
}
.wing.right {
    transform-origin: 0 50%;
    background-position: 100% 0;
    float: left;
    animation: wingr 0.3s linear infinite;
}

@keyframes fly {
    0%{
        transform: translate(0,0) rotate(0) scale(1);
    }
    20%{
        transform: translate(120%,90%) rotate(20deg) scale(1.1);
    }
    40%{
        transform: translate(-40%,150%) rotate(-30deg) scale(1.4);
    }
    60%{
        transform: translate(40%,80%) rotate(-10deg) scale(1.1);
    }
    80%{
        transform: translate(-80%,10%) rotate(20deg) scale(0.9);
    }
}

@keyframes wingl {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(60deg);
    }
}

@keyframes wingr {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(-60deg);
    }
}


.text-effect {
    display: flex;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    padding-inline-start: 0;
}

.text-effect li {
    color:#262626;
    font-size: 8vw;
    letter-spacing: 0.8vw;
    list-style: none;
    animation: blink 3s infinite linear;
}

.name-text-effect {
    display: flex;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    padding-inline-start: 0;
}

.name-text-effect li {
    color: #262626;
    font-size: 8vw;
    letter-spacing: 0.8vw;
    list-style: none;
    animation: blink-name 3s infinite linear;
}
@keyframes blink-name {
    0%{
        color: #262626;
        text-shadow: 0 0 8px #262626, 0 0 20px #4fcff3;
    }
    20%{
        color: #4fcff3;
        text-shadow: 0 0 8px #262626, 0 0 20px #4fcff3;
    }
    30%{
        color: #262626;
        text-shadow:none
    }
    40%{
        color: #4fcff3;
        text-shadow: 0 0 8px #262626, 0 0 20px #4fcff3;
    }
    50% {
        color: #262626;
        text-shadow: none
    }
    60% {
        color: #262626;
        text-shadow: none
    }
    75% {
        color: #4fcff3;
        text-shadow: 0 0 8px #262626, 0 0 20px #4fcff3;
    }
    100% {
        color: #262626;
        text-shadow: none                        
    }
}
@keyframes blink {
    0%{
        color: #262626;
        text-shadow: 0 0 8px #262626, 0 0 20px #ff11ff;
    }
    20%{
        color: #ff11ff;
        text-shadow: 0 0 8px #262626, 0 0 20px #ff11ff;
    }
    30%{
        color: #262626;
        text-shadow:none
    }
    40%{
        color: #ff11ff;
        text-shadow: 0 0 8px #262626, 0 0 20px #ff11ff;
    }
    50% {
        color: #262626;
        text-shadow: none
    }
    60% {
        color: #262626;
        text-shadow: none
    }
    75% {
        color: #ff11ff;
        text-shadow: 0 0 8px #262626, 0 0 20px #ff11ff;
    }
    100% {
        color: #262626;
        text-shadow: none                        
    }
}


#player {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
}