h1{
    text-align: center;
    box-shadow: 3px 1px 3px gray;
    text-shadow: 2px 2px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 10px;
    background: linear-gradient(yellow, darkorange);
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 34px;
    font-style: italic;
    color:aliceblue;
    
    animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}

#h1Premium{
    text-align: center;
    box-shadow: 3px 1px 3px rgb(255, 0, 0);
    text-shadow: 2px 2px 0px black;
    border-style:groove;
    border-radius: 2px;
    border-color: black;
    border-width: 6px;
    padding: 10px;
    
    /* 1.degradado repetible (Amarillo -> Naranja -> Amarillo) */
    background: linear-gradient(to right, rgb(255, 162, 0), rgba(184, 19, 19, 0.914), rgba(255, 238, 0, 0.914));
    /* 2. duplicar el ancho del fondo para poder desplazarlo */
    background-size: 200% auto;
    
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 34px;
    font-style: italic;
    color:aliceblue;
    
    /* 3. entrada  de 1s y el movimiento de fondo infinito */
    animation: 
        1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash,
        moverDegradadoTitulo 4s linear infinite;
        
 display:block;
 position:relative
}

/* 4. fotogramas para mover el fondo del título continuamente */
@keyframes moverDegradadoTitulo {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

h2{
    text-align: center;
    text-shadow: 2px 3px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 7px;
    background: linear-gradient(to right, rgb(196, 61, 126), rgb(234, 78, 190));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:
     'Times New Roman', Times, serif;
     color:aliceblue;
     
     animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}

h3{
    text-align: center;
    text-shadow: 1px 2px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 7px;
    background: linear-gradient(to right, rgb(219, 19, 19), rgba(253, 133, 13, 0.526));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:aliceblue;

    animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}

p{
    font-family: 'Times New Roman', Times, serif;
     font-size: 1.2rem; line-height: 1.6;
     border-style: outset;
     border-width: 3px;
     border-color: black;
     background: linear-gradient(rgba(230, 11, 11, 0.493));
    background-repeat: no-repeat;
    background-attachment: fixed;
     border-radius: 11px;
     color:aliceblue;
     padding: 14px;

     animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}


#Pnovedades{
    text-shadow: 1px 1px 0px black;
    font-family: 'Times New Roman', Times, serif;
     font-size: 1.2rem; line-height: 1.6;
     border-style: outset;
     border-width: 3px;
     border-color: black;
     background: linear-gradient(pink, purple);
     border-radius: 11px;
     color:aliceblue;
     padding: 14px;
     font-weight: bold;
     animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}

#PTexto{
    text-shadow: 1px 1px 0px black;
    font-family: 'Times New Roman', Times, serif;
     font-size: 1.2rem; line-height: 1.6;
     border-style: outset;
     border-width: 3px;
     border-color: black;
     background: linear-gradient(pink, purple);
     border-radius: 11px;
     color:aliceblue;
     padding: 14px;
     font-weight: bold;
     animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}

h4{
    text-align: center;
    text-shadow: 2px 1px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 7px;
    background: linear-gradient(to right, rgb(253, 0, 0), rgb(255, 204, 18));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:aliceblue;

    animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}


label{
    text-shadow: 2px 2px 1px black;
    font-family: 'Times New Roman', Times, serif;
     color:aliceblue;
}

#boxMain{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 4px solid;
    height: 34px;
    width: 80px;
    padding: 5px;
    background: linear-gradient(rgb(255, 213, 74), rgb(188, 0, 75));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}


#box1{
    position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 87px;
    padding: 5px;
    background: linear-gradient(to top,rgb(208, 67, 135), rgb(188, 0, 75));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}

#boxBook{
    position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 86px;
    padding: 5px;
    background: linear-gradient(rgb(255, 0, 123), rgb(75, 7, 7));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}

#boxLecturas{
    position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 4px solid;
    height: 36px;
    width: 90px;
    padding: 5px;
    background: linear-gradient(rgb(235, 145, 27), rgb(74, 30, 6));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}

@keyframes myFrameDash{
    from{transform: translateX(300px); opacity: 0;}
    to{transform: translateX(0); opacity: 1;}
}