body{
    background: yellow;
}

h1 {
    background: rgb(0, 0, 167);
    border-radius: 15px;
    color: yellow;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 30px;
    text-align: center;
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto ;
}

.fondo{
    background:rgb(0, 0, 104);
    padding: 10px;
    border-radius:20px;
}

.efecto{
    background:rgb(2, 2, 133);
    border-radius:20px;
    color: yellow;
    margin: 10px;
    padding: 10px;
    display: flex;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

}

.inicio{
    background:rgb(2, 2, 133);
    border-radius: 12px;
    color: yellow;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 25px;
    text-align: center;
    text-decoration: none;
    display: block; width: 15%;
    margin-left: auto;
    margin-right: auto;
}

.inicio:hover{
    background: rgba(6, 3, 219, 0.925);
    color: rgb(238, 255, 0)
}

div{
    color: rgb(3, 3, 139);
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-align: center;
    /* text-decoration: none; */
    /* text-shadow: none; */
}

/* efectos para el enlace "Diseñado por: Joao Johnny" */
a {
    font-size: 14px;
    text-decoration: none;
}

/* esto aplica para el gif al final */
img {
    width: 200px;
    display: block;
    margin: 0px auto;
}