@keyframes blanc {
    from {
        height: 0px;
        width: 0px;
        opacity: 0%;
        display: none;
        background: none;
        visibility: hidden;
        transform: scale(0);
        animation-play-state: paused;
    }
    to {
        background: none;
        display: none;
        opacity: 0%;
        height: 0px;
        width: 0px;
        visibility: hidden;
        transform: scale(0);
        animation-play-state: paused;
    }
}
.none{
    animation-name: blanc !important;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background: none;
}






@keyframes gravity {
    from {
        transform: skew(-1);
    }
    to {
        transform: skew(1);
        
        
    }
}
.frag{
    animation-name: gravity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background: none;

}

@keyframes stand {
    from {
           position: fixed;
           padding-top: 34px;
    }
    to {
        position: fixed;
        
        
    }
}

.enemy{
    animation-name: stand;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background: none;
}


@keyframes hit2 {
    from {
        height: 10px;
        opacity: 0% ;
    }
    to { height: 100px; }
}
.hit{
    animation-name: hit2;
    animation-duration: 1s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    background: none;
}
@keyframes button {
    from {
        background-color: rgb(153, 0, 255);
        color: black;
        text-decoration: underline;
        text-decoration-color: black;
        text-decoration-style:dotted ;
        border: 2px rgb(255, 0, 255) solid ;
        border-style: dotted;

    }
    to {
        color: white;
        background-color: rgb(48, 145, 24);
        text-decoration: underline;
        text-decoration-color: white;
        text-decoration-style: dashed ;
        border: 2px rgb(255, 0, 255) solid ;
        border-style: dashed;
    }
}
button:hover{
    animation-name: button;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background: none;
}
@keyframes buttonNor {
    100%{
        border: 2px rgb(255, 0, 0) solid ;
        border-style: dotted;
        transform: rotate(-1deg);
    }
    70%{
        border: 2px rgb(238, 255, 0) solid ;
        border-style: dashed;
    }
    40%{
        border: 2px rgb(0, 255, 13) solid ;
        border-style: dotted;

    }
    10%{
        border: 2px rgb(4, 0, 255) solid ;
        border-style: dashed;
    }
    0%{
        border: 2px rgb(0, 255, 255) solid ;
        border-style: groove;
        transform: rotate(1deg);
    }
}
button{
    animation-name: buttonNor;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes buttonClick {
    100%{}
    0%{
        border: 2px rgb(255, 0, 0) solid ;
        border-style: dotted;
        background-color: rgb(89, 0, 255);
    }
}
button:active{
    animation-name: buttonClick;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode:both;
}



@keyframes atack {
    100%{
        background-color:rgb(238, 255, 0) ;
        border: 2px rgb(255, 0, 0) solid ;
        border-style: dotted;
    }
    70%{
        background-color: rgb(255, 0, 0) ;
        border: 2px rgb(238, 255, 0) solid ;
        border-style: dashed;
    }
    40%{
        border: 2px rgb(0, 255, 13) solid ;
        border-style: dotted;
        background-color: blue;

    }
    10%{
        background-color: greenyellow;
        border: 2px rgb(4, 0, 255) solid ;
        border-style: dashed;
    }
    0%{
        background-color: blueviolet;
        border: 2px rgb(0, 255, 255) solid ;
        border-style: groove;
    }
}
#atack{
    animation-name: atack;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes texto {
    100% {
        background: rgb(65,232,216);
        background: linear-gradient(90deg, rgba(65,232,216,1) 41%, rgba(238,247,117,1) 100%);

    }
    75%{
        background: rgb(65,232,216);
        background: linear-gradient(90deg, rgba(65,232,216,1) 20%, rgba(238,247,117,1) 70%);
    }
    50%{
        background: rgb(65,232,216);
        background: linear-gradient(90deg, rgba(65,232,216,1) 0%, rgba(238,247,117,1) 40%);
    }
    25%{
        background: rgb(65,232,216);
        background: linear-gradient(90deg, rgba(65,232,216,1) 0%, rgba(238,247,117,1) 0%);
    }
}
#cajaDeTexto{
    animation-name: texto;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}





@keyframes enemyHit {
    from {background-color: white;
        color: honeydew;
    padding-left: 200px;}
    to {padding-right: 200px;}
}
.enemyHit{
    animation-name: enemyHit;
    animation-duration: 100ms;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

@keyframes boost {
    from {height: 45px;
        padding-left: 45px;  
    }
    to {padding-left: 450px;
        height: 45px;
    opacity: 0%;}
}
.lifeImg{
    animation-name: boost;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: initial;
}
@keyframes boostLife {
    from {            
        background: rgb(18,255,0);
        background: linear-gradient(90deg, rgba(18,255,0,1) 45%, rgba(0,0,0,1) 100%); 
        color: black;
    }
    to {}
}
.lifeBoost{
    animation-name: boostLife;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: initial;
}
@keyframes boostMana {
    from {            
        background: rgb(18,255,0);
        background: linear-gradient(90deg, rgba(18,255,0,1) 45%, rgba(0,0,0,1) 100%); 
        color: black;
    }
    to {}
}
.manaBoost{
    animation-name: boostMana;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: initial;
}
.kill{
    opacity: 0%;
    transition: 15s;
}
@keyframes fire{
    from {
        height: 400px;
       padding-left: 55px;
    }
    to {
        height: 400px;
        padding-right: 25px;}
}

.fireOn{
    animation-name: fire;
    animation-duration: .2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes win{
    from {
        height: 1000px;
        width: 1000px ;
        padding-left: 10%;;          
    }
    to {
        height: 1000px;
        width: 1000px;
        padding-right: 20%;}
}   
.wins{
    animation-name: win;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes lifeLow {
    from {border: 5px green solid;}
    to { border: 5px red solid;}
}

.lifeLow{
    animation-name: lifeLow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes cursor{
    from {    
        color: black;
        opacity: 0%;
        height: 10px;
        transform: translateY(120px);
    }
    to {
        color: black;
        height: 150px;
        background-color: chocolate;
        }
}

.cursor{
    overflow: visible;
    color: black;
    width: 400px;
    height: 660px;
    margin-right: 900px;
    margin-top: 20px;
    animation-name: cursor;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode:both;
    position: fixed;
    z-index: 2;
}

@keyframes bag{
    from {}
    to {
        transform: perspective(180deg);
        border: 10px solid green;
        background-color: black;
        margin-top: 35px;
        margin-left: 50px;
        height: 350px;
        width: 500px;
        border-style: dashed ;
        }
}
@keyframes bagIn{
    from {}
    to {
        font-size: 17px;
        color: black;
        background-color: rgb(18, 143, 18);
        padding-bottom: 25px;
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: red;
        border:  4px crimson solid;
        border-style: dotted;

    }
}


.bag{

    animation-name: bag;
    animation-duration: 0.70s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
}
.bag div{
    min-height: 15px;
    max-height: 20px;
    padding-left: 35px;
    padding-top: 10px;
    border:  2px crimson solid;
}


.bag div:hover{
    animation-name: bagIn;
    animation-duration:0s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
    

}

@keyframes humo{
    from {      
        height: 400px;      
        padding-top: -150px;
        padding-left: 50px;
    }
    to {
        height: 400px;
        padding-top: -150px;
        padding-right: 50px;}
}
.humo{
    animation-name:humo;
    animation-duration: 1s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

@keyframes bite{
    from {
        transform: rotate(45deg);      
        margin-top: 80px;
        height: 400px;
    }
    to {
        margin-top: 80px;
        transform: rotate(45deg);
        height: 400px;
        }
}
.bite{
    animation-name:bite;
    animation-duration: 280ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}
@keyframes shield{
    from {
        height: 400px;
    }
    to {
        height: 400px;
        }
}
.shield{
    animation-name:shield;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes dead {
    from {
        opacity: 100%;
    }
    to {
        opacity: 0%;
      
    }
  }
.dead{
    animation: dead 3s ; 
    animation-fill-mode:both;
    animation-play-state: running;
}
@keyframes deadText {
    from {
        height: 45px;

    }
    to {
        height: 45px;
    }
  }

.deadText{

    animation: deadText 2s ; 
    animation-fill-mode:both;
}
@keyframes killDead {
    from {
        
        position: fixed;
        height: 20px;

    }
    to {
        position: fixed;
        height: 20px;
    }
  }

.killDead{
    animation-delay: 4s;
    animation: killDead 9s ; 
    animation-fill-mode:both;
}
@keyframes reBirth {
    from {
        
        position: fixed;
        height: 40px;

    }
    to {
        position: fixed;
        height: 40px;
    }
  }

.reBirth{
    animation-delay: 4s;
    animation: reBirth 9s ; 
    animation-fill-mode:both;
}
@keyframes void {
    from {
            transform: skew(0deg)

    }
    to {

        transform: skew(100deg);
    }
  }



  .void{
    animation-name:void;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
  }

  @keyframes margin{
    from {
        display: flex;
        margin-bottom: 450px;
        z-index: 10;
        padding-bottom: 12345px;

    }
    to {
        display: flex;
        z-index: 10;
        margin-bottom: 450px;
        transform: rotate(12345567890deg);
        transform: skew(12345678890deg);
    }
  }
.skillsOn{

    animation-name: margin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: initial;
    
}

@keyframes select {
    from {
        opacity: 100%;

    }
    to {
        opacity: 10%;
        
    }
  }
.select{
    animation-delay: 6s;
    animation-name:select;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode:both;
}


@keyframes shake{
    from {
        color: red;
        margin-right: 5%;

    }
    to {
        margin-left: 5%;
        
    }
  }

  .shake{
    animation-name:shake;
    animation-duration: .1s;
    animation-iteration-count: 1;
    animation-direction: alternate;
}

@keyframes init{
    from {     transform: perspective(180deg);
        border: 10px solid green;
        background-color: black;
        margin-top: 35px;
        height: 350px;
        width: 350px;}
    to {
    
        }
}
.init{
    animation-name: init;
    animation-duration: 0.70s;
    animation-iteration-count: 1;
    animation-fill-mode:both;

}
@keyframes letter{
    from {    
        opacity: 0%;
        position: fixed;
    }
    to {
        opacity: 100%;        
        position: fixed;
        z-index: 11;
        margin-left: 230px;
        margin-top: 5px;
        background-image: url(./Nota.png);
        height:600px;
        width: 900px;}
}
.note{
    animation-name: letter;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
}
@keyframes letterText{
    from {    
        opacity: 0%;
        position: fixed;
    }
    to {
        height: 1000px;
        width: 700px;
        position: fixed;
        margin-left: 190px;
        margin-top: 15px;
        color: black;
        font-size: 45px;
        font-family: 'Cedarville Cursive', cursive;
        text-decoration: underline;
        text-decoration-style: double ;
        line-height:60px;
    }
}
.noteText{
     animation-name: letterText;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
}
@keyframes dialogo{
    from {    
        
    }
    to { 
        width: 1000px;
        margin-right: 450px;
        transform: scale(2);
        z-index: 10;
    }
}

#dialogo:active{
    animation-delay: 3s;
    animation-name: dialogo;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
}
@keyframes apear{
    from {    
        opacity: 0%;
        height: 0px;
    }
    to { 

    }
}

.buttonSkills{
    animation-delay: 8s;   
    animation-name: apear;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
}
.buttonSkills:hover{
    animation-delay: 8s;   
    animation-name: apear;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode:both;
}

@keyframes menu{
    from {
        position: fixed;
        z-index: 99;
        display: flex;
        flex-direction: column;
        margin-left: 370px;
        margin-top: 60px;
        width: 1000px;
    }
    to { 
        position: fixed;
        z-index: 99;
        display: flex;
        flex-direction: column;
        margin-left: 370px;
        margin-top: 60px;
        width: 1000px;
    }
}
.menuOn{  
    animation-name: menu;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.menuOn img{
    animation-name: buttonNor;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}