body{
    /*background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F0d%2F0f%2F55%2F0d0f5524b92c39f5304300da11b07fa6.gif&f=1&nofb=1");*/
    background-image: url("./falling_spring.gif");
}

#canvas{
    position: absolute;
    left: 400px;
    top: 75px;
}

#danger{
    animation: flash 0.1s 20;
    opacity: 0;
    font-family: "lucida handwriting", cursive;
    position: absolute;
    text-align: center;
    top: -100px;
    font-size: 200px;
    z-index: 99999;
    color: violet;
}

@keyframes flash{
    0%{opacity: 0;}
    1%{opacity: 1;}
    50%{opacity: 1;}
    51%{opacity: 0;}
}


#princess{
    height: 150px;
    position: absolute;
    left: 1100px;
    top: 130px;
    z-index: 99998;
}
#messageofdefeat{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    position: absolute;
    left: 730px;
    top: 1000px;
    font-size: larger;
    animation: appearance 60s;
    background-color:lemonchiffon;
}

@keyframes appearance{
    0%{opacity: 0;}
    70%{opacity: 0;}
    79%{opacity: 1;}
    100%{opacity: 1;}
}

#buttonyes{
    width: 200px;
    height: 35px;
    position: absolute;
    left: 800px;
    top: 1200px;
   animation: appearance 30s;
}

#buttonno{
    width: 200px;
    height: 35px;
    top: 1250px;
    left: 800px;
    position: absolute;
    margin-bottom: 300px;
    animation: appearance 30s;
}

#secreto{
    top: 1350px;
    left: 800px;
    position: absolute;
    opacity: 0;
}

@keyframes slowmoappear{
    0%{opacity: 0;}
    80%{opacity: 0;}
    85%{opacity: 1;}
    93%{opacity: 1;}
    100%{opacity: 0;}
}

#speech1{
    position: absolute;
    left: 500px;
    color: lemonchiffon;
    top: 300px;
    animation: slowmoappear 12s;
    opacity: 0;
}

#speech2{
    position: absolute;
    left: 530px;
    color: lemonchiffon;
    top: 340px;
    animation: slowmoappear 16s;
    opacity: 0;
}
#speech2_5{
    position: absolute;
    left: 550px;
    color: lemonchiffon;
    top: 380px;
    animation: slowmoappear 22s;
    opacity: 0;
}


#speech3{
    position: absolute;
    left: 620px;
    color: lemonchiffon;
    top: 420px;
    animation: slowmoappear 24s;
    opacity: 0;
}
#speech4{
    position: absolute;
    left: 1150px;
    color: lemonchiffon;
    top: 630px;
    animation: slowmoappear 33s;
    opacity: 0;
}