body{
    background-image: url(/imagenes/fondoAgua.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
h3{
    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(61, 0, 0), rgb(219, 9, 9));
    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
}
button{
    border-style:groove;
     border-radius: 14px;
     border-width: 6px;
     border-color: black;
    background: linear-gradient(to right, rgb(167, 10, 10), rgb(0, 0, 0));
    margin-right: 50%; 
     color:
     rgb(255, 255, 255); 
     width: 150px; height: 70px;
      font-family:fantasy;

      animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}
h1{
    text-align: center;
    box-shadow: 3px 3px 3px gray;
    text-shadow: 2px 3px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 10px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));
    background-repeat: no-repeat;
    background-attachment: fixed;
    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
}
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(61, 0, 0), rgb(219, 9, 9));
    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
}
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(to right, rgb(61, 0, 0), rgb(219, 9, 9));
    background-repeat: no-repeat;
    background-attachment: fixed;
     border-radius: 11px;
     color:aliceblue;

     animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}
img{
    border-style: outset;
    border-radius: 15px;
    border-width: 6px;
    border-color: black;
     background: linear-gradient(to right, rgb(56, 13, 211), rgb(125, 0, 50));
     width: 270px; height: auto;
     padding: 15px;
     
     animation: 0.5s linear 0s 1 running myFrameDash;
 display:block;
 position:relative
}
#box1{
    position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 70px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

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

}
label{
    text-shadow: 2px 2px 0px black;
    font-family: 'Times New Roman', Times, serif;
     color:aliceblue;
}
#box2{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 70px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
#box3{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 70px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
#box4{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 70px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
#box5{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 70px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
#box6{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 5px solid;
    height: 41px;
    width: 70px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
#boxMain{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 4px solid;
    height: 41px;
    width: 79px;
    padding: 5px;
    background: linear-gradient(to right, rgb(61, 0, 0), rgb(219, 9, 9));

    animation: 0.5s linear 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
a:hover{
    color: beige;
}
button:hover{
    color: beige;
    box-shadow: 3px 3px 3px rgb(0, 0, 0);
}
button:active{
    color: red;
    box-shadow: 3px 3px 3px rgb(255, 0, 0);
}
img:hover{
    color:beige;
    box-shadow: 3px 3px 3px aquamarine;
}
img:active{
    color: red;
    box-shadow: 3px 3px 3px rgb(232, 0, 0);
}

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