body{
    background-image: url("https://imagenes.heraldo.es/files/image_990_v3/uploads/imagenes/2018/09/11/_nueva_34393b28.jpg");
    background-size: cover;
    }
    
    .titulo:hover{
        color:red;
    }
    
    .container{
        background-color: rgb(138, 6, 6);
        width: 25%;
        position: relative;
        left:35%;
        top:20px;
        height: 50px;
        border-radius: 15px;
        border:3px black solid;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .container2 {
        background: linear-gradient(45deg, rgba(214, 14, 14, 0.8), rgba(197, 2, 2, 0.8));
        width: 40%;
        position: relative;
        left: 28%;
        top: 40px;
        height: 600px;
        border-radius: 15px;
        border: 3px red solid;
        text-align: center;
        line-height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .container2 p {
        display: inline-block;
        opacity: 0;
        animation: fadeIn 0.5s forwards;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    /* Añade un retraso progresivo a cada letra */
    .container2 p:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .container2 p:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .container2 p:nth-child(3) {
        animation-delay: 0.3s;
    }
    p{
        color: rgb(0, 0, 0);
        margin-top: -0%;
        font-size: 20px;
        color: white !important;
    }
    
    button{
        width: 150px;
        height: 50px;
        position:relative;
        left:15px;
        padding: 5px;
        border-radius: 15px;
        border: double rgb(255, 0, 0);
        background-color: black;
        color: white;
        animation: bounce 10s infinite;
        bottom:-100%;
    
    }
    .button-container {
        display: flex;
        justify-content: space-around; /* Ajusta la distribución horizontal */
        width: 55%; /* Ocupa todo el ancho disponible */
    }
    .container2 button {
        margin: 10px; /* Añade espacio entre los botones */
    }
    button:hover{
        cursor:crosshair !important;
        color:red !important;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-20px);
        }
        60% {
          transform: translateY(-10px);
        }
      }
    .fa-solid fa-arrow-right fa-bounce{
        opacity: 0px;
    }