body {
    background: yellow;
}

h1{
    background: rgb(1, 1, 133);
    color:yellow;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 45px;
    padding: 8px;
    margin: 20px;
    text-align: center;
    border-radius: 20px;
}
    
    .groove{
        border-style:groove;
}

/*Efecto para el fondo de los links o enlaces*/
.fondo{
    background:rgb(0, 0, 104);
    padding: 10px;
    border-radius:20px;
    /*display: flex;
    justify-content: center;*/
}
/* Efecto para los links o enlaces*/
.efecto {
    background:rgb(2, 2, 133);
    border-radius:20px;
    color: yellow;
    margin: 10px;
    padding: 10px;
    display: flex;
    text-decoration: none;
    font-size: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.efecto:hover{
    background: rgba(231, 231, 3, 0.925);
    color: rgb(2, 2, 219);

}

div{
    color:#00005f;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-align: center;
}

span{
    background-color: #00005f;
    color: #fffb00;
    border-radius: 10px;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 45px;
    white-space: nowrap;
    border-right: 2px solid;
    text-align: center;
    width: 23ch;

    animation: typing 2s steps(30), blink .5s infinite step-end alternate;
    overflow: hidden;
}

@keyframes typing {
    from {width: 0;}
    
}

@keyframes blink {
    50% { border-color: transparent}
}

p{
    color: rgb(0, 0, 148);
}
/* codigo para imagen gif */
img {
    width: 200px;
    display: block;
    margin: 0px auto;
}